Product setup with workflow

Setting up your first product from start to finish


  • You have already installed the spiff plugin on your Shopify store through the Shopify app store.
  • You have your 3D models already setup to spiff 3D model Specifications
  • You have any design assets ready for upload. E.g fonts, illustrations (SVG's) and images (PNG's and JPG's)
  • You have products already installed on your Shopify site.

*** Note: If your store is live and you want to test without affecting live products set up a test theme by duplicating your live theme. Then re-name the copy of your live theme to spiff_yourstorename and install the snippet explained below on this theme and not on your live site.

Key Concepts

Spiff Architecture - It doesnt matter in which order you start, but in order to get your first product up and running you need to do three things:

  • Create a product
  • Create a worklfow - This includes uploading assets and setting up option lists
  • Link a 3D model

Create your product

  • Click on the create products button either on the home page in the spiff hub accessable through the app button in your shopify store.
  • Your products will begin to load from your shopify store. Depending on how many products you have in your store, this could take up to 1 minute.
  • Search for your product in the search bar at the top of the page.
  • Click the select product button in the top right corner of the page

Your product is now available for you to customise on spiff and should now appear in the products list page.

Create a workflow

Whilst you can create a workflow without options and assets to begin with it is advisable to have them ready and uploaded to be used in the relevant steps.

Uploading assets

  • Click on the Assets Tab in spiff
  • Click on the relevant asset type you wish to upload. click on the little blue question marks for explanations of what each asset type represents
  • Click on the Create Product
  • Find your asset on your desktop and click open (make sure you name your assets properly so that you can search for them easily later e.g. alien_face.svg will be searchable by alien and face)
  • Your asset should now apppear with an image in the assets folder

Create an option list

This is only required where you want to display a list of options for your consumers to choose from. Eg. Choose from these Fonts, Colours or Illustrations

  • Click on the options tab in spiff
  • Click on create option in the top right corner of that page
  • Name your Option (Eg. T-shirt Illustrations)
  • Select your option type. (for the example above you would select illustrations)
  • Start adding your variants/assets. When you click on the upload asset button it will refer to the assets you uploaded (and the public assets we give you by default)
  • Select your asset and name it accordingly. This is the name that will appear in the consumers order summary so it needs to be user friendly.
  • Select a default asset if you would like one of the variants to automatically appear on the model when the conusmer reaches that step. If you dont select a default asset the user will need to make a selection before any asset appears on the model.
  • Save Option

Create a workflow (Bring it all together)

Workflows are the steps you take your consumers through in their customisation journey and is the glue that brings the experience together.

  • Click on the workflows tab in spiff
  • Click create new workflow
  • Name your workflow
  • Add your first step (See little blue question marks next to each step type for help on each step capabilities)
  • All steps require you to add a Step Title and Step Help Text
  • Complete configuration of attributes for the step
  • Add an option by searching for it in the options search bar. Note: Only options relevant to that step type will display
  • Add a condition if required
  • Click create step
  • Add further steps as required
  • Sav the workflow in the top hand corner when you have completed the workflow

Creating Step Groups Step groups are the ability to display more than one step on the same page for the consumer experience

  • In the workflow details section of a workflow
  • Click create Step Group
  • Name the Step Group
  • Once complete go to the relevant steps and you will see a new drop down box that will allow you to link a step to the step group
  • You will see a chip appear in the step group with the name of the step you added.
  • Steps will play in order that they appear and can be moved around by selecting the step and moving it to your preferred position in the workflow.
  • Click Save Workflow

Complete Product Setup

  • Click on the relevant product in the products tab in the spiff toolbar
  • Open the product
  • Click edit
  • Click exisiting next to the 3D model upload
  • Link the relevant uploaded 3D model
  • Below the save button click on workflows
  • Type in the name of the workflow you created and select it
  • Save product

At this stage you have completed the set up of your product. If you have already setup your snippet to render the spiff customise now button you are ready to test your model. Go to your store and test. If you have any problems please click the book a meeting on the top of the page or try us on live chat.

Installing the snippet