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

This feature uses Shopify Metaobject functionality, so the first thing we’ll do is create a metaobject. Head on to “Settings->Metafields and Metaobjects->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” 

You must use “title” and “image” as names.

Now that you’ve created a “Metaobject”, the next step is to set up a “metafield” that references it.

1. In “Settings → Metafields and Metaobjects”, select “Products”, then click “Add definition”.
2. Give your metafield a name of your choice. Make sure that “Namespace and key” field uses this format: custom.metafield_key (You’ll need this metafield key later.)
3. Under “Select type”, scroll down to “Reference” and choose “Metaobject”.
4. From the “Reference” dropdown that appears, select the “Card Icons” metaobject you created earlier.
5. Set the reference type to “List of entries”.
6. Click “Save” to finish.

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

When you add 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 add the metafield key the metaobject entry will display for every product that has 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.