This neat little feature can be used in various ways to display icons and text dynamically on a product page and on the product card. In the demo we used it for product icons ( organic, vegan, natural, etc. ) and the skin type. You can use it to add various product properties that vary between products.

This feature uses Metaobject to achieve this and so the first thing we’ll do is create a metaobject. Head on to “Settings->Custom data->Metaobjects” and click “Add definition”. 

Name your Metaobject and then add these two fields: 

• “Single line text”, name it “title” and select “One value”
• “File” name it “image” and select “One file” 

It is important that you use “title” and “image” as names.

Now you have a Metaobject and we need a metafield to be able to reference that metaobject. In “Settings->Custom data” select “Products” and then “Add definition”. You can name the metafield how you want but make sure that the “Namespace and key” field looks like this: “custom.metafield_key”. You’ll need that metafield key a bit later.

Now that you created a Metaobject and a Metafield go to “Content->Metaobjects” and start adding entries to it. Each entry consist of a title and image. Depending on what you want to display you can add both or just one of these.

When you added the values go to your Products and in the product metafield section you’ll find the metafield you created. For each product you can now add entries that fit the product.

The content of your metaobject can be displayed in two ways:

Product page:

• On a product page there is a “Dynamic Icons with text” block. In that block you need to add the “Metafield Key”. You can also add the text that will appear before or above the metafield content depending on the layout setting. 

• Once you added the metafield key the metaobject entry will display for every product that have them assigned.

• This block can be used more than once to display various data related to your products

Product Card ( Collections ):

• In Theme Settings go to “Product Card” and add the metafield key.