Ecommerce Customizer Integration Overview

This guide provides an overview of integrating the Customizer with various ecommerce platforms. It covers common concepts, workflows, and features across different integrations.

Product Synchronization

To ensure smooth operation between your ecommerce platform and our Order Management System (OMS), we provide a product synchronization feature:

  1. Setup:

    • Add our custom app to your ecommerce platform's admin panel.
    • Grant necessary permissions for product management.
    • Generate secret keys in your ecommerce platform.
    • Paste these secret keys into the Productioon Hub & OMS UI.

  2. Synchronization:

    • Productioon Hub & OMS can push new products to your ecommerce platform.
    • Productioon Hub & OMS can pull existing products from your ecommerce platform.
    • Productioon Hub & OMS can update existing products with customization information.

  3. Customization Metadata:

    • For Shopify, product metafields are used to store customization information.
    • Products can be marked as:
      • Non-customizable but print-ready
      • Customizable upon customer request
      • Forced to be customized before purchase

  4. Product Types:

    • Customizable products can start as blank canvases.
    • Customizable products can be pre-designed using templates.
    • Pre-designed products are typically considered separate products in the ecommerce platform.

This synchronization ensures that your ecommerce platform and Productioon Hub & OMS have consistent product information, including customization options and pre-designed templates.

Common Implementation Approaches

The Customizer offers flexibility in how it can be integrated into your ecommerce store. Here are some common approaches:

  1. Product Detail Page Integration:

    • Add a "Customize" button to your product detail page.
    • When clicked, it opens the Customizer iframe for that specific product.
    • This allows customers to customize the product before adding it to their cart.
    • Example of a customize button: 
      <button onclick="openCustomizer()">Customize</button>

  2. Full Product Detail Page Replacement:

    • Replace the entire product detail page with the Customizer iframe.
    • This approach is useful for products that always require customization.

  3. Collection/Category Page Integration:

    • Replace certain collections or categories with the Customizer's product selection interface.
    • This allows customers to browse and customize products directly from the collection/category page.

Advanced Features

  1. Product Selection within Editor: The Customizer can be configured to allow product selection within the editor itself. This is useful when you want customers to choose from a range of customizable products without leaving the Customizer interface.

  2. Pre-configured Templates/Designs: It's possible to offer pre-configured templates or designs as separate products in your ecommerce store. This feature allows you to:

    • Create product variants that represent different design templates.
    • Allow customers to start with a pre-designed template and then further customize it.
    • Offer "quick start" options for customers who want a guided customization experience.

Platform-Specific Integrations

For detailed integration guides, please refer to the following platform-specific documentation: