Linked Products tab

This feature is an option within the template editor that allows you to connect a customization template to its corresponding parent product or product category on your e-commerce platform. This linkage is a critical step in the implementation process, as it ensures that the correct customizer experience is loaded for the right product when a customer visits your site.

The primary purpose of linking a product is to establish a connection between the customizer you build in the VU OS and the specific SKUs you sell on your e-commerce storefront. It acts as a bridge, telling your website which customizer template belongs to which product.

Here are the key functions:

• Association: It links your customization template to the "parent product" or the original product category it is meant for.

• E-commerce Integration: This connection is essential for platforms like Shopify. It enables the VU Custom JavaScript snippet on your product pages to call the correct customizer by identifying which product is being viewed.

• ID Generation: After a template is linked to a product, an ID is generated. This ID is found within the "link product" section of the template in the VU Custom OS and is used in the embedding script on your site.

A template can be connected to many different products, creating a "one to many" relationship.

Guide to Configure Linked Products for a New Template

Here is a step-by-step guide to linking a template to a product during the configuration process.

1

Navigate to the Template Editor

First, you need to be inside the detailed editor for the template you wish to configure.

1. From the Dashboard, go to Customizer > Templates.

2. Find the template you want to work on and click Edit to open the detailed template editor.

2

Locate and Use the "Link to Product" Option

Within the template editor, you will find a list of different configuration tabs and options.

1. Click Link to Product to initiate the process of adding the template to the parent product.

2. Select the site using the dropdown

3. Enter the Template name and click Search

4. Select the applicable product variant from the list displayed and click Link to Template

3

Retrieve the Product/Template ID

Once the linking is complete, an ID will be available that connects this specific template to the product.

1. The ID can be found within the link product section of the template you are editing.

2. This ID is what you will need for the final integration step on your e-commerce site.

4

Use the ID for E-commerce Integration

The final step is to use this ID to embed the customizer on your live product pages.

1. On your e-commerce platform (e.g., Shopify), you will add a JavaScript snippet to your Product Display Pages (PDP).

2. This snippet contains a data-variant attribute where the product ID needs to be passed. For example: <script id="customizer" ... data-variant="{VARIANT}"></script>3. By inserting the ID you retrieved from the "Link to Product" section into this snippet, you ensure that when a customer visits that product page, the correct customizer template is fetched and displayed.

3. There is also a dynamic method available where a dynamic tag can be used in the script instead of a static ID, which will automatically populate the correct ID based on the product page being viewed