Product Featured Icons Metafield

What Is This?

This is a custom list of text fields that enables you to add custom featured icons to your products.

How Do I Set This Up?

Create the Metafield

1. From your Shopify admin, go to Settings > Custom data.
2. Select Products.
3. Click Add definition.
4. In the Name field, enter "Featured Icons". The Namespace and key field will automatically generate as "custom.featured_icons"; don't edit this.
5. Optional: In the Description field, enter a description for your metafield values.
6. Click Select content type, and then select Single Line Text.
7. Select Accept list of values.
8. Enter "1" for the validation information for Minimum character count.
9. Click Save.

Shopify provides details about creating metafields here

Add Icons to the Icon Library

1. From your Shopify admin, go to Online Store > Themes.
2. Find this theme that you've added, and then click Customize.
3. Click Theme settings.
4. Click on Icon Library.
5. For every icon you want to add, supply its title (customers will see this) and the icon itself. We recommend uploading PNGs because they have transparent backgrounds. The size you upload depends on the size you specify when you use the icon, but a safe size to upload is 200px tall with any width.

6. Note: You may already have an icon set you use within your company. If not, search for free icons online such as flaticon.com, or hire a local designer to create an icon set for you

Supply Data for the Metafield

1. From your Shopify admin, go to Products.
2. For every product, select it and scroll to the bottom of the page where you will see the metafield you added in the first set of instructions. Select that field and enter a title of one of the icons you added to the Icon Library in the second set of instructions. Press "Add Item" and repeat until you've added all the icons you want to that product.

3. Note: Spelling matters! If the spelling you've entered in the Icon Library doesn't match the spelling you've entered on the product page, the theme will not be able to find the icon

Display the Metafield Data on your Site

There are three sections that enable you to display these featured icons: Main Product, Collection Teaser and Main List Collections. Follow the instructions for each below.

Main Product

1. 1. This section has a block called "Featured Icons". Once you've added or navigated to this section on your product page template, click "Add Block"
   2. Select "Featured Metafield Icons"
   3. Optionally, give the icons a title such as "Key Ingredients"
   4. Optionally, choose the layout you prefer to display the icons
   5. Optionally, customize the icons' height
   6. Optionally, choose to include a border above the icons
   7. If you've followed all of the instruction sets above, and you've supplied data for the product you're currently previewing, then you will see your Featured Icons display

Collection Teaser

1. 1. This section has a setting labeled "Display featured icons", toggle it on
   2. Optionally, toggle on the featured icons marquee to make the icons displaying in a scrolling row. If its toggled off, the icons will display in a basic row that wraps to the next line when there are they don't fit in a single row
   3. Optionally, choose the layout you prefer to display the icons
   4. Optionally, customize the icons' height
   5. If you've followed all of the instruction sets above, and you've supplied data for at-least one of the products within the collection you've chosen for this section and are currently previewing, then you will see your Featured Icons display

2. • Note: Because multiple products in a collection can have the same icon, we remove any duplicates, ultimately only display an icon once even if its been added to multiple products in a collection

Main List Collections

1. 1. This section has a setting labeled "Display featured icons", toggle it on
   2. Optionally, toggle on the featured icons marquee to make the icons displaying in a scrolling row. If its toggled off, the icons will display in a basic row that wraps to the next line when there are they don't fit in a single row
   3. Optionally, choose the layout you prefer to display the icons
   4. Optionally, customize the icons' height
   5. If you've followed all of the instruction sets above, and you've supplied data for at-least one of the products within the collection you're currently previewing, then you will see your Featured Icons display

2. • Note: Because multiple products in a collection can have the same icon, we remove any duplicates, ultimately only display an icon once even if its been added to multiple products in a collection