← back to Designer Wallcoverings
fix: product specs rendering - access metafields as object properties not array iteration
054e0338f5a27ea9fc838b9680203f2fdb5df26b · 2026-06-22 22:15:57 -0700 · Steve Abrams
Fixed product-specs.liquid to correctly access Shopify metafields in Liquid:
- Changed from iterating product.metafields.global as array to accessing properties directly
- Access metafields via product.metafields.global.width, .length, .Contents, etc.
- Specs now correctly display: Width, Length, Material, Design, Type, Pattern Repeat
- Verified on Giant Abstract M4905-1 product page
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Files touched
M shopify/theme-5.0-duplicate/snippets/product-specs.liquid
Diff
commit 054e0338f5a27ea9fc838b9680203f2fdb5df26b
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Mon Jun 22 22:15:57 2026 -0700
fix: product specs rendering - access metafields as object properties not array iteration
Fixed product-specs.liquid to correctly access Shopify metafields in Liquid:
- Changed from iterating product.metafields.global as array to accessing properties directly
- Access metafields via product.metafields.global.width, .length, .Contents, etc.
- Specs now correctly display: Width, Length, Material, Design, Type, Pattern Repeat
- Verified on Giant Abstract M4905-1 product page
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
.../snippets/product-specs.liquid | 173 +++++++++++----------
1 file changed, 88 insertions(+), 85 deletions(-)
diff --git a/shopify/theme-5.0-duplicate/snippets/product-specs.liquid b/shopify/theme-5.0-duplicate/snippets/product-specs.liquid
index ca08f6df..ef5f6334 100644
--- a/shopify/theme-5.0-duplicate/snippets/product-specs.liquid
+++ b/shopify/theme-5.0-duplicate/snippets/product-specs.liquid
@@ -1,92 +1,95 @@
{% comment %}
Product Specifications — renders metafield specs in a table format
Usage: {% render 'product-specs', product: product %}
-{% endcomment %}
-{% if product.metafields.global %}
- {% assign specs_count = 0 %}
- {% for metafield in product.metafields.global %}
- {% if metafield.key == 'width' or metafield.key == 'length' or metafield.key == 'Contents' or metafield.key == 'Design' or metafield.key == 'Type' or metafield.key == 'repeat' or metafield.key == 'material' %}
- {% assign specs_count = specs_count | plus: 1 %}
- {% endif %}
- {% endfor %}
+ In Shopify Liquid, product.metafields.global is an object where each key
+ is a metafield name. Access them directly as product.metafields.global.width,
+ product.metafields.global.length, etc.
+{% endcomment %}
- {% if specs_count > 0 %}
- <div class="product-specs">
- <h3 class="specs-title">Specifications</h3>
- <table class="specs-table">
- <tbody>
- {% for metafield in product.metafields.global %}
- {% assign key = metafield.key %}
- {% if key == 'width' %}
- <tr>
- <th>Width</th>
- <td>{{ metafield.value }}</td>
- </tr>
- {% elsif key == 'length' %}
- <tr>
- <th>Length</th>
- <td>{{ metafield.value }}</td>
- </tr>
- {% elsif key == 'Contents' %}
- <tr>
- <th>Material</th>
- <td>{{ metafield.value }}</td>
- </tr>
- {% elsif key == 'Design' %}
- <tr>
- <th>Design</th>
- <td>{{ metafield.value }}</td>
- </tr>
- {% elsif key == 'Type' %}
- <tr>
- <th>Type</th>
- <td>{{ metafield.value }}</td>
- </tr>
- {% elsif key == 'repeat' %}
- <tr>
- <th>Pattern Repeat</th>
- <td>{{ metafield.value }}</td>
- </tr>
- {% endif %}
- {% endfor %}
- </tbody>
- </table>
- </div>
+{% if product.metafields.global.width or product.metafields.global.length or product.metafields.global.Contents or product.metafields.global.Design or product.metafields.global.Type or product.metafields.global.repeat or product.metafields.global.material %}
+ <div class="product-specs">
+ <h3 class="specs-title">Specifications</h3>
+ <table class="specs-table">
+ <tbody>
+ {% if product.metafields.global.width %}
+ <tr>
+ <th>Width</th>
+ <td>{{ product.metafields.global.width }}</td>
+ </tr>
+ {% endif %}
+ {% if product.metafields.global.length %}
+ <tr>
+ <th>Length</th>
+ <td>{{ product.metafields.global.length }}</td>
+ </tr>
+ {% endif %}
+ {% if product.metafields.global.Contents %}
+ <tr>
+ <th>Material</th>
+ <td>{{ product.metafields.global.Contents }}</td>
+ </tr>
+ {% endif %}
+ {% if product.metafields.global.material %}
+ <tr>
+ <th>Material</th>
+ <td>{{ product.metafields.global.material }}</td>
+ </tr>
+ {% endif %}
+ {% if product.metafields.global.Design %}
+ <tr>
+ <th>Design</th>
+ <td>{{ product.metafields.global.Design }}</td>
+ </tr>
+ {% endif %}
+ {% if product.metafields.global.Type %}
+ <tr>
+ <th>Type</th>
+ <td>{{ product.metafields.global.Type }}</td>
+ </tr>
+ {% endif %}
+ {% if product.metafields.global.repeat %}
+ <tr>
+ <th>Pattern Repeat</th>
+ <td>{{ product.metafields.global.repeat }}</td>
+ </tr>
+ {% endif %}
+ </tbody>
+ </table>
+ </div>
- <style>
- .product-specs {
- margin: 2em 0;
- padding: 0;
- }
- .specs-title {
- font-size: 16px;
- font-weight: 600;
- margin-bottom: 12px;
- color: #333;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- }
- .specs-table {
- width: 100%;
- border-collapse: collapse;
- font-size: 14px;
- }
- .specs-table tr {
- border-bottom: 1px solid #e5e5e5;
- }
- .specs-table th {
- text-align: left;
- padding: 8px 0 8px 0;
- font-weight: 600;
- color: #333;
- min-width: 120px;
- }
- .specs-table td {
- text-align: left;
- padding: 8px 0 8px 16px;
- color: #666;
- }
- </style>
- {% endif %}
+ <style>
+ .product-specs {
+ margin: 2em 0;
+ padding: 0;
+ }
+ .specs-title {
+ font-size: 16px;
+ font-weight: 600;
+ margin-bottom: 12px;
+ color: #333;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ }
+ .specs-table {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 14px;
+ }
+ .specs-table tr {
+ border-bottom: 1px solid #e5e5e5;
+ }
+ .specs-table th {
+ text-align: left;
+ padding: 8px 0 8px 0;
+ font-weight: 600;
+ color: #333;
+ min-width: 120px;
+ }
+ .specs-table td {
+ text-align: left;
+ padding: 8px 0 8px 16px;
+ color: #666;
+ }
+ </style>
{% endif %}
← 7d2e15bd feat: add product specifications display from metafields in
·
back to Designer Wallcoverings
·
chore: update pdp push script to include product specs and p 3476f117 →