Shopify metafields changed when the admin made them editable without code. Before that, metafields were a developer-only feature. You needed someone to write a script to populate them, and another person to write Liquid to display them. Most merchants never touched them.
Now you can create a metafield definition in your Shopify admin, fill it in on each product page, and pull it onto your storefront. The setup is manageable. The mistake most merchants make is not knowing what to put in them - or not realizing that some things they are already doing manually could be structured and automated with a metafield instead.
Here are five practical uses for metafields on product pages - with the Liquid code to make them work.
What metafields are and how to create them
A metafield is a custom data field attached to a Shopify resource - a product, a collection, a variant, a customer. For product pages, you are almost always working with product metafields.
To create one: go to Settings > Custom data > Products in your Shopify admin. Click Add definition. Give it a name, choose a type (single line text, multi-line text, true/false, number, file, etc.), and save it.
Once the definition exists, the field appears on every product edit page under a "Metafields" section. You fill it in per product, and it stores whatever you put there.
The part most merchants miss: creating the definition does not make it show up on your storefront. You have to connect it to your theme using Liquid. The five examples below show you exactly how to do that.
Example 1: A product tab driven by a metafield
Custom product tabs are the most-requested metafield use case in our task data - 874 requests. The common scenario: a merchant wants separate tabs for "Details," "Care Instructions," and "Shipping Info" on their product page, each with different content per product.
A metafield per tab keeps the content editable from the admin without touching code each time something changes.
Step 1: Create your metafield definitions
In Settings > Custom data > Products, create three definitions:
- Name: Care Instructions | Namespace and key: custom.care_instructions | Type: Multi-line text
- Name: Shipping Info | Namespace and key: custom.shipping_info | Type: Multi-line text
- Name: Product Details | Namespace and key: custom.product_details | Type: Multi-line text
Step 2: Add the Liquid to your product template
In your theme editor, open the product template file (sections/main-product.liquid in Dawn). Find where the product description renders and add this below it:
{% if product.metafields.custom.product_details != blank
or product.metafields.custom.care_instructions != blank
or product.metafields.custom.shipping_info != blank %}
<div class="product-tabs">
{% if product.metafields.custom.product_details != blank %}
<div class="product-tab">
<h3 class="product-tab__title">Details</h3>
<div class="product-tab__content">
{{ product.metafields.custom.product_details.value }}
</div>
</div>
{% endif %}
{% if product.metafields.custom.care_instructions != blank %}
<div class="product-tab">
<h3 class="product-tab__title">Care Instructions</h3>
<div class="product-tab__content">
{{ product.metafields.custom.care_instructions.value }}
</div>
</div>
{% endif %}
{% if product.metafields.custom.shipping_info != blank %}
<div class="product-tab">
<h3 class="product-tab__title">Shipping</h3>
<div class="product-tab__content">
{{ product.metafields.custom.shipping_info.value }}
</div>
</div>
{% endif %}
</div>
{% endif %}
The {% if product.metafields.custom.field != blank %} wrapper means the tab only renders if you've filled in that field for the product. Products without care instructions won't show an empty tab.
Step 3: Style with CSS
Add basic styles to your theme's CSS to make the tabs look right. The layout is up to you - stacked accordions, horizontal tabs, or simple labeled sections all work.
Coaching tip: Start with a simple stacked layout before trying to build a JavaScript-powered tab switcher. The content is what matters. The visual treatment can be refined later.
Example 2: A custom badge from a metafield
Custom product badges - "New," "Best Seller," "Limited Run," "Sustainable" - appear in 119 task requests. Storing the badge label as a metafield means you can update it from the admin without touching code or images - useful when a product moves from "New" to "Best Seller" and you do not want to re-edit every image.
Step 1: Create the metafield definition
In Settings > Custom data > Products:
- Name: Product Badge | Namespace and key: custom.product_badge | Type: Single line text
Fill it in on any product that needs a badge: "New," "Limited," "Best Seller," or whatever label you use.
Step 2: Add the Liquid to your product card
In Dawn, the product card template is in snippets/card-product.liquid. Find where the product image renders and add this inside the image wrapper:
{% if product.metafields.custom.product_badge != blank %}
<span class="product-badge">
{{ product.metafields.custom.product_badge.value }}
</span>
{% endif %}
This renders on both collection pages and the product page wherever the card snippet is used.
Step 3: Style the badge
.product-badge {
position: absolute;
top: 12px;
left: 12px;
background: #1a1a1a;
color: #fff;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 4px 8px;
border-radius: 3px;
z-index: 2;
}
Adjust colors and positioning to match your brand. The badge uses position: absolute, so its parent container needs position: relative - Dawn's image wrapper already has this, but if you are on a different theme, check that the wrapper is relatively positioned or the badge will render in the wrong place. To show the badge on the product page hero image as well, add the same Liquid snippet to your sections/main-product.liquid inside the product media wrapper.
Coaching tip: Keep badge text short - two words maximum. "New Arrival" works. "Recently Added to Our Collection" does not render well at 11px.
Example 3: A product specifications table
For fashion brands, a specifications table is useful for products where physical details matter: a jacket with specific dimensions, a bag with interior measurements, outerwear with a listed weight or fill power. This is distinct from sizing - it's structured product data that helps customers make informed decisions.
Putting specs in the product description as plain text works, but it is hard to scan and inconsistent across products. A metafield-powered specs table is structured, scannable, and editable from the admin without reformatting the description each time.
Step 1: Create metafield definitions
Create one definition per specification row you need. Example set for an outerwear brand:
- custom.material - Single line text - "Material"
- custom.fill_weight - Single line text - "Fill Weight"
- custom.weight - Single line text - "Item Weight"
- custom.dimensions - Single line text - "Dimensions"
- custom.country_of_origin - Single line text - "Made In"
Add or remove definitions based on what is relevant to your product catalog.
Step 2: Add the Liquid table to your product template
{% if product.metafields.custom.material != blank
or product.metafields.custom.fill_weight != blank
or product.metafields.custom.weight != blank
or product.metafields.custom.dimensions != blank
or product.metafields.custom.country_of_origin != blank %}
<div class="product-specs">
<h3 class="product-specs__title">Specifications</h3>
<table class="product-specs__table">
<tbody>
{% if product.metafields.custom.material != blank %}
<tr>
<th>Material</th>
<td>{{ product.metafields.custom.material.value }}</td>
</tr>
{% endif %}
{% if product.metafields.custom.fill_weight != blank %}
<tr>
<th>Fill Weight</th>
<td>{{ product.metafields.custom.fill_weight.value }}</td>
</tr>
{% endif %}
{% if product.metafields.custom.weight != blank %}
<tr>
<th>Item Weight</th>
<td>{{ product.metafields.custom.weight.value }}</td>
</tr>
{% endif %}
{% if product.metafields.custom.dimensions != blank %}
<tr>
<th>Dimensions</th>
<td>{{ product.metafields.custom.dimensions.value }}</td>
</tr>
{% endif %}
{% if product.metafields.custom.country_of_origin != blank %}
<tr>
<th>Made In</th>
<td>{{ product.metafields.custom.country_of_origin.value }}</td>
</tr>
{% endif %}
</tbody>
</table>
</div>
{% endif %}
Step 3: Style the table
.product-specs {
margin-top: 24px;
}
.product-specs__title {
font-size: 14px;
font-weight: 700;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.product-specs__table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.product-specs__table th,
.product-specs__table td {
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid #e8e8e8;
}
.product-specs__table th {
width: 40%;
font-weight: 600;
color: #555;
}
.product-specs__table tr:last-child th,
.product-specs__table tr:last-child td {
border-bottom: none;
}
Coaching tip: Only create metafield definitions for specs you will actually fill in consistently. A specs table with three rows of data and five empty rows looks worse than no table at all. Start with the two or three specs that matter most for your product type and expand from there.
Example 4: A downloadable PDF spec sheet or care guide
Linking a PDF from a product page is one of the most-requested metafield use cases in the Shopify community. Fashion brands use it for detailed care guides, fabric composition sheets, or wholesale spec documents. The alternative - hosting a PDF somewhere and manually updating links in product descriptions - breaks every time the file changes.
A file-type metafield handles this cleanly. You upload the PDF to Shopify, attach it to the product via a metafield, and it always links to the current version.
Step 1: Create the metafield definition
In Settings > Custom data > Products:
- Name: Care Guide | Namespace and key: custom.care_guide | Type: File
Shopify stores the file and gives it a permanent URL. When you update the file, the URL stays the same.
Step 2: Add the Liquid to your product template
{% if product.metafields.custom.care_guide != blank %}
<div class="product-care-guide">
<a href="{{ product.metafields.custom.care_guide.value.url }}"
target="_blank"
rel="noopener">
Download Care Guide (PDF)
</a>
</div>
{% endif %}
Step 3: Style the link
.product-care-guide {
margin-top: 16px;
}
.product-care-guide a {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
color: #1a1a1a;
text-decoration: underline;
}
Add an icon before the link text if your brand uses iconography - a small PDF icon or download arrow works well here.
Coaching tip: Use the file metafield for PDFs you want to update periodically without touching code. If the care guide changes when you change manufacturers, you swap the file in the metafield admin and the link on every product page updates automatically.
Example 5: Related products via a product reference metafield
Some brands prefer curated related products over algorithmic suggestions - hand-picked pairings rather than "customers also viewed" logic. A product reference metafield is a good fit for this. You select which products are related directly in the admin, and the metafield renders them on the page using your existing product card snippet.
Step 1: Create the metafield definition
In Settings > Custom data > Products:
- Name: Related Products | Namespace and key: custom.related_products | Type: Product - set it to allow a list of values so you can attach multiple products
Step 2: Add the Liquid to your product template
{% if product.metafields.custom.related_products != blank %}
<div class="related-products">
<h3 class="related-products__title">You May Also Like</h3>
<div class="related-products__grid">
{% for related_product in product.metafields.custom.related_products.value %}
{% render 'card-product', card_product: related_product %}
{% endfor %}
</div>
</div>
{% endif %}
This uses your theme's existing card-product snippet, so the related products render with the same styling as your collection grid - no extra CSS needed in most cases.
Step 3: Style the grid
.related-products {
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid #e8e8e8;
}
.related-products__title {
font-size: 18px;
font-weight: 700;
margin-bottom: 20px;
}
.related-products__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 768px) {
.related-products__grid {
grid-template-columns: repeat(2, 1fr);
}
}
Coaching tip: Limit related products to three or four per product. A grid of eight related products below a product page competes with the purchase decision rather than supporting it. Curated and focused beats comprehensive every time.
When metafields are the right tool
Metafields work best when:
- The data is text, numbers, a file, or a product reference you control
- You want to edit it from the Shopify admin without a developer involved each time
- The feature is content-focused and specific to individual products
For more complex use cases - recommendation engines, review aggregation, real-time inventory logic, or features that need to sync with external data - a dedicated app is still the right call. Metafields and apps serve different jobs. The goal is using the right one for each.
If you want a developer to implement any of these metafield patterns on your store, submit a free quote request and we will get it done cleanly.
Shopify metafields product page TL;DR
Metafields let you store structured product data and display it on your storefront. The five most useful applications for fashion and apparel product pages are: custom tabs (details, care instructions, shipping), product badges (new, limited, best seller), specifications tables (material, weight, dimensions), downloadable PDF guides, and curated related products. Create metafield definitions in Settings > Custom data, fill them in per product, and connect them to your theme using the Liquid snippets above. Creating the definition is only half the job - you still need the Liquid to display it. For complex features that need external data or real-time logic, apps remain the right tool. For content-focused additions you want to manage from the admin, metafields are worth knowing.