Skip to main content

Add Product Attributes with Metafields

Display custom product attributes (specifications, features, etc.) on your product pages using metafields and Liquid code.

Advanced Tutorial

This tutorial requires knowledge of HTML, CSS, JavaScript, and Shopify Liquid. Verified for the Debut theme may require adjustments for other themes.

Step 1: Create a Liquid Snippet​

Navigate to Online Store → Themes → Actions → Edit code → Snippets → Create a new snippet called custom-attributes.liquid:

<div class="custom-attributes-wrapper product-single__description rte">
{%assign custom_attributes = product.metafields.custom_attributes %}
{%if custom_attributes.size > 0 %}
<h3>Additional information:</h3>
<ul>
{% for field in custom_attributes %}
{% assign attribute_code = field | first %}
{% assign attribute_value = field | last %}
<li class="custom-attribute-item">
  <span class="custom-attribute-name">{{ attribute_code }}</span>:
  <span class="custom-attribute-value">{{ attribute_value }}</span>
</li>
{% endfor %}
</ul>
{%endif%}
</div>
<br/>

Step 2: Include in Product Template​

Open Sections → product-template.liquid, find the product description, and add:

{% render "custom-attributes" %}

Step 3: Add CSS (Optional)​

In Assets → theme.scss.liquid, add styles for .custom-attributes-wrapper, .custom-attribute-item, .custom-attribute-name, and .custom-attribute-value.

Step 4: Populate Metafields​

In Metafield Studio, create metafields under the custom_attributes namespace. Use the attribute name as the key and the attribute content as the value.