search

pen-fancy-slashStyling the Customizer

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 page. Once added, the JS Snippet will map the customizer elements to these HTML elements upon loading.

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

For more information, refer to the Styling the Customizer.

PreviousEmbedding the VU CustomizerNextOrder Flow, ArtWork Generation, and Testing

Last updated