This is a pretty common Shopify task. Show some specs (from a metafield) on each product in a grid of products - usually on the collection page but in other places across your store also.
On this store, we want to show the fabric composition under each product title.
Here I’m demonstrating using Dawn, but the code will be the same for any dawn-based theme such as Craft, Sense, Crave and the other free Shopify starter themes.
Here is the finished code. You will probably need to watch the video to learn where to add it.
The section settings code
Inside main-collection-product-grid.liquid
{
"type": "text",
"id": "show_metafield",
"label": "Show Metafield",
"info": "Enter namespace and key"
},Passing the section settings to the product card snippet
Find where your theme is rendering the card snippet and add show_metafield: section.settings.show_metafield,
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
image_shape: section.settings.image_shape,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_metafield: section.settings.show_metafield,
show_rating: section.settings.show_rating,
lazy_load: lazy_load,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id
%}The main output code
inside card-product.liquid
{%- if show_metafield != blank -%}
{%- assign metafield_parts = show_metafield | split: '.' -%}
<div style="margin-top: 0.5rem;" class="caption-with-letter-spacing light">{{ card_product.metafields[metafield_parts[0]][metafield_parts[1]] }}</div>
{%- endif -%}