# Styling the Customizer in Shopify The following HTML can be added to your Shopify page alongside the JS Snippet in the Embed Customizers section. Once added, the JS Snippet will map the customizer elements to these HTML elements upon loading. ```html
``` The following example is a more styled customizer, demonstrating how the elements can be rearranged. The JS Snippet will map the customizer to the new element layout accordingly. ```html Customizer
``` ## Embed the 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. 
<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. {% hint style="info" %} The widget will not appear immediately after adding the .JS snippet, as VU Custom developers must also complete some setup in VU Admin. {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://vu-custom.gitbook.io/vu-custom/integrations-connections/vu-x-shopify/styling-the-customizer-in-shopify.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.