Introducing Stiletto - the essential Shopify theme to fuel your ecommerce growth. Learn more.

Dynamic Sources and Metafields

Metafields and Dynamic sources are Shopify features that allow you to store and display unique content for products, collections, blogs, and pages.

These features are perfect for displaying specific product information — such as size guides or part numbers — for different products that use the same template.

NOTE

Metafields are extra data fields in your Shopify admin that can store additional information and content for products, collections, blogs, and pages.

Dynamic sources are what connect metafields to templates and sections. When added to the theme editor, they automatically display metafield content for specific products and pages that use the same template.

In this article, we cover how to use metafields and dynamic sources for Collapsible rows, Information popups (size guides), Stock level indicators, and Featured products. For a full overview, see Shopify's metafields guide.

Dynamic sources for collapsible rows

Below you'll find instructions on how to create metafields and insert dynamic sources for Collapsible rows, but these instructions apply to any field in the theme editor that has a dynamic source button.

1. Create metafield for your products

Shopify's Metafields lets you add additional fields to your products within the Shopify admin. For example, you can add a field for "Materials" if you want to add different materials information for different products in your Shopify admin.

Steps

In your theme editor (Customize):

  1. Click on a Collapsible row block to open the settings.

  2. Click the Connect dynamic source button next to the Headings or Text fields. Then click (+) Create Metafield.

    Insert dynamic source button
    Insert dynamic source button

    Alternatively, go to Settings > Metafields in your Shopify admin.

  3. Click the Products tab.

    Products metafields tab in Shopify admin
    Products metafields tab in Shopify admin
  4. Click the Add definition button in the top-right.

  5. Add a Name to the metafield that describes what it will be used for. For example: "Shipping", "Materials", "Details".

    Metafield definition name
    Metafield definition name
  6. Click the + Select content type button and select Text. Then choose Single line text or Multi-line-text.

    Menu list of content types for the metafield
    Menu list of content types for the metafield
    Metafield text type
    Metafield text type
  7. Click Save.

2. Add content to product metafields

Once you've created Metafields for your products in the Shopify admin, you can now add content to those fields by going to your product inventory in the Shopify admin.

Steps

In the Shopify admin:

  1. Go to your Product inventory in your Shopify admin and open one of your Products.

    Product inventory in Shopify admin
    Product inventory in Shopify admin
  2. Scroll down to the Metafields section and enter the text for your Collapsible row heading or text in the metafields that you created.

    Metafields section in the product editor
    Metafields section in the product editor
  3. Repeat steps 1 - 3 to add the different content to the metafields for your different products.

  4. Click Save.

3. Insert metafields as dynamic sources

Now that the Metafields of your products have content, you can go to the theme editor to insert a Dynamic source to the Collapsible rows settings in the Products template.

Steps

In your theme editor (Customize):

  1. Go to the Row block settings.

  2. Click the Dynamic source button next to Heading or Text field.

    Insert dynamic source button
    Insert dynamic source button
  3. Select the Metafield that you created and added content to.

    List of dynamic sources
  4. You can now view or preview your different products to see the Dynamic source automatically appear in the Row with the correct Metafield content.

  5. Click Save.

Dynamic sources for stock level indicator

If you need to set a different Inventory base quantity and Low inventory threshold for multiple products, you can use Shopify's Dynamic source feature.

Follow the instructions below to (1) create a metafield for your products, (2) add content to product metafields, and (3) insert the metafields in your theme editor as a dynamic source.

1. Create metafield for your products

Shopify's Metafields lets you add additional fields to your products within the Shopify admin. Use metafields to add inventory quantities to specific products.

Steps

In your theme editor (Customize):

  1. Click on the Stock Level Indicator block to open the settings.

  2. Click the Connect dynamic source button next to the Inventory base quantity field. Then click (+) Create Metafield.

    Insert dynamic source button
    Insert dynamic source button
  3. Click the Products tab.

    Products metafields tab in Shopify admin
    Products metafields tab in Shopify admin
  4. Click the Add definition button in the top-right.

  5. Add a Name to the metafield that describes what it will be used for.

    We recommend naming the metafield the same as the setting name: "Inventory base quantity" or "Low stock threshold".

    Metafield definition name
    Metafield definition name
  6. Click the + Select content type button and select Number.

    Menu list of content types for the metafield
    Menu list of content types for the metafield
  7. (Optional.) Repeat steps 4 - 5 to add another metafield for Low stock threshold.

  8. Click Save.

2. Add content to product metafields

Once you've created Metafields for your products in the Shopify admin, you can now add content to those fields by going to your product inventory in the Shopify admin.

Steps

To edit the metafield for a product:

  1. Go to your Product in your Shopify admin.

  2. Scroll down to the Metafields section.

  3. Enter the Inventory base quantity or Low quantity threshold that you want for the product.

    A metafield for an inventory base quantity
    A metafield for an inventory base quantity
  4. Repeat steps 1 - 3 to add the different quantities to the metafields of the products you wish to display a Stock level indicator for.

  5. Click Save.

3. Insert metafields as dynamic sources

Now that the Metafields of your products have content, you can go to the theme editor to insert a Dynamic source to the Stock level indicator settings in the Products template.

Steps

In your theme editor (Customize)

  1. Click on the Stock Level Indicator block to open the settings.

  2. Delete the current quantity in the Inventory base quantity so the field is left blank.

  3. Click the Dynamic source button next to the Inventory base quantity field.

  4. Select the "Inventory base quantity" metafield.

    The metafield will now be added as a dynamic source.

  5. (Optional.) Click the Dynamic source button next to the Low stock threshold to add a "Low stock threshold" metafield.

  6. Click Save.

Dynamic sources for information popup

You can display unique info popups for different products by using metafields. Once you create page content for multiple info popups (e.g. different size charts), you can link those pages to specific products by adding metafields in your Shopify admin.

Then, in the theme editor, insert that metafield as a dynamic source, and the correct page will be used for the info popup when viewing different products on your online store.

NOTE

Make sure you've created pages with your info popup content before following these steps.

1. Add a 'Page reference' metafield

First, you need to add a Page reference metafield to your product pages. This field will store the specific page you want to link to each product in your Shopify admin.

Steps

In your theme editor (Customize):

  1. Click the Variant selector or Information popup block to open the settings.

  2. Click the Connect dynamic source button next to the Content option in the Information popup settings. Then click + Create Metafield.

    Insert dynamic source button
    Insert dynamic source button

    Alternatively, go to Settings > Metafields in your Shopify admin.

  3. Click the Products tab.

    Products metafields tab in Shopify admin
    Products metafields tab in Shopify admin
  4. Click the Add definition button in the top-right.

  5. Add a Name to the metafield that describes what it will be used for so you can remember and find it easily. For example: "Size guide".

    Metafield definition name
    Metafield definition name
  6. Click the (+) Select content type button and select Page under Reference.

    Menu list of content types for the metafield
    Menu list of content types for the metafield
  7. Click Save.

Once you've added the Page reference metafield to your products in the Shopify admin, you can now enter the specific pages you want for the info popup by going to your product inventory in the Shopify admin.

Steps

In your Shopify admin:

  1. Click on Inventory under Products in the admin sidebar. Open the product(s) you want to add the info popup page.

    Product inventory in Shopify admin
    Product inventory in Shopify admin
  2. Scroll down to the Metafields section on the product page and click on the metafield you created and click Select page.

    Select page button in metafields section
    Select page button in metafields section
  3. Repeat these steps to update the Page reference metafield for each product.

  4. Click Save.

3. Insert page metafields into the theme editor

Now that the product Metafields you created link to the correct pages for your popup content, you can insert that metafield into the theme editor as a Dynamic source.

Steps

In your theme editor (Customize):

  1. Click the Variant selector or Information popup block to open the settings.

  2. Click the Connect dynamic source button next to the Content option.

    Insert dynamic source button
    Insert dynamic source button
  3. Select the Metafield that you created (e.g. "size guide").

    List of dynamic sources
    List of dynamic sources
  4. You can now view or preview your different products to ensure that the correct Information popup content appears on each product page.

  5. Click Save.

Follow the instruction below to display selected products in the Featured products block on different product pages .

1. Create product list metafield

Create a Product metafield to add multiple featured products to each product page in your Shopify Admin.

Steps

In the theme editor (Customize):

  1. Click the Featured products section to open the settings.

  2. Click the Dynamic source button next to Products. Then click (+) Create Metafield.

    Insert dynamic source button
    Insert dynamic source button
  3. Click the Products tab.

    Products metafields tab in Shopify admin
    Products metafields tab in Shopify admin
  4. Click the Add definition button in the top-right.

  5. Add a Name to the metafield that describes what it will be used for. For example: "Related products".

    New metrafield form
    New metrafield form
  6. Click the (+) Select content type button and select Product. Then select List of Products.

    Menu list of content types for the metafield
    Menu list of content types for the metafield
  7. Click Save.

2. Add products to metafields

Once you've created your product Metafield, you can now add multiple products to those fields by going to your product inventory in the Shopify admin.

Steps

In the Shopify admin:

  1. Go to your Product inventory in your Shopify admin and open one of your Products.

    Product inventory in Shopify admin
    Product inventory in Shopify admin
  2. Scroll down to the Metafields section and find your "Related Products" metafield, then click on the field to Select products.

    Metafields section in the product editor
    Metafields section in the product editor
  3. Repeat steps 1 - 3 to add the different product lists to each of your different products.

  4. Click Save.

3. Insert metafields as dynamic sources

Now you can go to the theme editor to insert a Dynamic source to the Relate product settings in your Products template.

Steps

In your theme editor (Customize):

  1. Go to the Featured products section settings.

  2. Click the Dynamic source button next to Products

    Insert dynamic source button
    Insert dynamic source button
  3. Select the "Featured Products" Metafield that you created.

  4. You can now view or preview your different products to see the Dynamic source automatically appear in the Featured products block with the correct featured products.

  5. Click Save.

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.