Are you a Shopify developer, designer or agency? It pays to be a Fluorescent partner. Apply today.

Dynamic Sources and Metafields

The Dynamic sources feature automatically displays the correct content or settings for pages that use the same template. Dynamic sources are great for accordions and size guides on product pages, and many other sections.

Dynamic sources uses Metafields, another powerful feature, which lets you add custom content to specific pages or products in your Shopify admin.

This feature is available for settings or fields that have a dynamic source button:

Insert dynamic source button

Dynamic sources for accordions

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

Insert dynamic source button
Insert 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

To create metafields for your products:

  1. In the Accordion block settings, click the Dynamic source button next to the Headings or Text fields.

    Insert dynamic source button
    Insert dynamic source button
  2. Click the + Add metafield button.

    Add metafield button
    Add metafield button

    This opens your Shopify admin settings.

  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 type: text
    Metafield type: text
  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

To add content to product metafields:

  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 Accordion 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 Accordion settings in the Products template.

Steps

In your theme editor (Customize):

  1. Go to the Accordion 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
    List of dynamic sources
  4. You can now view or preview your different products to see the Dynamic source automatically appear in the Accordion 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

To create a metafield for your products:

  1. In your Stock Level Indicator block settings, click the Dynamic source button next to the Inventory base quantity field.

    Insert dynamic source button
    Insert dynamic source button
  2. Click the + Add metafield button to open the Shopify admin settings.

    Add metafield button
    Add metafield 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
  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.

    Metafields section in the product editor
    Metafields section in the product editor
  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

To add your metafield as a dynamic source to the inventory fields:

  1. In your theme editor (Customize), return to the Stock Level Indicator block 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

Add dynamic sources that link to different pages so that the correct popup content automatically appears on different product pages that share the same template.

Below you'll find instructions on how to create metafields and insert dynamic sources to Information popups.

Before adding dynamic sources, make sure you create pages for the information popup content.

1. Create metafields for your products

Shopify's Metafields lets you add additional fields to your products within the Shopify admin. For example, you can add metafields to all products to reference the page with the correct information popup content.

Steps

To add metafields to your products that reference specific pages:

  1. In the Information popup settings, click the Dynamic source button next to the Information popup content option.

    Alternatively, go to Settings > Metafields and skip to step 3.

    Insert dynamic source button
    Insert dynamic source button
  2. Click the + Add metafield button.

    Add metafield button
    Add metafield button

    This opens your Shopify admin settings.

  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: "Size guide".

    Metafield definition name
    Metafield definition name
  6. Click the + Select content type button and select Reference. Then make sure the Page option is selected.

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

2. Add pages to product metafields

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

Product inventory in Shopify admin
Product inventory in Shopify admin

Steps

To add pages to product metafields:

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

    Product page in Shopify admin
    Product page in Shopify admin
  2. Scroll down to the Metafields section 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 steps 1 - 3 to add the different content to the metafields for your different products.

  4. Click Save.

3. Add metafields as dynamic sources

Now that the Metafields of your products refer to specific pages for you popup content, go to the theme editor to insert a Dynamic source to the Information popup content option in the Products template.

Steps

In your theme editor (Customize):

  1. Go to the Information popup block settings.

  2. Click the Dynamic source button next to the Information popup content field.

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

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

  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.