Us vs others table.

Q: What should a comparison table include?

Three to ten things buyers check before they pay, like fabric, size exchange or where it’s made. Keep only rows you can back up with a label or photo.

Q: Can I name a competitor brand?

Don’t. Compare against “others” or a type of product. Naming a brand invites a dispute and reads as an attack.

Q: Does it scroll sideways on mobile?

No. It uses three fixed columns that fit a small screen, with no tiny text.

Q: Will it work with my theme?

It works on any Online Store 2.0 theme, including Dawn and its variants. Older themes need the code placed in the product template by hand.

A clean comparison of your product against the usual alternative, with a mobile layout that doesn’t scroll sideways. Every row is something you can prove.

The short answer

The us vs others table is a free Shopify section that compares your product with the usual alternative, row by row, with ticks. Buyers on a product page are already comparing, often in another tab. Name a type of product, not a rival brand, and only list rows you can prove.

Who it’s for: Products that cost more than the market option and need to say why.
How it works: Add a row per feature, tick each side, place it below the photos.

Live demo · fits a phone

Handblock cotton kurta

Demo product · sizes XS–3XL

₹1,299~~₹1,799~~

Why buyers pick us

UsOthers

Cotton, 180 GSM✓–

Free size exchange✓–

Made in India✓✓

You pay₹1,299

Add to cart

Demo only. Your rows and ticks are set in the section settings.

sections/us-vs-others.liquidLiquid · CSS

{% comment %} Us vs others table · thedwarkesh.com {% endcomment %}
<div class="uvo" id="uvo-{{ section.id }}">
  {%- if section.settings.heading != blank %}<h2 class="uvo-h">{{ section.settings.heading }}</h2>{% endif %}
  <div class="uvo-grid" role="table" aria-label="{{ section.settings.heading | escape }}">
    <div class="uvo-row uvo-head" role="row">
      <span role="columnheader"><span class="visually-hidden">Feature</span></span>
      <span class="uvo-us" role="columnheader">{{ section.settings.us_label }}</span>
      <span role="columnheader">{{ section.settings.them_label }}</span>
    </div>
    {%- for block in section.blocks -%}
      <div class="uvo-row" role="row" {{ block.shopify_attributes }}>
        <span role="rowheader">{{ block.settings.feature }}</span>
        <span class="uvo-us" role="cell">{% if block.settings.us %}<b aria-label="Yes">✓</b>{% else %}<i aria-label="No">–</i>{% endif %}</span>
        <span role="cell">{% if block.settings.them %}<b aria-label="Yes">✓</b>{% else %}<i aria-label="No">–</i>{% endif %}</span>

Full code is freeGet it with your WhatsApp and email

What it does

The choice, made obvious.

Buyers compare anyway, usually in another tab. Do it for them, fairly, on your own page.

Compares

Row by row

Up to ten features, a tick or a dash on each side. Rename the columns to suit your product.

Fits

On a phone

Three fixed columns that fit a small screen. No sideways scrolling, no tiny text.

Stays

Fair

Compare against “others”, not a named brand, and keep the rows where they match you.

Install in 5 minutes

Three steps. No developer.

Add the file
Online Store → Themes → Edit code. In Sections, add us-vs-others.liquid and paste the code.
Place it
Open Customize on a product page and add the section below the photos or reviews.
Add your rows
Add a row per feature and tick each side. Keep only rows you can back up with a label or photo.

Questions

About this section

What should a comparison table include?

Can I name a competitor brand?

Does it scroll sideways on mobile?

Will it work with my theme?

Rather click than paste?

This section and the rest come in the free section app. Add them from the theme editor, no code.

Install the section app All sections

Us vs others table.

Handblock cotton kurta

Get the code