Integrating Customizer in Shopify
This user guide provides step-by-step instructions for integrating the customizer functionality from VU Custom OS into a Shopify product page.
This process allows you to embed customizer templates created in VU Custom OS directly onto your Shopify store's product detail pages (PDPs).
While these steps are specifically detailed for Shopify, the general principles can be adapted for other e-commerce platforms, though the exact location identification of the product page may differ.
Prerequisites:
Access to a Shopify Partners page with collaborator access.
Existing templates created within the VU Custom OS.
Overview of Steps:
Create New Template
Add Basic HTML to Render
Add Script to Render Customizer
Select Template in Product Section
Step 1: Log in and Navigate to Code Editor
Log in to your Shopify account via the Shopify partners page.
From the Shopify admin page, navigate to "Online Store".
Click on "Code" to access the theme editor.
Step 2: Create a New Product Template
In the main editor interface, locate and click "Add new template".
When prompted, choose "product" as the type of template.
Give your new template a name, for example, "new-test". Take a note of the template name for further reference.
Step 3: Create a New Section and Copy Schema
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.
Ensure that the type parameter within the section's schema matches the section name (e.g., type: "new-test").
To provide a base for your new PDP page, you need a schema to replace the default schema code populated.
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.
Paste the copied schema into your newly created section file (e.g., sections/new-test.liquid).
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
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.
<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>Paste this HTML and script into the wrapper div within your new template file (e.g., templates/product.new-test.liquid).
Configure the Product ID within the HTML script:
The script contains an ID that connects to a specific product template from VUCustom OS.
To 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.
<script
id="customizer"
src="https://vu-customizer.s3.amazonaws.com/production/main.js"
data- variant="{{ product.selected_or_first_available_variant.id }}"
></script>
Save your new template file.
Step 5: Select the New Template for a Product
After both your section and template files are saved correctly, you need to apply this new template to your Shopify products.
Navigate to the "Product" section in your Shopify admin.
Choose a specific product (e.g., "snicker") for which you want to enable the customizer.
Under the product's settings, select your newly created PDP template (e.g., "new-test") from the available templates.
Save the product settings. The product page will now display with your new customizer template.
Last updated