Integrate the Customizer with Your Frontend

The VU Customizer is implemented through a single JavaScript snippet that must be added to your product display pages (PDP). This guide explains the proper implementation of this essential component.

Implementation

Basic Snippet Structure

<script src="https://silhouette.jtbcustom.com/js/loader/{VARIANT}.js?store_key={KEY}"></script>
<div id="jtbconfigurator"></div>

This code checks if the product has a "customizable" tag before loading the customizer. Adjust the condition as needed for your specific setup.

Dynamic Variant Implementation

Add this code to your product template to dynamically populate the variant ID:

{% assign passed_variant = product.selected_or_first_available_variant %}
<script src="https://silhouette.jtbcustom.com/js/loader/{{passed_variant}}.js?store_key={KEY}"></script>
<div id="jtbconfigurator"></div>

Integration Guidelines

Product Page Implementation

1. Locate your product template file in your Shopify theme

2. Add the JavaScript snippet where you want the Customizer to appear

3. Replace {KEY} with your provided store key

4. Ensure the jtbconfigurator div is present

Best Practices

1. Use Shopify's conditional logic to load the Customizer only on relevant products

2. Place the snippet in the appropriate location within your product template

3. Verify the store key is correctly implemented

4. Test the implementation across multiple product variants

Conclusion

After implementing the VU Customizer on your product pages, the next crucial step is understanding how customization data is managed through Recipe IDs. Recipe IDs are unique identifiers that capture and store all customization choices made through the Customizer.

Next Steps

1. Verify your Customizer implementation

2. Review the Recipe ID documentation to understand:

   • How customization data is stored

   • How orders are tracked through your system

   • How to access customization details for manufacturing

   • Best practices for order management