modblo, modular sections, better stores
Browse
FreeNewBlockContent

Spec Table

Clean two-column key/value table for product specs, materials, care.

#spec#table#pdp#details#custom-liquid

Live preview

See it in action.

Fully interactive, drag, click, scroll inside the frame, toggle to mobile.

About this block

A minimal specifications table for the lower half of a PDP. Two-column layout on desktop, stacked on mobile. Use for materials, dimensions, care instructions, ingredients, shipping & returns summary, or anything that benefits from key/value formatting.

Install in 90 seconds

  1. 01

    Open your Shopify admin and go to Online Store → Themes → Customize.

  2. 02

    On any template, click "Add section" where you want the block to appear.

  3. 03

    Choose "Custom Liquid" from the section list.

  4. 04

    Paste the code from this page into the Custom Liquid setting and click Save.

  5. 05

    Edit text and colors directly in the code (look for the comments marking edit points).

The code

Paste the snippet below into the Custom Liquid setting on a Custom Liquid section in your Theme Editor. Edit text, colors, and links directly in the code, every editable spot is marked with an EDIT comment.

modblo-spec-table.liquid
{%- comment -%}
  modblo. Spec Table Block
  Paste into a Shopify "Custom Liquid" section via Theme Editor.
  Clean two-column key/value table for product specs, ingredients,
  shipping info, return policy summary, etc.
{%- endcomment -%}

<style>
  .modblo-spec { background:#fff; color:#0b0b0c; padding:clamp(40px,6vw,72px) 0; }   /* EDIT colors */
  .modblo-spec__inner { max-width:720px; margin:0 auto; padding:0 24px; }
  .modblo-spec__h {
    font-size:clamp(20px,2.4vw,26px); letter-spacing:-.02em;
    margin:0 0 24px; text-align:center;
  }
  .modblo-spec__table { width:100%; border-collapse:collapse; }
  .modblo-spec__row {
    display:grid; grid-template-columns:160px 1fr; gap:16px;
    padding:14px 0;
    border-bottom:1px solid #ececec;
  }
  .modblo-spec__row:last-child { border-bottom:0; }
  .modblo-spec__key {
    font-size:13px; font-weight:600; opacity:.6;
    text-transform:uppercase; letter-spacing:.08em;
  }
  .modblo-spec__val {
    font-size:14px; line-height:1.5; color:#0b0b0c;
  }
  @media (max-width:540px) {
    .modblo-spec__row { grid-template-columns:1fr; gap:4px; padding:12px 0; }
  }
</style>

<section class="modblo-spec">
  <div class="modblo-spec__inner">
    <h2 class="modblo-spec__h">Specifications</h2>                          {%- comment -%} EDIT heading {%- endcomment -%}

    <div class="modblo-spec__table">
      {%- comment -%} EDIT each row: duplicate, change key + value {%- endcomment -%}
      <div class="modblo-spec__row">
        <div class="modblo-spec__key">Material</div>
        <div class="modblo-spec__val">60% merino wool, 40% Tencel modal blend</div>
      </div>
      <div class="modblo-spec__row">
        <div class="modblo-spec__key">Weight</div>
        <div class="modblo-spec__val">240 gsm midweight</div>
      </div>
      <div class="modblo-spec__row">
        <div class="modblo-spec__key">Origin</div>
        <div class="modblo-spec__val">Knit in Portugal, finished in New York</div>
      </div>
      <div class="modblo-spec__row">
        <div class="modblo-spec__key">Care</div>
        <div class="modblo-spec__val">Machine wash cold, lay flat to dry. Do not bleach.</div>
      </div>
      <div class="modblo-spec__row">
        <div class="modblo-spec__key">Fit</div>
        <div class="modblo-spec__val">True to size. Size up for relaxed fit.</div>
      </div>
    </div>
  </div>
</section>

What you can customize

Custom Liquid sections don't expose theme-editor settings, so customization happens in the code. Here's what to edit:

WhatHow to edit
HeadingFind the value in the code and change it directly.
Each rowDuplicate one .modblo-spec__row and change the key + value.

SEO & accessibility notes

  • Pure semantic HTML, every row is fully crawlable for SEO.
  • Stacks cleanly on mobile via CSS grid, no JS needed.
  • No animations, no scripts, zero bytes of JavaScript.

Related

Pairs nicely with

Browse all
Free
Content

Icon Feature Cards

Three-up icon + title + text grid, pastes into Custom Liquid.

100 perf·beginner
Free
Free
Trust

Trust Badges

Compact horizontal trust strip, pastes into Custom Liquid.

100 perf·beginner
Free
Free
Content

Image with Text

Editorial side-by-side image and text, pastes into Custom Liquid.

100 perf·beginner
Free