Displaying Metafields in Product Cards

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 -%}