# Integrating The VU Customizer in Shopify

## Prerequisites:

* Access to a Shopify Partners page with collaborator access.
* Existing templates created within the VU Custom OS.

## Overview of Steps:

{% stepper %}
{% step %}

#### Create New Template

{% endstep %}

{% step %}

#### Add Basic HTML to Render

{% endstep %}

{% step %}

#### Add Script to Render Customizer

{% endstep %}

{% step %}

#### Select Template in Product Section

{% endstep %}
{% endstepper %}

### Step 1: Log in and Navigate to Code Editor

1. **Log in to your Shopify account** via the Shopify partners page.
2. From the Shopify admin page, navigate to "**Online Store**".
3. Click on "**Code**" to access the theme editor.

<figure><img src="https://715396754-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNK3w0YSe08elKyCIsYnc%2Fuploads%2Fbgq91hLBf2eTykwGHJwT%2Fimage.png?alt=media&#x26;token=9d42202e-f69d-4a8f-b927-2f1a3656e776" alt=""><figcaption></figcaption></figure>

### Step 2: Create a New Product Template

<figure><img src="https://715396754-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNK3w0YSe08elKyCIsYnc%2Fuploads%2FmuHTH7fkenYuQyWyekzd%2Fimage.png?alt=media&#x26;token=fbceaae6-2eda-4f5b-8fab-23887edf566f" alt=""><figcaption></figcaption></figure>

1. In the main editor interface, locate and click "**Add new template**".
2. When prompted, **choose "product"** as the type of template.

<figure><img src="https://715396754-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNK3w0YSe08elKyCIsYnc%2Fuploads%2FvKOjWNeHQQDk7r8a5nkM%2Fimage.png?alt=media&#x26;token=f168ff97-a795-46ca-80d1-b2dc785da862" alt=""><figcaption></figcaption></figure>

3. **Give your new template a name**, for example, "new-test". Take a note of the template name for further reference.

<figure><img src="https://715396754-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNK3w0YSe08elKyCIsYnc%2Fuploads%2FjVx3fxUGZDzYaJ3caoRd%2Fimage.png?alt=media&#x26;token=d1208d46-a209-4f61-bc8d-dadd300ad129" alt=""><figcaption></figcaption></figure>

### **Step 3: Create a New Section and Copy Schema**

1. Create a new section that corresponds to your new template. The section name should be the same as your template name, e.g., "*new-test*". The full file name will typically be *product.new-test.liquid.*

<figure><img src="https://715396754-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNK3w0YSe08elKyCIsYnc%2Fuploads%2FTQAo8ky8kpK35RaMdwkZ%2Fimage.png?alt=media&#x26;token=8da4640f-1997-411d-af2e-15dc18b0e040" alt=""><figcaption></figcaption></figure>

2. Ensure that the type parameter within the section's schema matches the section name (e.g., type: "new-test").

<figure><img src="https://715396754-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNK3w0YSe08elKyCIsYnc%2Fuploads%2Fxx17gXW7pF8t1xaGwlaH%2Fimage.png?alt=media&#x26;token=83dad6f8-6344-4623-b7b5-99bbf92982b8" alt=""><figcaption></figcaption></figure>

3. To provide a base for your new PDP page, you need a schema to replace the default schema code populated.

<figure><img src="https://715396754-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNK3w0YSe08elKyCIsYnc%2Fuploads%2FfEL4r4CHn1oAAoC8LhAG%2Fimage.png?alt=media&#x26;token=b452a7e8-2d00-4519-9596-d6aa47687553" alt=""><figcaption></figcaption></figure>

4. **Copy the schema from the default product detail page (PDP) in Shopify.** This is found in *sections/main-product.liquid*.

* Scroll to the bottom of the main-product.liquid file to find the schema section or Search for “schema”.
* **Copy this entire schema section.**

5. **Paste the copied schema into your newly created section file** (e.g., sections/new-test.liquid).
6. **Save** the section file.

> **Note**: : If there are any errors in the schema, the system will not save it and will pop up an error message, which you can use to resolve the issue.

### **Step 4: Add Minimal HTML and Script to Embed Customizer**

1. Obtain the **minimal HTML and script** required to embed the customizer. An example of minimal HTML includes a div with a specific style and class, and a script part.

```html
<div id="customizer-root">
  <div class="middleScreen flex">
    <div class="flex pr-12 wrapper1">
      <div id="customizer-root">
        <div
          style="position: relative"
          class="customizer-main-perspective-wrapper"
        >
          <div id="customizer-main-perspective"></div>
        </div>
      </div>
    </div>
    <div class="sideBar">
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <div class="product-custom-info">
          <h1 class="customizer-product-name"></h1>
          <h2 class="customizer-price"></h2>
        </div>

        <div class="flex justify-center mt-2 gap-2">
          <div class="top-right-buttons">
            <button title="Save Wishlist" id="customizer-save-button">Save</button>
            <button title="Share Link" id="customizer-share-button">Share</button>
          </div>
        </div>
      </div>

      <div class="element-wrapper">
        <div id="customizer-tab-container" style="display:none;"></div>
        <div id="customizer-tab-body-container"></div>
        <div class="card" style="display:none;">
          <div class="card-body">
            <div
              style="display: flex; justify-content: center"
              class="pointer-icon"
            >
              <div>
                <span id="tab-prev"></span>
                <span id="tab-next"></span>
              </div>
            </div>
          </div>
        </div>

        <div class="card" style="display:none>
          <div class="card-header">Summary</div>
          <div class="card-body">
            <div id="customizer-summary-items" class="font-14"></div>
          </div>
        </div>
      </div>
      <div class="flex justify-center mt-18">
        <button class="add-to-bag customizer-add-to-cart-button btn">Add to Bag</button>
      </div>
    </div>
  </div>
</div>
<script
  id="customizer"
  src="https://vu-customizer.s3.amazonaws.com/production/main.js"
  data-variant="47177649783034"
></script>
```

2. **Paste this HTML and script into the wrapper div** within your new template file (e.g., templates/product.new-test.liquid).
3. **Configure the Product ID within the HTML script:**

* The script contains an ID that connects to a specific product template from VUCustom OS.
* T**o get a static product ID:** Navigate to VUCustom OS, go to the "Template" section, and then find the "Link product" section. The ID will be available in the URL.
* **For a dynamic product ID (recommended)**: Instead of a static ID, you can use a dynamic tag. This tag will automatically populate the correct product ID based on which product's PDP is being viewed. This means the same template can work for multiple products without manual ID changes.

```html
<script 
    id="customizer" 
    src="https://vu-customizer.s3.amazonaws.com/production/main.js" 
    data-  variant="{{ product.selected_or_first_available_variant.id }}"
></script>
```

4. **Save** your new template file.

### **Step 5: Select the New Template for a Product**

1. After both your section and template files are saved correctly, you need to apply this new template to your Shopify products.
2. Navigate to the "Product" section in your Shopify admin.
3. Choose a specific product (e.g., "snicker") for which you want to enable the customizer.
4. Under the product's settings, select your newly created PDP template (e.g., "new-test") from the available templates.
5. Save the product settings. The product page will now display with your new customizer template.

{% hint style="info" %}
Additional Information:

* After the minimal configuration, you can further customize the customizer's appearance and position using CSS. This involves designing the "skin" or shifting the position of the div element to match your design requirements.
* You have the option to create multiple templates if needed, each linked to different customizer designs or functionalities.
  {% endhint %}


---

# 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/integrating-the-vu-customizer-in-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.