How to embed a product customization button into your web page

About the product customization button

  • Embedding a product customization button is an excellent choice when you want to add customization option to an existing product's web page.
  • This feature is versatile and can be seamlessly added to any page, functioning as an ordering form without an integrated cart.
  • You can easily tailor the form to your needs, collecting all the necessary information for order and get print-ready files.

Before we get started

To embed Smart Customizer onto your page, start by signing up here: SmartCustomizer

You will get a free 30-day trial, and afterward, you can select a plan that best fits your needs.

Order form activation

The first thing you need to do is enable Order form inputs. This order form will serve as the final step where the customer provides all the necessary information for placing an order after customization is complete. To do so, follow these steps:

  1. Go to My profile.
  2. Click Activate order form. How to activate the order form
  3. Select your preferred Order form fields and add custom confirmation checkboxes under the form if needed. Choose all necessary order form fields
  4. Scroll down to the bottom of the page and Save the changes. Save order fields changes
    Once you’ve done with the order form, you can start embedding the button.

How to embed a button

  1. Go to My profile.
  2. Select Installation and click Embed. Customization button emdedding
  3. Copy SC app script code. Sript code
  4. Insert the code just prior to the closing tag or, if preferable, position it as close to the bottom of your website's HTML code as possible. Code emdedding
  5. Copy SC button style code. Button style
  6. Insert SC button style code into the product's HTML code at any desired location and enter your SC product ID (mid). This parameter is used to specify the product that needs to be loaded and is mandatory. Button emdedding
  7. To find the SC product ID (mid) go to your product list and copy the ID. Product ID
  8. You can also add other optional Parameters if necessary:
    • tid parameter is used to specify the primary template with which the product will be loaded. It can be found by navigating to Design Templates and copying Design Template ID. Design Template ID
    • tid and ot combination is used to send a product with just one design template and no option to choose others.
    • lng parameter can be used when you want to send a translated link. Just make sure the translation has been added to preferences beforehand. Instructions on how to do it can be found here. Parameters
  9. If you want you can also change the name of the button or make other modifications. Button name
  10. After making these changes the customize button should appear on your product web page.

Tips & Tricks

  • Ensure you test your changes thoroughly. Even small mistakes can lead to the button not functioning correctly.
  • When making extensive HTML modifications, it is essential to retain the 'id=,' 'data-params=,' 'class=' and 'style=' parameters. However, you can incorporate additional styles within the last 'style' section.
  • If you want, you can include multiple 'Customize' buttons.