← All sections
Us vs Them
A comparison table where your column glows and every check mark draws itself in.
Install
One file: sections/mf-comparison-table.liquid. It appears in the theme editor as EX · Us vs them.
- Connect EXPERAISE Sections to Claude (once). In Claude Code:In the Claude app: Settings → Connectors → Add custom connector →
claude mcp add --transport http experaise-sections https://sections.experaise.com/api/mcp --header "Authorization: Bearer YOUR_LICENSE_KEY"https://sections.experaise.com/api/mcp. Full setup - Ask Claude. It fetches
sections/mf-comparison-table.liquid, pushes only that file to your theme with Shopify CLI, and tells you where to find it.Install the EXPERAISE Sections section "Us vs Them" (comparison-table) on my Shopify store your-store.myshopify.com. Put it on an unpublished copy of my live theme, then tell me how to add it in the theme editor. - Customize. Online Store → Themes → Customize → Add section → EX · Us vs them. Every text, color and product is a setting.
Pro
The Liquid for Us vs Them is part of Unlimited
The live preview is free for everyone. Unlimited unlocks the installable file for every Pro section, Claude installs with your license key, and new drops every week.
Why it converts
Explicit, side-by-side differentiation answers "why you and not them" before the shopper leaves to compare elsewhere.
Specs
About this section
Us vs Them is a pro Shopify Online Store 2.0 section that compares your product with one or two alternatives in a real, accessible HTML table. Your brand column is a tall gradient card that runs the full height of the table, with a rotating light along its edge, a soft halo behind it, a badge such as Our formula on its top edge, and your logo or, when no logo is set, your store name as a wordmark. Competitor columns stay quiet and neutral. Each row is a block with a feature, an optional detail line and a value for every column: a check mark, a cross, or short text such as 15% or 14 days; text can also sit as a small note under an icon. When the table scrolls into view the card rises, rows appear in sequence, discs pop in and check marks draw their strokes. On desktop a glow on the card follows the cursor down the rows. Merchants set the eyebrow, heading with an italic serif accent, body text, a layout with the heading beside or above the table, column titles, a second competitor column toggle, a button with a note, screen-reader labels, padding and five colors. The conversion principle is explicit differentiation: shoppers who are comparing tabs get the answer on your page. On phones the table keeps its columns in a compact grid and hides the detail lines. Reduced motion shows everything at once. It ships as one self-contained .liquid file.
Questions
How do I add or edit comparison rows?
Each row is a Comparison row block. Enter the feature and an optional detail line, then choose Check mark, Cross or Text for your brand and each competitor. The Text field shows on its own when the value is Text, or as a small note under the icon. Up to twelve rows are supported, and you can reorder them by dragging.
Can I show only one competitor?
Yes. Untick Show a second competitor column and the table switches to three columns, with your highlighted column and the competitor column widened to use the space.
Is the table accessible to screen readers?
It is a real table with a caption, column headers and row headers, so screen readers announce each value with its feature and column. Check marks and crosses carry hidden text you can set in Screen reader labels, and all decorative layers are hidden from assistive technology.
How does it look on mobile?
The heading, table and button stack. The table keeps all columns side by side with a narrower feature column, smaller type and a slimmer highlighted card, and detail lines are hidden so every row stays short and easy to scan.