Embedding the VU Customizer

Adding the VU Customizer to your Product Display Page

The below code must be added to all product display pages that will be personalized through VU Custom. In the subsequent instructions, this code will be referred to as the JS Snippet.

Unset 
<script 
id=“customizer” 
src=“https://vu-customizer.s3.amazonaws.com/production/main.js” 
data-variant=“{VARIANT}” 
></script> 

The JS snippet calls the VU Custom server to fetch the appropriate VU widget. It determines which widget to load based on the variant ID passed through as {VARIANT}. The snippet should be placed on the product display page for all products that require customization.

The typical method for implementing this JS snippet involves using a ruleset in the Shopify code to determine when to include the snippet. This ruleset checks for a tag, metafield, or other identifiers from the product setup page in the Shopify admin.

For example, you could tag every personalized product with the tag “VU CUSTOM”, and then inside the product display page, write a method that checks for this tag and inserts the JS snippet if the VU CUSTOM tag is true.

This implementation methodology enables scalability as future products are added to the program and simplifies the process of toggling the widget for an existing product. To disable the widget, remove the VU CUSTOM tag from the product.

The widget will not appear immediately after adding the .JS snippet, as VU Custom developers must also complete some setup in VU Admin.