Skip to main content

Installation

A step-by-step guide to installing the Spiff Commerce Shopify app from a development perspective.

Prerequisites​

Before adding the button to your store you will need, from the Spiff Commerce Hub:

  • An application key, from the Shopify integration for your store.
  • The activation you want to launch. An activation links a theme to the product collections your customers can choose from. You will need its ID.

Personalization Button​

Install the Spiff Commerce Shopify app and add the Personalize Button block to your theme using the theme editor. This is the recommended way to launch Spiff Commerce experiences from a Shopify store, and it works with Online Store 2.0 themes.

  1. Open the theme editor and switch to the page you want the button on, for example a product page.
  2. Press Add block and select the Personalize Button app block.
  3. Select the block and, in the right-hand panel, paste your Application Key and Activation ID.
  4. Adjust the button text, styling and cart behaviour as needed. See Theme App Extension for every setting.

Add Block Button

When a customer presses the button, the activation is launched in a modal (or fullscreen on mobile). When they finish, the designs in their bundle are added to the Shopify cart for you.

note

The Product setting on the block is optional. Leave it blank to launch the activation as configured, where customers choose their products from the activation's collections. Set it to restrict the button to a product that is enabled in Spiff Commerce.

Render Preview Image​

Designs added to the cart carry a preview image in the _previewImage line item property. Properties that begin with an underscore are hidden from customers at checkout, but you can read them in your theme's Liquid. Insert the code below where your cart template renders the item image to show the customer's design.

{% assign spiff_preview = item.properties._previewImage %}
{% if spiff_preview != blank %}
  <img class="cart__image" src="{{ spiff_preview }}" alt="Your design" />
{% else %}
  <img class="cart__image{% if item.image == null %} hide{% endif %}" src="{{ item | img_url: 'x190' }}" alt="{{ item.image.alt | escape }}" data-cart-item-image>
{% endif %}

See Additional Use Cases for more ways to customize your cart.

Last updated on