Shopify Cart

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: https://docs.spectrumcustomizer.com/integration/ecommerce/add-to-cart

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.