> For the complete documentation index, see [llms.txt](https://vu-custom.gitbook.io/vu-custom/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vu-custom.gitbook.io/vu-custom/onboarding/styling-the-customizer.md).

# 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](/vu-custom/onboarding/embedding-the-vu-customizer.md) 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](broken://pages/QnzZgE4VQn1ua4MWVSDk).

<br>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://vu-custom.gitbook.io/vu-custom/onboarding/styling-the-customizer.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
