search

square-penStyling the Customizer in Shopify

Styling the customizer is the brand's responsibility and this section provides guidelines and instructions to add CSS and modify the HTML layout, giving you full control over the customizer’s styling.

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.

        <div id="customizer-root"> 
            <div class="customizer-product-name"></div> 
            <div class="customizer-price"></div> 
            <button id="customizer-reset-button"></button> 
            <div id="customizer-saved-item-count"></div> 
            <button id="customizer-save-button"></button> 
            <button id="customizer-share-button"></button> 
            <div id="customizer-perspectives" style="float: left"></div> 
            <div id="customizer-main-perspective" style="float: left"></div> 
            <div id="customizer-saved-items"></div> 
            <div id="customizer-summary-items"></div> 
            <div id="customizer-tab-container"></div> 
            <div id="customizer-tab-body-container"></div> 
            <div id="customizer-disclaimer"></div> 
            <div id="customizer-share-link"></div> 
            <button class="customizer-add-to-cart-button"></button> 
        </div> 
        
        <script 
            id="customizer" 
            src="https://vu-customizer.s3.amazonaws.com/production/main.js" 
            data-variant="{VARIANT}" 
        ></script> 
    </body> 
</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.

hashtag
Embed the Customizer:

hashtag
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.

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.

circle-info

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

PreviousIntegrating The VU Customizer in ShopifyNextInstallation Guide - VU Custom's Available OTB Styles for Shopify

Last updated