Stay up to date with the ProductGraph Blog

Setting Product Configurators with Shopify

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.

ShopifyFD-Icon.jpgThis 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:

Metafields-Section.jpg

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:

New-Metafield.jpgTo 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" }

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.

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. 

https://my-shopify-store.myshopify.com/admin/bulk?edit=metafields.product_meta.configuration_id%2Cmetafields.product_meta.configuration_options&resource_name=Product

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

Shopify-Bulk-Edit-Metafields.jpg


At ProductGraph, we provide full service consulting to eCommerce stores.  We specialize in Shopify and take a data-centric approach to your product catalog.

Learn more

Topics: Shopify