How to set up an Icons with text block with metafields

The Icons with text block can be added to most of our sections that include product cards, such as cross sells and many more. By using metafields you can add dynamic information that is relevant to each of your products. You can follow our handy guide to set up this block below.

Step 1: Define an Icons with text metafield

You can create a dynamic Icons with text block by adding metafields to your products.

1. Within your Shopify admin, go to Settings.
2. Go to Metafields.
3. Select Products and click Add definition.

1. Provide a namespace of icons-with-text.
2. Provide a key of icons-with-text.
3. From the content type select File and List of files.

Step 2: Assign metafields to your products

You can now assign your metafields to your products.

1. Within your Shopify settings, go to Products.
2. Select the relevant product.
3. Scroll down to the metafield option and select the metafield you defined above.
4. From here, you can select the image files that you want to be displayed.
   
   
5. The text displayed in this block is the alt text for each image. This can easily be updated in your Shopify settings.
6. Go to Files.
7. Select your image and update the alt text.
8. Click done.

Step 3: Set up Icons with text on your store

Next, you can set up the Icons with text block on your product cards.

1. Within the theme editor, navigate to the product card you want to add the block to.
2. Add an Icons with text block.
3. Now when you add this section to your theme you should see the icons you have added to each individual product show on the relevant products