Shopify Customizer Implementation Guide

This guide will help you implement the Customizer library in your Shopify store. For an overview of common concepts and workflows, please refer to the Ecommerce Integration Overview.

Prerequisites

  • A Shopify store with theme access
  • Your unique Customizer details (provided separately), including:
    • iframeSrc URL
    • editorId
    • productsCategoryId
    • Other configuration parameters

Installation

To add the Customizer to your Shopify theme, you'll need to edit your theme files. This can be done directly in the Shopify admin, through a Git-based workflow, or using your preferred theme development method.

Add the following script tag to include the Customizer library in your theme:

<script src="https://cdn.idealfactory.com/editors/customiser_xxx.min.js"></script>

Configuration

To set up the Customizer, add the necessary HTML and JavaScript to your product template or other relevant pages. Here's a basic configuration:

  1. Add a container div for the Customizer:

    <div id="customizer-container"></div>

  2. Initialize the Customizer with your configuration:

    <script>
 document.addEventListener('DOMContentLoaded', function() {
   var customizer = new Customizer({
     containerId: 'customizer-container',
     iframeSrc: '{ IFRAME_SRC }', // Provided in your Customizer details
     editorId: '{ EDITOR_ID }', // From your Customizer details
     productsCategoryId: '{ CATEGORY_ID }', // From your Customizer details
     cartItemUid: 'cart-item-uid',
     platform: 'shopify'
   });
 });
</script>

    Replace the placeholders (e.g., { IFRAME_SRC }, { EDITOR_ID }, { CATEGORY_ID }) with the actual values from your Customizer details.

Cart Template Modifications

To properly display and manage customized products in the cart, you'll need to modify your cart template. Here are the necessary changes:

  1. Add the following Liquid code at the beginning of your cart template to generate a UUID for each item:

    {%- assign urlUUID = '' -%}
{%- if item.properties._uuid != null -%}
   {%- assign urlUUID = '&uuid=' | append: item.properties._uuid -%}
{%- endif -%}

  2. Update the product title link to include the UUID:

    <a href="{{ item.url | append: urlUUID }}">
 {{ item.product.title }}
</a>

  3. Add an "Edit Design" button for each customized item:

    <div>
 <a href="{{ item.url | append: urlUUID }}">
   <input type="button" class="btn" value="Edit Design">
 </a>
</div>

  4. Update the product image display to show the customized thumbnail if available:

    {%- if item.properties._thumbnails != null -%}
 <div class="image">
   <img class="image__img" src="{{ item.properties._thumbnails[0] }}">
 </div>
{%- else if item.image -%}
 {% render 'image' with image: item.image %}
{%- else -%}
 <!-- Add a placeholder image or message here -->
{%- endif -%}

These modifications will ensure that customized products are properly displayed in the cart, with the ability to edit the design and view the customized thumbnail.