How To: Setup & Merchandise product-specific content on product pages using Shopfiy Product metafields

Determine what section you would like to add to a specific product using the Theme Enhance section library

Add the section to your theme code

Determine what parts of the section you want to be product specific

In the image below, each blue box can be product-specific or the same for all products:

F4 section installed on product page

In this example, it makes the most sense to customize the boxes highlighted below to be product-specific:

The highlighted fields below make sense to be the same for all products that get this section

Add the metafield configurations to the store using the built-in Shopify metafields editor

This chart illustrates how merchandising works in Shopify for product-specific (per-product) customizations

Wait, my products don't have any fields to merchandise my products

Here is how it works:

Each section that will be displayed with product-specific content will need to have a metafield definition created in the Shopify metafields configuration.

This metafield definition allows you to add content to the traditional product page of the Shopify admin - no new editors to learn

Lightly Theme Enhance sections have metafield definitions ready for you to copy and paste into the Shopify metafields editor.

Instructions to define metafields for each Theme Enhance section are located on the section page, for this demo section see here: F4 section

If you need assistance configuring metafields please contact us at support@lightly.digital

Add product-specific content to each product in the Shopify product editor

After the metafields have been defined, product-specific content is entered in the conventional Shopify admin for the product. Please see Shopify's Adding Values to Metafields for the specifics of doing this.

Merchandise section to use Shopify product metafield content

In Shopify we create a relationship between the Shopify product metafield content and the location that it is displayed on your online storefront.

This relationship is defined using Dynamic data sources in the Shopify theme editor

Locate the field you wish to assign to the metafield data (i.e. care icon image title, care icon image) and click on the Dynamic source button

There can be multiple dynamic sources to assign the section

Dynamic data source options:

1. Current Block - Product: This current block can have a product assigned to it, so the option is to pull data from this product. This is the LESSER used option.

2. Current Page - Product: This current product that a user is visiting. This is the MOST used and suggested option.

3. Branding: This section is used for things that are common across all merchandising points. Think taglines (All our bags come with a 100% no questions asked lifetime guarantee) that you wouldn't want inconsistent or if they had to change you could do them in one fell swoop (Free shipping on all items vs Free shipping on all orders over $100)

How to assign a dynamic data source to a section field:

The metafield definitions created should be visible in the select field shown below

How to verify a dynamic data source is assigned to a section field:

Shopify Documentation on Dyanmic Data Sources:

• Shopify's Connecting metafields to your theme by using the theme editor
• Shopify Dev - Dynamic Sources

Preview the section to using metafields data

In order for you to see the section you MUST select the correct product that you would like to merchandise / preview in the Shopify Theme editor. This can be slightly confusing and is a slight limitation of the Shopify Theme Editor