Styling 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.
Unset
<html>
<head>
<title>Customizer</title>
</head>
<body>
<div id="customizer-root">
<div class="container">
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-body">
<div id="customizer-main-perspective"></div>
</div>
</div>
</div>
<div class="col-4">
<div class="card mb-1">
<div class="card-body">
<div class="customizer-product-name"></div>
<div class="customizer-price"></div>
</div>
</div>
<div class="card mb-1">
<div class="card-body">
<button class="customizer-add-to-cart-button btn
btn-danger rounded-0"></button>
</div>
</div>
<div class="card mb-1">
<div class="card-body">
<div id="customizer-tab-container"></div>
<div id="customizer-tab-body-container"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script
id="customizer"
src="https://vu-customizer.s3.amazonaws.com/production/main.js" data-variant="{VARIANT}"
></script>
</body>
</html>For more information, refer to the Styling the Customizer.
Last updated