Leverage your customization by using dynamic sources and metafields

On some occasions, you may want to display products with specified information on a case-by-case basis. Be Yours theme allows you to connect dynamic sources, so you can create different information for each product through metafields.

This article will show you how to connect the dynamic sources with metafields and leverage your customization.

On this page

Adding a new metafield definition

You need to do this first step to apply a standard or custom metafield. Read more about Shopify's instructions on how to add metafield definitions here:

Here, we take an example of creating a new metafield “Product characteristics” to show the tailored brief of product features. Here are steps to add the metafield “Product characteristics”:

  1. On your Shopify Admin dashboard, click Settings > Metafields.
  2. Choose the part of the store you want to add a new field to. For example, we add the new field to Products.
  3. After choosing the Products, you click the button Add definition on the top right corner.
  4. In the Add product metafield definition box, set up the details of the new metafield "Product characteristics" including:
    • Name: Product characteristics
    • Namespace and key: custom.product_characteristics (you can keep the default namespace and key based on the name inserted or change it)
    • Description (optional): we add the description line 'Add key information to describe the product.'
    • Expose this metafield to Storefront API requests (optional)
    • Select content type: there are different content types such as line text, integer, date and time, file, etc. In our example, we select the multi-line text.
    • Choose whether One value or List of values to allow this metafield to store only one value or multiple values.
    • Add Validation rules if they are applicable. Then, click Save.

Assigning metafield values for the product by connecting dynamic source

After adding the new metafield definition, the next step is assigning the specified value in this metafield for different products. For example, we would like to display the key characteristics of the product “Calathea Stromanthe Triostar”, here are steps how we do it:

  1. On your Shopify Admin dashboard, click Products > choose the product which will contain the specified information. We can search the product more quickly in the list by pasting its name in the Filter products bar.
  2. Click on the product to open the edit window. From here, scroll down to the bottom and click on the button Show All in the Metafield bar.
  3. Next, all existing metafields are available to insert the values. According to the example request, we add some key information in the field “Product characteristics”, for example, we will insert text “Prayer plants family. Grows best in warm, humid conditions and well-drained, fertile soil”. Then, click Save.
  4. You go to Online Store > Themes > choose Be Yours theme and click on the theme's button Customize.
  5. On the top navigation bar, you select the template Products > Default product. In the Product information section, you click Add block to add a Collapsible tab block. You can drag it to the expected position.
  6. In the collapsible tab configuration, you can set icon and heading.
  7. To show the key information added in step 3 for this block, you can delete the default text in the field Tab content and click on Insert dynamic source icon. Next, choose the Product characteristics in the dynamic source list and finally, click Insert.
  8. As the result, the specified product characteristics information for the product “Calathea Stromanthe Triostar” is displayed.

Notes:

    • You need to repeat step 3 for different products which you want to show information assigned for the newly created metafield.
    • To know if a section or block can support metafields, you check if it has insert dynamic source icon or not. The dynamic source is usually available for the block types such as text and collapsible tab.
      • If the below insert dynamic source icon displays, you can connect only one metafield.
      • If the insert dynamic source icon with a plus displays, you can connect up to 20 metafields.

We hope that you find this article helpful! If you have any concerns about this feature, do not hesitate to contact our team for further support.