Dynamic icons list theme settings
The Dynamic icons list theme settings connect up to six icon and label metafields, so Local shows product features as icons in product cards.
Applies to: Local 4.2.1 and later. Added in: Local 1.0.0. Last checked: 2026-10-13 against Local 4.2.1.
The dynamic icons list shows product features as small icons on product cards, such as "Gluten free" or "Organic". Each product can hold up to six icons, and each icon has a label that appears when the customer moves the mouse over it. The icons come from product metafields that you connect here once.
Where to find it: Theme settings → Product card → Dynamic icons list (Icon 1 to Icon 6)
How the icons list works
- Icon 1 to Icon 6 each have two fields: Icon metafield and Label metafield.
- Each field takes the reference of a product metafield, written as
namespace.key, for examplecustom.product_icon_1_image. - On each product card, Local reads those metafields from the product and shows one icon per filled pair. An icon without an image is not shown.
- The icons appear only in product grids that have the Icons list block. Add it in each product grid section, see Product grid blocks.
The product page has its own Icons list block with icons you upload in the block, see Product attribute blocks.
Setting up the icon and label metafields
Create one icon metafield per icon
In Shopify admin, open Settings → Metafields and metaobjects → Products and select Add definition. Name it, for example "Product icon 1", and choose the type File with images allowed. Shopify gives it a reference such as custom.product_icon_1.
Create one label metafield per icon
Select Add definition again and create a Single line text definition for the label, for example "Product icon 1 label". Repeat both steps for each icon you need, up to six pairs.
Copy each namespace and key
Open each definition and copy its reference in the form namespace.key, for example custom.product_icon_1.
Paste the references in the theme
In the theme editor, open Theme settings → Product card → Icon 1. Paste the icon reference in Icon metafield and the label reference in Label metafield. Fill Icon 2 to Icon 6 the same way, then select Save.
Fill the metafields on your products
In Shopify admin → Products, open a product. Its metafields section now shows the new fields: upload the icon image and type the label for each feature the product has. Leave the others empty.
Add the Icons list block to your product grids
In the theme editor, open the collection page (and any other page with product cards), select the Product grid section and choose Add block → Icons list.
Type the references as text. These fields are plain text fields, not dynamic sources: there is no connect button, and Local reads the metafield from each product card by its namespace.key.
Using one icon file per label
Uploading the same icon on every product takes time. Local can find the icon by its label instead, so you only fill the label metafields.
Name the icon files after the labels
Save each icon as a PNG file named after its label in handle form: lowercase, with hyphens instead of spaces. The label "Gluten Free" needs the file gluten-free.png.
Upload the files
In Shopify admin, open Content → Files and upload the PNG files. Keep the file names as they are.
Fill only the labels
On each product, type the labels in the label metafields and leave the icon metafields empty. Local shows the uploaded PNG for every label that has a matching file.
When a product has an image in its icon metafield, Local uses that image first. Only an empty icon metafield falls back to the file named after the label, and only PNG files are found this way.
Showing icons in filters with metaobjects
Icons in the collection filters are a Shopify feature, not a Local setting. Shopify's Search & Discovery app builds the filters; Local shows the image that Shopify returns for each filter value, in one or two columns (Collection page → Product grid → Image filter layout).
Create a metaobject definition
In Shopify admin, open Settings → Metafields and metaobjects → Metaobject definitions and select Add definition. Add two fields: one File field for the image and one Single line text field for the label.
Create a product metafield of that metaobject type
Open Settings → Metafields and metaobjects → Products → Add definition, choose the type Metaobject and select the definition you just made.
Add the entries
Open Content → Metaobjects, select your definition and add one entry per filter value, with its image and label.
Assign the entries to products
On each product, choose the matching entries in the new metafield.
Add the filter in Search & Discovery
In the Search & Discovery app, open Filters, add a filter for the new metafield and choose a display that shows images. The filter then appears in the collection page filters with its icons.
For more about metaobjects, see Metaobjects and Search & Discovery filters in the Shopify Help Center.
Why do the icons not show on my product cards?
Usually because the grid has no Icons list block, or Local cannot read the metafields. Check these, in order:
- The product grid section has the Icons list block.
- Icon metafield and Label metafield hold the exact
namespace.keyof your definitions, typed as text. - The product has values in those metafields. A label with no icon image (and no matching PNG in Files) shows nothing on product cards.
Where can I download icons?
Krown has a free pack of icons made for Local.
We've prepared a list of 289 icons that you can download and use in our theme.
Download them from the Local icon pack.
All Dynamic icons list settings
Every setting, with its type and default.
Dynamic icons list theme settings: Dynamic icons list
Where to find it: Theme settings → Product card → Dynamic icons list
Use dynamic sources to highlight unique attributes by creating product metafields for the icon list.
Dynamic icons list theme settings: Icon 1
Where to find it: Theme settings → Product card → Icon 1
Icon metafield (text field): The product metafield that holds the image of icon 1, typed as namespace.key (for example custom.product_icon_1_image). Use a File metafield with images. Typed as text, not connected as a dynamic source.
Label metafield (text field): The product metafield that holds the label of icon 1, typed as namespace.key (for example custom.product_icon_1_label). Use a Single line text metafield. With an empty icon metafield, Local uses a PNG from Content → Files named after the label (Gluten Free → gluten-free.png).
Dynamic icons list theme settings: Icon 2
Where to find it: Theme settings → Product card → Icon 2
Icon metafield (text field): The product metafield that holds the image of icon 2, typed as namespace.key (for example custom.product_icon_2_image). Use a File metafield with images. Typed as text, not connected as a dynamic source.
Label metafield (text field): The product metafield that holds the label of icon 2, typed as namespace.key (for example custom.product_icon_2_label). Use a Single line text metafield. With an empty icon metafield, Local uses a PNG from Content → Files named after the label (Gluten Free → gluten-free.png).
Dynamic icons list theme settings: Icon 3
Where to find it: Theme settings → Product card → Icon 3
Icon metafield (text field): The product metafield that holds the image of icon 3, typed as namespace.key (for example custom.product_icon_3_image). Use a File metafield with images. Typed as text, not connected as a dynamic source.
Label metafield (text field): The product metafield that holds the label of icon 3, typed as namespace.key (for example custom.product_icon_3_label). Use a Single line text metafield. With an empty icon metafield, Local uses a PNG from Content → Files named after the label (Gluten Free → gluten-free.png).
Dynamic icons list theme settings: Icon 4
Where to find it: Theme settings → Product card → Icon 4
Icon metafield (text field): The product metafield that holds the image of icon 4, typed as namespace.key (for example custom.product_icon_4_image). Use a File metafield with images. Typed as text, not connected as a dynamic source.
Label metafield (text field): The product metafield that holds the label of icon 4, typed as namespace.key (for example custom.product_icon_4_label). Use a Single line text metafield. With an empty icon metafield, Local uses a PNG from Content → Files named after the label (Gluten Free → gluten-free.png).
Dynamic icons list theme settings: Icon 5
Where to find it: Theme settings → Product card → Icon 5
Icon metafield (text field): The product metafield that holds the image of icon 5, typed as namespace.key (for example custom.product_icon_5_image). Use a File metafield with images. Typed as text, not connected as a dynamic source.
Label metafield (text field): The product metafield that holds the label of icon 5, typed as namespace.key (for example custom.product_icon_5_label). Use a Single line text metafield. With an empty icon metafield, Local uses a PNG from Content → Files named after the label (Gluten Free → gluten-free.png).
Dynamic icons list theme settings: Icon 6
Where to find it: Theme settings → Product card → Icon 6
Icon metafield (text field): The product metafield that holds the image of icon 6, typed as namespace.key (for example custom.product_icon_6_image). Use a File metafield with images. Typed as text, not connected as a dynamic source.
Label metafield (text field): The product metafield that holds the label of icon 6, typed as namespace.key (for example custom.product_icon_6_label). Use a Single line text metafield. With an empty icon metafield, Local uses a PNG from Content → Files named after the label (Gluten Free → gluten-free.png).
Related pages
- Product grid blocks: the Icons list block in product cards.
- Product attribute blocks: the Icons list block on the product page.
- Product card theme settings: the rest of the Product card group.
Product badges theme settings
The Product badges theme settings in Local show sold out and discount badges and up to three custom badges chosen by product tag.
Cart theme settings
The Cart theme settings choose the cart type of Local (page, drawer or popup), notes, discounts, terms, recommendations, free shipping and gift wrapping.