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

Difficulty level: intermediate

Coding required: some

Need help? Contact support

This step requires that you have Shopify Online Store 2.0 theme or that you have upgraded your product template to Shopify Online Store 2.0

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

  2. Add the section to your theme code

  3. 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:

    Customizing product page with Shopify online store 2.0
    F4 section installed on product page

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

    Customizing product page with Shopify online store 2.0
    I.e. You want the content of "Product Details", the content of "Description", and the content "Features & Care" to be specific to each product

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

    Customizing product page with Shopify online store 2.0
    I.e. You want the title "Product Details", the title "Description", and the title "Features & Care" to be customizable and the same on all products.
  4. 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

    Customizing all products vs product specific

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

    Here is how it works:

    Customizing all products vs product specific

    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

  5. 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.

  6. 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

    Dynamic data insert button
    Use the dynamic source button

    There can be multiple dynamic sources to assign the section

    Dynamic data insert button

    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

    Assigning a dynamic data source
    Select the dynamic source from the metafields defined in previous steps

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

    Assigning a dynamic data source
    If you see the 'Edit metafield' in the selection box, the know the metafield is assigned correctly to the dynamic data source

    Shopify Documentation on Dyanmic Data Sources:

  7. 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

    Ensure you edit the correct product
    Ensure that the correct product is selected when previewing sections that have metafields as the data source.

Issues viewing your product-specific section?

Theme Enhance sections are designed so that if the content of the section is not present via an assigned field that the section will not show. If an unmerchandised product is selected here, the section will not show. This is by design and intentional.

If you are working on a preview theme and you are having issues viewing your page, please see: How Shopify page templates work

If you need assistance configuring metafields or product specific sections on your theme please contact:

Subscribe to our newsletter

All things Shopify merchandising, design, photography, art direction & more

We care about the protection of your data. Read our Privacy Policy.