Spectrum Integration
  • Introduction
  • Ecommerce
    • Front End Integration
    • Load Design
    • Add to Cart
    • Save Design
    • Generate Cart Item
    • Pricing & Availability
    • Order Acknowledgement
    • Shipment Notification
    • Update Order Status
    • Order Search
    • Integration Driver
    • Production Related File Delivery
    • Spectrum + Shopify Integration
      • Overall Flow
      • Product Set Up: "Add-ons"
      • Line Item Properties
      • Shopify Cart
      • Order Processing
  • API
    • Environments
    • Image QueryString API
      • Image Transforms
      • Image Filters
      • Image Encoding
    • Rendering
    • WebToPrint (W2P)
    • Assets
    • Rate Limiting
  • Marketing
    • Share
  • General
    • Glossary
Powered by GitBook
On this page

Was this helpful?

  1. Ecommerce
  2. Spectrum + Shopify Integration

Shopify Cart

PreviousLine Item PropertiesNextOrder Processing

Last updated 3 months ago

Was this helpful?

It’s important to know a bit about how Spectrum stores information related to customization. We store all the interactions with a product in an object that we call the Recipe. Each customized product has a unique identifier (8 digit alpha-numeric) that is used throughout the customization process starting with add to cart. With a single recipe ID, we can do the following:

  1. Create a customized image or video at any angle.

  2. Get product detailed information

  3. Align choices with product add-ons (see above)

  4. Create production ready files for manufacturing or embellishment.

Spectrum used a standard add to cart method that is documented here:

Many clients want to show the customized image in the cart and to do that, the unique recipe ID must be stored along with the product. Spectrum recommends storing the Recipe ID in a line Item “_recipeID” property. This way, the unique identifier is available for use in the cart and all the way through the order process. Later on, we’ll show how Spectrum can automatically fulfill orders based on the line item property.

Once the property is set, a simple liquid code update can be made in the cart to show the customized image.

{% for item in cart.items %}
  <div class="cart-item">
    
    {%- assign recipeId = item.properties[‘_recipeID'] -%}
    
    {% if recipeId %} 
      // assign custom image
      <img src="{{ custom_image | escape }}" alt="Custom Image" class="cart-image" />
    {% else %}
      <img src="{{ item.product.featured_image | img_url: 'medium' }}" alt="{{ item.product.title }}" class="cart-image" />
    {% endif %}

Note: Spectrum has an assortment of Shopify liquid code that can be used across implementations.

https://docs.spectrumcustomizer.com/integration/ecommerce/add-to-cart