# Installation Guide - VU Custom's Available OTB Styles for Shopify

## Part 1: Installation Guide

Before making changes to your code, it is highly recommended to create a backup of your live theme.

### Prerequisites

Before starting, ensure you have the source code files.

{% file src="/files/2L00AsuS7AivwfjBRR0i" %}

### Steps to Install OTB Styles

{% stepper %}
{% step %}

#### Backup Your Theme

{% endstep %}

{% step %}

#### Open Code Editor

{% endstep %}

{% step %}

#### Create Necessary Files

{% endstep %}

{% step %}

#### Add the Code

{% endstep %}

{% step %}

#### Activate the Section

{% endstep %}
{% endstepper %}

#### **Step 1: Backup Your Theme**

1. Log in to your **Shopify Dashboard**.
2. Go to **Online Store > Themes**.

<figure><img src="https://1693733896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV56EB1o35ldW3VFb4OY3%2Fuploads%2F7yfJiMOsg6j6e7IFtSt0%2FScreenshot%202025-12-18%20at%207.51.52%20PM.png?alt=media&#x26;token=752a6f6e-0d59-48c2-9211-eb6d7b2c25fd" alt=""><figcaption></figcaption></figure>

3. Click the **three dots (⋯)** next to your current live theme.
4. Select **Duplicate**. This creates a safe backup copy to work on.

#### **Step 2: Open the Code Editor**

1. On the duplicated theme you just created, click the **three dots (⋯)** again.
2. Select **Edit Code** to open the theme file editor.

<figure><img src="https://1693733896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV56EB1o35ldW3VFb4OY3%2Fuploads%2FvMds7cnYW0KSCmm8Fryw%2FScreenshot%202025-12-18%20at%207.55.06%20PM.png?alt=media&#x26;token=06ba5e00-fc29-4a81-90d4-ba75e37f0d8a" alt=""><figcaption></figcaption></figure>

#### **Step 3: Create Necessary Files**

You need to create four specific files - three within the **Snippets** folder and one in the **Sections** folder.

**In the Snippets folder:**

1. Scroll down to the "**Snippets**" folder and click "**Add a new snippet**".
2. Name it: **template-1.liquid**
3. Repeat to create: **template-2.liquid**
4. Repeat to create: **template-3.liquid**

**In the Sections folder:**

1. Scroll down to the "**Sections**" folder and click "**Add a new section**".
2. Name it: **Vu-custom.liquid**

#### **Step 4: Add the Code**

1. Open the folder on your computer where you extracted the files.

<figure><img src="https://1693733896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV56EB1o35ldW3VFb4OY3%2Fuploads%2FKljGjrZu6zgY8pClM0hF%2FScreenshot%202025-12-18%20at%208.09.37%20PM.png?alt=media&#x26;token=76421d75-32e9-4237-81c9-e08fa0206045" alt=""><figcaption></figcaption></figure>

2. Open the file corresponding to **template-1**. Copy **all** contents and paste them into the **template-1.liquid** file in Shopify.
3. Repeat this process for **template-2.liquid**, **template-3.liquid**, and the **vu-custom.liquid** section file.

<figure><img src="https://1693733896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV56EB1o35ldW3VFb4OY3%2Fuploads%2FE8vvS7Yrk3zKYApmz9SU%2FScreenshot%202025-12-18%20at%208.16.16%20PM.png?alt=media&#x26;token=119d5736-aff5-4c4c-87cc-58f4efb640fa" alt=""><figcaption></figcaption></figure>

4. Click **Save** in the top right corner after pasting code into each file.

#### **Step 5: Activate the Section**

1. Exit the code editor and return to the **Themes** dashboard.
2. Click **Customize** on your duplicated theme.
3. Navigate to the **Product Template** (using the dropdown selector at the top center of the editor).
4. On the sidebar, click **+ Add section**.
5. Search for and select **"VU Customizer"**.

<figure><img src="https://1693733896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV56EB1o35ldW3VFb4OY3%2Fuploads%2FZlN2Zyhi6hSiGCCl7uBz%2FScreenshot%202025-12-18%20at%208.21.32%20PM.png?alt=media&#x26;token=000d6e1f-b18a-4fa6-950a-c822117168a0" alt=""><figcaption></figcaption></figure>

***

## Part 2: Configuration & Settings

Once the section is added, click on "VU Customizer" in the sidebar to open the settings panel. You can switch between **Template 1**, **Template 2**, or **Template 3** via the dropdown menu.

### **Choosing Your Layout**

Select the template that best fits your product visualization needs:

#### **Template 1**

This template allows you to launch the customizer using the Customize Now button:

<figure><img src="/files/bO5S1Q1kB4P642xcZ4NE" alt=""><figcaption></figcaption></figure>

Customizer is loaded and displayed to the user as per the layout below:

<div><figure><img src="/files/PoMzgXQZC3Z1O32TZ0IC" alt=""><figcaption></figcaption></figure> <figure><img src="/files/oXUMWsLVP9ouQ8SPEqgs" alt=""><figcaption></figcaption></figure></div>

<figure><img src="/files/kPEPEuAX1rN9G6a18ow8" alt=""><figcaption></figcaption></figure>

#### **Template 2**

This template allows the user to view a collection. Once a collection item is selected - customizer is loaded to display the product customiziation options.

<figure><img src="/files/bqDEpqgkYcxy4VsM2NPR" alt=""><figcaption></figcaption></figure>

<div><figure><img src="/files/ezlEUxHjLO4nUnOavRbN" alt=""><figcaption></figcaption></figure> <figure><img src="/files/EwcsGQ1UKVrEyu2JtnxV" alt=""><figcaption></figcaption></figure></div>

<figure><img src="/files/wnO5ZfQGMBvTTJt79I9D" alt=""><figcaption></figcaption></figure>

#### **Template 3**

This template allows users to customize the product using the tabs on the right side of the page.

<figure><img src="/files/Pe4vR7llrOozvFv6QkMv" alt=""><figcaption></figcaption></figure>

<div><figure><img src="/files/plV89XllFUO9SUCmK5hF" alt=""><figcaption></figcaption></figure> <figure><img src="/files/Ptdrn9IARhQGke8Favg5" alt=""><figcaption></figcaption></figure> <figure><img src="/files/IgwTybthXM7J0qiKI90p" alt=""><figcaption></figcaption></figure> <figure><img src="/files/irb5uyTrrbORvMDhISUR" alt=""><figcaption></figcaption></figure> <figure><img src="/files/IhxKfEwYsld4pyT7hT3h" alt=""><figcaption></figcaption></figure></div>

After all the input from the user is collected in different tabs, the details of the customisation are displayed to the user. The user can verify and add the product to cart.

<figure><img src="/files/Cqx61104mg3NwJzc9W7j" alt=""><figcaption></figcaption></figure>

***

#### **Common Settings (All Templates)**

These settings apply regardless of which template you select:

* **Background Image:** Set an image for the customizer interface background.
* **Logo:** Upload the logo displayed within the customizer.
* **Brand Color:** The primary color used for buttons and selected items.
* **Secondary Background Color:** Background color for selectors and summary items.
* **Typography:**
  * Heading Font & Body Font: Select font families for the customizer text.
  * Text Color: Primary text color.
  * Secondary Text Color: For text on darker backgrounds.
  * Title Size: Adjusts the font size of the main title.
* **UI Controls:**
  * Buttons & Selector Radius: Controls the roundness of button corners and dropdowns.
  * Show/Hide Controls: Toggle visibility for "Save", "Share", and "Reset" buttons.
  * Hide Tabs: Enter the number of specific tabs to hide (separated by commas).

***

#### **Template-Specific Settings**

Each template has unique settings that only appear when that template is selected.

**Template 1 Specifics:**

* **Image Size:** Adjusts the display size of images in the customizer.
* **Icons:** Toggles to show or hide the **Drag** and **Zoom** icons.

**Template 2 Specifics:**

* **Brand Logo:** Sets the specific logo displayed on the customizer loading screen.

**Template 3 Specifics:**

* **Header Height Override:** Adjusts modal position relative to headers (set to 0 to auto-detect).
* **Brand Logo:** Shown on the loading screen and bottom navigation rail.
* **Button Styling Grid:** Extensive color controls for the Template 3 button grid, including background, text, hover states, and border colors.

***

## Part 3: Go Live

1. Once you have configured the settings and are happy with the preview, return to your **Shopify Dashboard**.
2. Locate your customized duplicate theme.
3. Click **Publish** to make VU Custom live on your store.

<figure><img src="https://1693733896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV56EB1o35ldW3VFb4OY3%2Fuploads%2F2suk2CAYSSKp5yHhfe0r%2FScreenshot%202025-12-18%20at%208.30.38%20PM.png?alt=media&#x26;token=df4c4683-c22b-4997-87f4-21daa1f9fbc5" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: 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:

```
GET https://vu-custom.gitbook.io/vu-custom/integrations-connections/vu-x-shopify/installation-guide-vu-customs-available-otb-styles-for-shopify.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.