Setting Product Configurators with Shopify

by Scott Austin

Our Product Configurators work with most eCommerce solutions.  More specifically, it works with any platform with a robust API.  Shopify is the most common eCommerce solution used by our customers.  This blog post will show you how to map one of our Product Configurators to a product in your Shopify store.

Prerequisite - ShopifyFD

The way to map a Product Configurator to a Shopify product is through the product metafields.  The Shopify admin does not provide access to metafields though.  There's a handy and free tool that you can add that does though.  Its and Chrome extension and can be added here

Note that this is a free extension created by FreakDesign in Australia.  You can tip them for providing this extension (I have because their extension is well done) at their website.

Once you've installed the extension, you should see the ShopifyFD icon in Chrome as shown below.

This new button only works when you are logged into the Shopify admin.  If you go to a product in your admin and click on the ShopifyFD button to activate it, ShopifyFD will add a Metafields section to the page.  It looks like this:

As you explore metafields extension, you may find that your products already have metafields assigned.  If some metafields do already exist, they were probably added by one of the apps in your site.

Quick Metafields Overview

In Shopify, many of the objects have metafields.  For the Product Configurator, we use product metafields.  

Metafields have three components, Namespace, Key and Value.  The namespace is used to create categories to make it easy to group related metafields.

Product Configurators and Metafields

For the Product Configurator, each product can be assigned one Product Configurator. The Product Configurator uses the following metafields:

  Namespace Key
product_meta configuration_id
product_meta configuration_options

The configuration_id defines which Configurator to use.  And the configuration_options determine how that Configurator will be used.

The configuration_id is a 30 character value.  Here's what it looks like when creating a new metafield for the Product Configurator:

To find the Configuration ID to put in the value box, use the list that ProductGraph has provided you that has all of your Configurators listed with their IDs.

The configuration_options metafield is a little more complex.  Here's an example of data that's put there.  This is the most common settings used.

{ "alwaysOn": true,
"uniqueItemsMode": true,
"visualizerDocked": true,
"inputLocationStyle": "dock-right",
"destinationPage":"/collections/add-a-gift-box" }

Here's what the settings control:

  • Always On.  This determines if the Configurator is always on or if it is toggled by the variants settings set in ProductGraph section of the theme settings.
  • Unique Items Mode.  This determines how the Configurator responds to the product quantity being greater than one.  True has the configurator create a unique configuration for each quantity.  False has the same configuration for all of the quantity.
  • Visualizer Docked.  This turns on the 'dock' visualizer.
  • Input Location Style.  This determines which side of the screen the dock comes out from.
  • Destination Page. The page the customer will go to once they click the Add to Cart button.  The default if this field is not used is to take the user to the cart.  Most stores use this feature to upsell the customer with gift boxes, gift wrapping, etc.

Bulk Editing Metafields

Shopify's bulk editor for products can be used to view and edit metafields.  But the field selection interface doesn't show metafields.  So you'll need to specify them in the URL string.  Here's an example of a URL.  You'll need to insert your store's name in place of my-shopify-store.

Here's a view of the bulk editor with the Product Configurator metafields:

Scott Austin
Scott Austin

ProductGraph makes some of the best software available to for product customization in your online store. If you are selling personalized products, we can help.