Free Comparison Table Section for ShopifyNo app. Copy, paste, done.

Online Store 2.0
No app
Theme Check: 0 errors
MIT license

The Stackframes comparison table is a free Shopify section that shows how your product compares with the alternatives, row by row, using check marks, crosses or short text. Your column is highlighted in your accent colour. It is a real, accessible HTML table with no JavaScript, and scrolls sideways on small screens instead of squashing.

Live preview with sample content. Once installed, fonts follow your theme and colours are editable in the theme editor.

sections/sf-comparison-table.liquidLiquid

{%- if section.blocks.size > 0 or request.design_mode -%}
  <div
    class="sf-compare"
    style="--sf-compare-bg: {{ section.settings.background_color }}; --sf-compare-text: {{ section.settings.text_color }}; --sf-compare-accent: {{ section.settings.accent_color }}; --sf-compare-pt: {{ section.settings.padding_top }}px; --sf-compare-pb: {{ section.settings.padding_bottom }}px;"
  >
    <div class="sf-compare__inner">
      {%- if section.settings.heading != blank -%}
        <h2 class="sf-compare__heading">{{ section.settings.heading | escape }}</h2>
      {%- endif -%}
      {%- if section.settings.intro != blank -%}
        <div class="sf-compare__intro">{{ section.settings.intro }}</div>
      {%- endif -%}

      {%- if section.blocks.size > 0 -%}
        <div class="sf-compare__scroll" role="region" aria-label="{{ section.settings.heading | default: 'Comparison' | escape }}" tabindex="0">
          <table class="sf-compare__table">
            <thead>
              <tr>
                <th scope="col" class="sf-compare__corner"><span class="sf-compare__sr">Feature</span></th>
                <th scope="col" class="sf-compare__head sf-compare__head--ours">{{ section.settings.ours_label | escape }}</th>
                <th scope="col" class="sf-compare__head">{{ section.settings.theirs_label | escape }}</th>
              </tr>
            </thead>
            <tbody>
              {%- for block in section.blocks -%}
                <tr class="sf-compare__row" {{ block.shopify_attributes }}>
                  <th scope="row" class="sf-compare__feature">{{ block.settings.feature | escape }}</th>
                  {%- for side in (1..2) -%}
                    {%- if side == 1 -%}
                      {%- assign value = block.settings.ours -%}
                      {%- assign note = block.settings.ours_text -%}
                    {%- else -%}
                      {%- assign value = block.settings.theirs -%}
                      {%- assign note = block.settings.theirs_text -%}
                    {%- endif -%}
                    <td class="sf-compare__cell{% if side == 1 %} sf-compare__cell--ours{% endif %}">
                      {%- case value -%}
                        {%- when 'yes' -%}
                          <svg class="sf-compare__icon sf-compare__icon--yes" aria-hidden="true" focusable="false" viewBox="0 0 24 24" width="22" height="22"><path d="M5 12.5l4.5 4.5L19 7.5" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"/></svg>
                          <span class="sf-compare__sr">Yes</span>
                        {%- when 'no' -%}
                          <svg class="sf-compare__icon sf-compare__icon--no" aria-hidden="true" focusable="false" viewBox="0 0 24 24" width="22" height="22"><path d="M7 7l10 10M17 7L7 17" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round"/></svg>
                          <span class="sf-compare__sr">No</span>
                      {%- endcase -%}
                      {%- if note != blank -%}
                        <span class="sf-compare__note">{{ note | escape }}</span>
                      {%- endif -%}
                    </td>
                  {%- endfor -%}
                </tr>
              {%- endfor -%}
            </tbody>
          </table>
        </div>
      {%- else -%}
        <p class="sf-compare__empty">Add row blocks to build your comparison.</p>
      {%- endif -%}
    </div>
  </div>
{%- endif -%}

{% stylesheet %}
.sf-compare { background: var(--sf-compare-bg); color: var(--sf-compare-text); padding: var(--sf-compare-pt) 20px var(--sf-compare-pb); }
.sf-compare__inner { max-width: 880px; margin: 0 auto; }
.sf-compare__heading { margin: 0 0 12px; text-align: center; font-size: clamp(24px, 19px + 1.2vw, 36px); line-height: 1.15; }
.sf-compare__intro { margin: 0 auto 28px; max-width: 640px; text-align: center; opacity: 0.8; }
.sf-compare__intro > :first-child { margin-top: 0; }
.sf-compare__intro > :last-child { margin-bottom: 0; }
.sf-compare__scroll { overflow-x: auto; }
.sf-compare__scroll:focus-visible { outline: 2px solid var(--sf-compare-accent); outline-offset: 4px; }
.sf-compare__table { width: 100%; min-width: 480px; border-collapse: collapse; }
.sf-compare__table th, .sf-compare__table td { padding: 16px; border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); text-align: center; vertical-align: middle; }
.sf-compare__table .sf-compare__feature { text-align: left; font-weight: 500; }
.sf-compare__head { font-weight: 700; }
.sf-compare__head--ours { color: var(--sf-compare-accent); }
.sf-compare__table .sf-compare__cell--ours, .sf-compare__table .sf-compare__head--ours { background: color-mix(in srgb, var(--sf-compare-accent) 8%, transparent); }
.sf-compare__icon { display: inline-block; vertical-align: middle; }
.sf-compare__icon--yes { color: var(--sf-compare-accent); }
.sf-compare__icon--no { opacity: 0.6; }
.sf-compare__note { display: block; margin-top: 4px; font-size: 0.875em; opacity: 0.8; }
.sf-compare__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sf-compare__empty { margin: 0; padding: 24px; border: 1px dashed currentColor; border-radius: 8px; text-align: center; opacity: 0.7; }
{% endstylesheet %}

{% schema %}
{
  "name": "SF comparison table",
  "tag": "section",
  "class": "sf-compare-section",
  "disabled_on": { "groups": ["header", "footer"] },
  "max_blocks": 20,
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Why shoppers choose us" },
    { "type": "richtext", "id": "intro", "label": "Intro text" },
    { "type": "text", "id": "ours_label", "label": "Your column label", "default": "Us" },
    { "type": "text", "id": "theirs_label", "label": "Other column label", "default": "Others" },
    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "text_color", "label": "Text", "default": "#121212" },
    { "type": "color", "id": "accent_color", "label": "Accent", "default": "#15803d" },
    { "type": "color", "id": "background_color", "label": "Background", "default": "#ffffff" },
    { "type": "header", "content": "Spacing" },
    { "type": "range", "id": "padding_top", "label": "Top padding", "min": 0, "max": 100, "step": 4, "unit": "px", "default": 48 },
    { "type": "range", "id": "padding_bottom", "label": "Bottom padding", "min": 0, "max": 100, "step": 4, "unit": "px", "default": 48 }
  ],
  "blocks": [
    {
      "type": "row",
      "name": "Row",
      "settings": [
        { "type": "text", "id": "feature", "label": "Feature", "default": "Free returns" },
        {
          "type": "select",
          "id": "ours",
          "label": "Your value",
          "options": [
            { "value": "yes", "label": "Check mark" },
            { "value": "no", "label": "Cross" },
            { "value": "text", "label": "Text only" }
          ],
          "default": "yes"
        },
        { "type": "text", "id": "ours_text", "label": "Your text" },
        {
          "type": "select",
          "id": "theirs",
          "label": "Other value",
          "options": [
            { "value": "yes", "label": "Check mark" },
            { "value": "no", "label": "Cross" },
            { "value": "text", "label": "Text only" }
          ],
          "default": "no"
        },
        { "type": "text", "id": "theirs_text", "label": "Other text" }
      ]
    }
  ],
  "presets": [
    {
      "name": "SF comparison table",
      "blocks": [
        { "type": "row", "settings": { "feature": "Organic cotton", "ours": "yes", "theirs": "no" } },
        { "type": "row", "settings": { "feature": "Free returns", "ours": "yes", "ours_text": "30 days", "theirs": "text", "theirs_text": "14 days, paid" } },
        { "type": "row", "settings": { "feature": "Delivery", "ours": "text", "ours_text": "2–3 days", "theirs": "text", "theirs_text": "5–7 days" } },
        { "type": "row", "settings": { "feature": "Lifetime repairs", "ours": "yes", "theirs": "no" } },
        { "type": "row", "settings": { "feature": "Plastic-free packaging", "ours": "yes", "theirs": "no" } }
      ]
    }
  ]
}
{% endschema %}

Want it matched to your brand?We'll customise it for you

Check mark, cross or text for each cell
Your column highlighted in your accent colour
Semantic table with row and column headers
Scrolls sideways on phones instead of squashing
No JavaScript

/01 INSTALL

Add the Comparison Table to your theme

About two minutes. No app, no monthly fee.

Prefer a walkthrough? See the full installation guide.

STEP 01
Duplicate your theme
In Shopify admin go to Online Store → Themes. Next to your current theme click ⋯ → Duplicate. Make every change on the copy.
STEP 02
Create the section file
On the copy, click ⋯ → Edit code. In the sections folder click “Add a new section”, choose Liquid, name it sf-comparison-table and create it. Delete the starter code, paste ours, then click Save.
STEP 03
Add it to a page
Click Customize, open the template you want, click “Add section” and choose “SF comparison table”. Edit the text, blocks and colours in the sidebar, then Save.
STEP 04
Check it, then publish
Preview on mobile and desktop. When you are happy, publish the duplicate theme.

/02 SETTINGS

What you can change in the theme editor

Section settings
Setting	Type	Default
Heading	Text	Why shoppers choose us
Intro text	Rich text	—
Your column label	Text	Us
Other column label	Text	Others
Text	Colour	#121212
Accent	Colour	#15803d
Background	Colour	#ffffff
Top padding	Slider	48px
Bottom padding	Slider	48px

Row block settings
Setting	Type	Default
Feature	Text	Free returns
Your value	Dropdown	Check mark
Your text	Text	—
Other value	Dropdown	Cross
Other text	Text	—

This section is one piece of a custom theme.

We design and build complete Shopify themes around your brand.

See what we build

/03 QUESTIONS

Common questions

Can I compare with a named competitor?

You can rename the columns to anything. Keep claims accurate and verifiable, especially when naming another brand.

Can I add more columns?

This version compares two columns, which reads best on phones. If you need three or more products side by side, we can customise it for you.

Where does a comparison table work best?

On product pages below the description, or on landing pages for a hero product. Add it to either template in the theme editor.

Testimonials Carousel

Free testimonials carousel section for Shopify with star ratings, photos and swipeable cards. No autoplay, keyboard friendly, no slider library.

Trust Badges

Free trust badge section for Shopify: shipping, returns, secure checkout and support icons. Lightweight inline SVG, no JavaScript, no app.

FAQ Accordion

Copy-paste FAQ accordion section for Shopify. Keyboard accessible, adds FAQPage structured data, works on Online Store 2.0 themes. No app needed.

All free Shopify sections

NEED MORE THAN A SECTION?

Get a Shopify theme built around your brand

Custom sections, a full theme build, or changes to the theme you already have. Tell us what your store needs and we'll scope it with you.

Theme development services

Not affiliated with or endorsed by Shopify Inc. Shopify is a trademark of Shopify Inc.

Free Comparison Table Section for ShopifyNo app. Copy, paste, done.

Add the Comparison Table to your theme

Duplicate your theme

Create the section file

Add it to a page

Check it, then publish