VU CUSTOM
User Guides
User Guides
  • Getting Started
    • Overview
    • Getting Started
    • Product Visualization
      • 2D Guidelines
      • 3D Guidelines
    • Product Matrix
    • Next Steps
  • 🏂Onboarding
    • Implementation Overview
    • Setup E-Commerce Store
      • Shopify setup
    • Embedding the VU Customizer
    • Styling the Customizer
  • Customizer Admin
    • Overview
    • Templates
    • 🚀Starting Points
    • Colors
    • Color Palettes
    • Font Library
    • Image Library
    • Elements
    • Embroidery Fonts
    • Embroidery Designs
    • Product Management
      • Products
      • Upcharges
  • VU Admin Platform Management
    • Access Admin Panel
    • Locales
    • Profanity Filter
    • Stores
    • Manage Announcements
    • User Management
      • Manage Roles
      • Create and Manage Users
  • Production
    • View and Manage Orders
    • Traveler
    • Manage Factories
    • Order Routing
    • Connections
    • Webhooks
    • Process Orders via OMS
  • Reporting
    • Query Builders
    • Recipe Report Queries
    • Operational Dashboard
    • Dashboards
    • Recipe Reports
  • Glossary
    • Glossary
    • Image Collections
    • Photography vs 3D Modelling
    • Assets
    • User Content
    • JS Library
    • File Types
    • Vector vs Rastor
    • PDP
    • Profanity Filter
    • Recipe ID
    • Order Statuses
  • Concepts
    • Decision Elements
    • Cover Components
Powered by GitBook
On this page
  1. Onboarding

Styling the Customizer

PreviousEmbedding the VU CustomizerNextOverview

Last updated 2 months ago

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

🏂
Embed Customizers