Product

[idahospudnut]

Hello, I would like to do this with my product page using Metafields. Can anyone help me.

[Ricardo.Roas]

Hello @idahospudnut

I can help you. , absolutely. This can be implemented cleanly using Shopify Metafields.

I can set up the product metafields for attributes like SKU, Collections, Designers, Manufacturers, Fabric Type, Themes, Fabric Width, Fiber Content, and Product Type, then expose them dynamically on the product page using Liquid.

I’d also make the section reusable so you can manage the values directly from the Shopify admin without hardcoding anything in the theme. If needed, I can also match the layout and styling closely to the example you shared.

Thank you.

[devcoders]

Hi @idahospudnut

We can create separate metafields for things like Designers, Manufacturers, Fabric Types, Themes, Fabric Width, Fiber Content, etc., and then dynamically display them on the product page.

The information will automatically change based on the product, so you won’t need to manually edit the product page for each item.

If you can send me your store URL and a collaborator code, I can check your current product page/theme setup and recommend the best approach.

Best regards,
Devcoder

[Ploqo]

I built and tested on my Dawn store.

That table is product metafields shown on the product template, with each value linked to a filtered list.

Result:

Steps:

1. Create the metafields
Settings > Custom data > Metafields > Products > Add definition. Add one per row you want:

• Designer, Manufacturer, Fabric type, Fabric width, Fiber content
• Type: Single line text
• Set each definition’s Namespace and key to fabric.designer, fabric.manufacturer, fabric.fabric_type, fabric.fabric_width, fabric.fiber_content

2. Fill them on your products
Open a product, scroll to Metafields, type each value. Pin the definitions so they show on every product page.

3. Show them as a table on the product page
Online Store > Themes > … > Customize. Open a Product template. Add block > Custom Liquid, place it under the Description, paste this and Save:

{%- liquid
  assign ns = product.metafields.fabric
  assign rows = 'designer:Designer,manufacturer:Manufacturer,fabric_type:Fabric Type,fabric_width:Fabric Width,fiber_content:Fiber Content' | split: ','
  assign has_specs = false
  for row in rows
    assign key = row | split: ':' | first
    if ns[key].value != blank
      assign has_specs = true
      break
    endif
  endfor
-%}
{%- if has_specs -%}
<style>
  .fabric-specs{width:100%;border-collapse:collapse;margin-top:1.5rem;font-size:1.5rem}
  .fabric-specs tr{border-bottom:1px solid rgba(var(--color-foreground),0.1)}
  .fabric-specs th{text-align:left;font-weight:600;white-space:nowrap;padding:1rem 2rem 1rem 0;vertical-align:top}
  .fabric-specs td{padding:1rem 0;vertical-align:top}
  .fabric-specs a{color:rgb(var(--color-foreground));text-decoration:none}
  .fabric-specs a:hover{text-decoration:underline}
</style>
<table class="fabric-specs">
  {%- for row in rows -%}
    {%- assign parts = row | split: ':' -%}
    {%- assign key = parts[0] -%}
    {%- assign value = ns[key].value -%}
    {%- if value != blank -%}
      <tr>
        <th>{{ parts[1] }}</th>
        <td><a href="{{ routes.all_products_collection_url }}?filter.p.m.fabric.{{ key }}={{ value | url_encode }}">{{ value }}</a></td>
      </tr>
    {%- endif -%}
  {%- endfor -%}
</table>
{%- endif -%}

The namespace in the code is fabric. It must match the Namespace and key you set in step 1.

4. Make each value clickable (the linked part in your screenshot)
Install Shopify’s free Search & Discovery app. Filters > Add filter > pick each metafield (Designer, Manufacturer, …) > Save. Now clicking a value opens a filtered list, for example every Rifle Paper Co. fabric.

No Code Solutions: Accentuate Custom Fields or Easify Product Attributes build the same spec table from metafields.

Regards,
Ploqo,
Pinflow - Pinterest Virtual Assistant

[idahospudnut]

Thank you. Now can you help me with the Quantity section.

[Ploqo]

For fabric sold by length, Shopify’s cart only counts whole numbers.

So make 1 unit = 1/4 yard. Then the two dropdowns just add up to a number of 1/4-yard units.

1. Sell the product by the 1/4 yard

• Price: your per-yard price divided by 4 (so $13.80/yard becomes $3.45).
• Turn on Track quantity, and enter stock in 1/4-yard units (12 1/4 yards = 49).
  
  

2. Add the quantity block

Online Store > Themes > Customize the product template. Add block > Custom Liquid (same place as the spec table), put it just above Add to cart, paste this and Save:

{%- liquid
  assign v = product.selected_or_first_available_variant
  assign units = v.inventory_quantity
  if units < 0
    assign units = 0
  endif
  assign whole_stock = units | divided_by: 4
  assign frac_stock = units | modulo: 4
-%}
<div class="yards-buy" data-section="{{ section.id }}" data-max-units="{{ units }}">
  {%- if v.inventory_quantity > 0 or v.inventory_policy == 'continue' -%}
    <p class="yards-stock">{{ whole_stock }}{% if frac_stock > 0 %} {{ frac_stock }}/4{% endif %} yards in stock</p>
  {%- endif -%}
  <div class="yards-row">
    <select class="yards-whole" aria-label="Whole yards">
      {%- for i in (0..12) -%}<option value="{{ i }}"{% if i == 1 %} selected{% endif %}>{{ i }}</option>{%- endfor -%}
    </select>
    <select class="yards-frac" aria-label="Fraction of a yard">
      <option value="0"></option><option value="1">1/4</option><option value="2">1/2</option><option value="3">3/4</option>
    </select>
    <span class="yards-label">Yards</span>
  </div>
  <select class="yards-short" aria-label="If we are short on stock">
    <option value="Contact me if short">Contact me if short</option>
    <option value="Send what is in stock">Send what is in stock</option>
    <option value="Cancel my order">Cancel my order</option>
  </select>
</div>

<style>
  .yards-buy{margin:0 0 1.5rem}
  .yards-stock{font-weight:600;margin:0 0 .8rem}
  .yards-row{display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem}
  .yards-buy select{padding:.7rem .8rem;border:1px solid rgba(var(--color-foreground),.4);border-radius:.4rem;background:rgb(var(--color-background));color:rgb(var(--color-foreground));font-size:1.5rem}
  .yards-whole,.yards-frac{min-width:7rem}
  .yards-label{font-size:1.5rem}
  .yards-short{width:100%;max-width:24rem}
  .product-form__quantity,.product-form quantity-input,.product-form .quantity{display:none!important}
</style>

<script>
  (function(){
    function attach(wrap){
      if(wrap.__yardsBuy) return;
      var sid = wrap.getAttribute('data-section');
      var form = document.getElementById('product-form-' + sid);
      if(!form) return;
      wrap.__yardsBuy = true;
      var whole = wrap.querySelector('.yards-whole');
      var frac  = wrap.querySelector('.yards-frac');
      var short = wrap.querySelector('.yards-short');
      var maxUnits = parseInt(wrap.getAttribute('data-max-units'), 10) || 0;
      function units(){ return (parseInt(whole.value,10)||0)*4 + (parseInt(frac.value,10)||0); }
      function label(){
        var w = parseInt(whole.value,10)||0, f = parseInt(frac.value,10)||0;
        var s = w + (f>0 ? ' ' + f + '/4' : '');
        return (s.replace(/^\s+|\s+$/g,'')===''? '0':s) + ' yards';
      }
      form.addEventListener('submit', function(e){
        var u = units();
        if(u < 1){ e.preventDefault(); e.stopImmediatePropagation(); alert('Please choose at least 1/4 yard.'); return; }
        if(maxUnits > 0 && u > maxUnits){ e.preventDefault(); e.stopImmediatePropagation(); alert('Only ' + (maxUnits/4) + ' yards left in stock.'); return; }
        var q = form.elements['quantity'];
        if(!q){ q = document.createElement('input'); q.type='hidden'; q.name='quantity'; form.appendChild(q); }
        q.value = u;
        function setProp(name, value){
          var el = form.elements['properties[' + name + ']'];
          if(!el){ el = document.createElement('input'); el.type='hidden'; el.name='properties[' + name + ']'; form.appendChild(el); }
          el.value = value;
        }
        setProp('Length', label());
        setProp('If short', short.value);
      }, true);
    }
    function boot(){ document.querySelectorAll('.yards-buy').forEach(attach); }
    if(document.readyState === 'loading'){ document.addEventListener('DOMContentLoaded', boot); } else { boot(); }
  })();
</script>

3. Done

Whole yards plus fraction combine into the cart quantity, and the “Contact me if short” choice is saved as a note on the line and the order.

Notes:

• The stock line and the cart both read the same 1/4-yard number, so it will not oversell.
• The price shows as $3.45 (per 1/4 yard). To display “$13.80 / yard” instead, that is a small extra line, say the word.

No Code: Fabric-length apps like Fabric Counts (sells in 1/4 and 1/2 yard increments), Measura, or Product Customizer Pro do the same with a picker.

Regards,
Ploqo,
Pinflow - Pinterest Virtual Assistant

[Mustafa_Ali]

Hi @idahospudnut Welcome To Shopify Community For the detail table at the bottom (Designers, Manufacturers, Fabric Types, Fabric Width, Fiber Content, etc.), you’ll want to create Product Metafields for each attribute (Settings > Custom data > Products > Add definition), using single line text or a list of values depending on whether a product can have multiple entries (like Themes having “Halloween Fabric, Novelty”). Once defined, you fill them in per product, then pull them into your product template using Liquid, something like {{ product.metafields.custom.fabric_width.value }} for each field, wrapped in a simple table/list markup styled to match your layout.

For the yards quantity with a decimal option (1 1/4 yards), that’s usually handled by enabling “Sell by measurement/unit” if your product uses variants for fractional quantities, or by combining a quantity selector with a separate metafield or product option for fractional yard values, since Shopify’s native quantity field is whole numbers only by default. The “Contact me if short” dropdown looks like a custom line item property or a select input tied to a metafield-driven option, not a native Shopify feature, so that part needs to be custom-coded into your product form.Hope this helps solve your problem, and if it does, don’t forget to like and mark it as the solution. Thank you!

[MayraApps]

@idahospudnut The 1/4 yard approach makes sense for Shopify since the native quantity is a whole number.

One thing I’d test carefully is the inventory flow. If 1 unit = 1/4 yard, make sure every part of the store is using that same unit, especially cart, checkout, inventory and order fulfillment.

Otherwise you can end up with the product page showing 3 1/4 yards while the admin or fulfillment team sees a quantity of 13.

The setup can work well, but I’d test a few different lengths end to end before putting it live.

[idahospudnut]

I seem to be unable to make the click able links work. I have created a collection for the designer, using the exact name but it opens a link that has nothing.

Can I not have them click able at this time?

[Ploqo]

Those links are filters, not collections

Each value in the table links to a filtered product list, not to a collection. So a collection named after the designer will not connect to them. You can leave that collection out of it.

The link only returns products once that metafield is switched on as a storefront filter. Right now it is off, so the page comes back empty.

Turn each metafield into a filter

1. Apps > Search & Discovery > Filters.
2. Click Add filter, then Select source.
3. Type your field name (Designer) and pick the entry marked Product metafield. Save.
4. Repeat for each column you linked: Manufacturer, Fabric type, Fabric width, Fiber content.

Your Filters list should then show each one with Source set to your metafield and Type “Product metafield”.

Now the link works. Clicking a designer opens the filtered list with only that designer’s products, and the count updates.

If it still opens nothing

• The value in the product metafield must match exactly, including spaces and capital letters.
• Give it a minute after adding the filter. The storefront can lag briefly before it takes effect.

Regards,
Ploqo,

[Easify-Jennifer]

Hi @idahospudnut

Hi! This should be possible, and I think the setup in your screenshot is actually a great use case for Shopify product metafields.

The way I would approach it is to first separate the information into individual metafields. For example, you could create metafields for things such as Manufacturer, Designer, Fabric Type, Theme, Fabric Width, Fiber Content, and any other specifications that you want to show consistently across your products.

You would then fill in those values for each individual product. For example, one fabric product might have:

• Manufacturer: Cotton + Steel

• Designer: Rifle Paper Co.

• Fabric Type: Quilting Cotton

• Theme: Halloween Fabric

• Fabric Width: 43/44"

• Fiber Content: 100% Cotton

While another product could have completely different values. This makes it much easier to manage than manually adding the same information to every product description.

Once the metafields are created, check your product template in Online Store → Themes → Customize. Depending on the theme you’re using, you may be able to add text blocks, collapsible rows, or another suitable block and connect each one to the corresponding metafield using Shopify’s dynamic sources.

If your theme supports this, you may be able to build the entire section without editing any code. You could create something similar to your reference, with each specification displayed as a label on the left and the metafield value on the right.

One thing worth checking is whether some of the information already exists elsewhere in Shopify. For example, if you’re already using Product Type, Vendor, Collections, or Tags, you may not necessarily need to duplicate all of that information as metafields. For the more specific information—such as fabric width, fiber content, designer, or manufacturer—metafields would probably give you more flexibility and make the information easier to maintain as your catalog grows.

I’d also recommend thinking about whether each field should simply contain text or whether it would be more useful to use a reference metafield. For example, if you have the same manufacturer or designer appearing across many products, a reference-based setup can make it easier to manage consistently.

If the goal is purely to display product specifications, I would definitely start with Shopify’s native metafields rather than adding an app.

On the other hand, if some of these items are meant to become choices that customers actively select before purchasing—for example, choosing a fabric type, size, custom measurement, or another product specification—that would be a different use case. In that situation, an options solution such as Easify Custom Product Options can work alongside metafields: metafields can handle the product information you want to display, while the options handle the choices customers need to make.

So for the layout in your screenshot, I would start with native Shopify metafields + dynamic sources in the product template. That should give you the cleanest and easiest-to-maintain setup, and you can add custom options separately only if you need customer interaction.