[object Object]

← back to Designer Wallcoverings

feat: add product specifications display from metafields in product template

7d2e15bdab3ffe6c637bb57c6dbbadd61e6070ff · 2026-06-22 22:08:34 -0700 · Steve Abrams

Files touched

Diff

commit 7d2e15bdab3ffe6c637bb57c6dbbadd61e6070ff
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Jun 22 22:08:34 2026 -0700

    feat: add product specifications display from metafields in product template
---
 .../snippets/product-specs.liquid                  | 92 ++++++++++++++++++++++
 .../theme-5.0-duplicate/snippets/product.liquid    |  4 +
 2 files changed, 96 insertions(+)

diff --git a/shopify/theme-5.0-duplicate/snippets/product-specs.liquid b/shopify/theme-5.0-duplicate/snippets/product-specs.liquid
new file mode 100644
index 00000000..ca08f6df
--- /dev/null
+++ b/shopify/theme-5.0-duplicate/snippets/product-specs.liquid
@@ -0,0 +1,92 @@
+{% 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 %}
+
+  {% 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>
+
+    <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 %}
+{% endif %}
diff --git a/shopify/theme-5.0-duplicate/snippets/product.liquid b/shopify/theme-5.0-duplicate/snippets/product.liquid
index 969a80f1..23d219b8 100644
--- a/shopify/theme-5.0-duplicate/snippets/product.liquid
+++ b/shopify/theme-5.0-duplicate/snippets/product.liquid
@@ -95,6 +95,10 @@
           %}
         </div>
       {% endif %}
+      {%
+        render 'product-specs',
+        product: product
+      %}
     </div>
     {% render 'product-description-meta' %}
   </div>

← f5d220c1 feat: arrange product page buttons (Request Sample, Spec She  ·  back to Designer Wallcoverings  ·  fix: product specs rendering - access metafields as object p 054e0338 →