Installation Process

Merchants will find spiff in the Shopify app store .

Install the app.

The merchant must have an active Shopify Store in order to install Spiff. If you install Spiff whilst logged into your store, the install will begin automatically. If the merchant is not logged in, they will be prompted by Shopify to either log in or sign up to create a store

Next, you are presented with the standard pre-install page from Shopify which makes you aware that you are about to install spiff. It also notifies you of personal details and store access that required.

Having successfully installed, you will be automatically directed to the Spiff Hub to create your first product.

This is pretty easy, we’ll merge the old account with the new one once you install the plugin and re-integrate the products. I’ll send a quote; it shouldn’t take long.

I believe we are just waiting on the Out Of Scope – New Necks (INV-0747) from Feburary to be settled, and then we can move on this right away.

Creating your Customize Button (Shopify)

• 1. Install the plugin (if you haven’t already)
• 2. Via Sales Channels>Online Store> Customize (On the live theme)
• 3. Via the top drop-down, navigate to Products>Default Product
• 4. Use the dropdown again, navigate to Products>  this time use “Create Template”, call it something like “spiff-custom” or something along those lines to keep things clean.
• 5. Base the template on Default Product.
• 6. Once editing the new template, in the left sidebar, click “add section” and go “Apps”. Add the “Spiff Customize Button”.
• 7. Once you are qualified by a SpiffCommerce team member, you’ll have full access to your Spiff Hub. In a new tab, within the Spiff Hub, navigate through Stores>(Shopify Store Name) and copy the application key from the “Application Keys” section. DO NOT SHARE THIS KEY.
• 8.Go back to your button configuration in your Shopify theme, and paste this key in + save.
• 9.Save the template and go back to Products in Shopify.

Integrating Products (Shopify)

• 1. For each product that will be customized, copy the ID from the URL from each of the products in your Shopify. “products/12345678910” for example.
• 2. Save these ID’s (without “products/” to a note for easy copy/pasting
• 3. Now navigate to your Spiff Hub again, and go through Commerce>Products.
• 4. Create your first “Spiff Product”, Name it, and save. Now, after the automatic refresh, navigate down to Integrations. Create a new Shopify integration and paste in the ID for this specific product.
• 5. The product is now linked!, do this for each product you’ll build an experience for. Now that this is linked, you can start creating workflows and designs. In the top section of you product, “Workflows” you can attach the default workflow to test it out.

Render the Personalize Now Button

In the 2 examples above you can see that the spiff button can either augment or replace the add-to-cart button.

the way that spiff opens in your site is customisable but would require a developer with shopify liquid templates experience to interact with our api

It renders on the product page and is customisable via the install snippet that is inserted into your store.

Customizable Attributtes of the Personalize Now Button (Edited in your Liquid Templates)

• Position
• Button Color
• Button Text
• Choose to appear with or instead of the Add to Cart button.

In your liquid templates, find the line that creates the product form, which will potentially look like this:

{% form 'product' ... %}

Below that line, add this:

{% render 'spiff-button-standard', product_handle: product.handle %}

If you wish to customise the look of the button, you can supply arguments for text and colour.

{% render 'spiff-button-standard', product_handle: product.handle, label_text: 'Customise me!', label_colour: '#000000', background_colour: '#FFFFFF' %}

Once you have installed the snippet, created a workflow and linked a 3D model, your product should display in the live store.