Shopify Headless Customizer Implementation Guide

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

Platform-Specific Integrations

For iframe setup instructions, please visit the Web Integration Page.

Cart Integration

For Shopify headless setups, the cart integration will be handled by your custom code. The Customizer will call the onAddToCart callback function provided in the configuration when a customized product is added to the cart.

Here's an example of how you might handle the onAddToCart callback:

function handleAddToCart(customizedProductData) {
  // Add the customized product to your cart
  // This will depend on your specific headless implementation
  addToHeadlessCart({
    productId: customizedProductData.ecommerce_variant_id,
    quantity: 1,
    customProperties: {
      _template_config: customizedProductData._template_config,
      _thumbnails: customizedProductData._thumbnails,
      _cart_item_uid: customizedProductData._cart_item_uid
    }
  });

  // Update your cart UI
  updateCartUI();
}

You'll need to implement the following functions based on your headless setup:

  • addToHeadlessCart: Add the customized product to your cart storage (e.g., local storage, server-side session, or Shopify cart API)
  • updateCartUI: Update your cart user interface to reflect the added item

When displaying the cart, you'll need to handle the custom properties to show the customized thumbnail and provide an edit link:

function renderCartItem(item) {
  return `
    <div class="cart-item">
      <img src="${item.properties._thumbnails[0]}" alt="${item.title}">
      <h3>${item.title}</h3>
      <a href="/products/${item.handle}?uuid=${item.properties._cart_item_uid}">Edit Design</a>
    </div>
  `;
}

Remember to handle the uuid parameter when opening the product page to load the correct customized design into the Customizer.