Comparison Table

The Comparison Table section is a powerful conversion tool that lets you compare your product (or your plans) against the competition in a clear visual table. With 4 layout modes, 3 visual styles, 3 cell types (including a star rating system with half-stars), and a per-column color system, it is one of the most flexible sections in the theme.

Unlike a basic HTML table, this section is built to convince: column 1 is automatically highlighted, each column can have its own color scheme, and entrance animations guide the visitor's eye row by row.

Why use a comparison table?

A well-built comparison table is a major conversion driver. Here's why:

• Reduces decision friction: The visitor instantly sees why your product is superior without having to search for the information themselves
• Leverages comparison bias: Studies show that presenting a product alongside inferior alternatives increases perceived value by 30 to 60%
• Visually anchors superiority: Green checkmarks vs red crosses create an immediate visual signal, even before reading the text
• Justifies the price: If your product is more expensive, the table shows why -- features, quality, warranties -- in a factual way

Guide: Create your comparison table in 5 steps

Step 1: Choose your layout

The section_layout setting determines how the text content (title, description, button) is positioned relative to the table. There are 4 options:

To choose your layout, go to the Shopify editor, select the Comparison Table section, then change the Layout setting in the "Layout" group.

Step 2: Configure your columns

Each column represents a product, brand, or plan. You can have up to 4 columns.

Column 1 (your product) is always active and automatically highlighted visually with a "highlight" style. Columns 2, 3, and 4 each have a column_X_enabled checkbox to activate or deactivate them.

For each column, you can configure:

Features column header: The header text of the label column (first table column) is customizable via the label_column_header setting. By default it's "Features", but you can change it to "Criteria", "Capabilities", or any text relevant to your context.

Step 3: Add your comparison rows

Each row is a Comparison Row block. Add as many as needed via the "Add block" button in the Shopify editor, then choose "Comparison Row".

Each row has a label (the name of the feature being compared) and a type that determines how values are displayed across all columns for that row. There are 3 types:

"Check" type: Displays a green checkmark or a red cross per column. This is the most visual and fastest to read.

"Text" type: Displays free text per column. Useful for numeric values or short descriptions.

"Rating" type: Displays a rating out of 5 stars per column, with half-star support (precision to the tenth). Each column can have its own rating from 0 to 5.

Step 4: Choose your visual style

The table_style setting changes the table's overall appearance. There are 3 options:

The Border radius setting (border_radius, from 0 to 24px, default 12px) controls the corner rounding. It applies to the entire table in "rounded" mode and to each individual cell in "separated" mode. At 0px you get sharp corners; at 24px, very rounded corners.

Step 5: Customize the colors

Beyond the per-column color schemes (step 2), you have 3 custom colors that fine-tune the table's appearance:

The 4 layouts in detail

Stacked layout

Content (title, description, button) is displayed above the table, centered by default. The table takes up the full available width. This is the most classic layout, ideal for tables with many columns or rows.

When to use it: Dedicated comparison pages, pricing tables with 3-4 columns, landing pages where the table is the centerpiece.

Split layout

Content is displayed on the left and the table on the right, in a 50/50 grid on desktop (min-width: 990px). Content is left-aligned for natural reading flow. On mobile, the content moves above the table.

When to use it: Product pages, "Why choose us" sections with strong hook text and a CTA. Works especially well with 2 columns (Us vs Them).

Split reverse layout

Identical to split but mirrored: the table is on the left and content on the right. Useful for alternating visual layouts when you have multiple sections on the same page.

When to use it: When you already have a split section (text on the left) above, split reverse creates a visual zigzag rhythm that maintains interest.

Table only layout

The table is displayed alone, without any content block (Heading, Text, and Button blocks are ignored even if they exist). Use this mode when context is already provided by surrounding sections.

When to use it: When the table is inserted between other sections that already provide context. Avoids redundant content.

The 3 visual styles

Minimal style

The minimal style strips away all embellishments: no outer border, transparent background, no vertical separators between columns. Only very thin horizontal rules separate the rows. The hover effect is discreet (subtle background change).

Ideal for: Sites with minimalist design, sections on colored backgrounds, tables embedded in rich text content.

Rounded style

The default style. The table has an outer border with rounded corners (controllable via border_radius), a lightly colored header background, and horizontal separators between rows. This is the most balanced style.

Ideal for: Most use cases. Professional, readable, adapts to any store type.

Separated style

Each cell is an independent card with its own border and rounded corners. Spacing (border-spacing) separates the cells, creating a card grid effect. On hover, each cell rises slightly with a shadow (translateY -2px + box-shadow).

Ideal for: Short tables (3-5 rows), playful or creative designs, plan/pricing comparisons where each "card" can attract attention.

The 3 cell types

Check type (checkmark/cross)

Each column displays a green checkmark or a red cross based on a simple on/off toggle. This is the most impactful format for binary comparisons (the feature is present or absent).

The rendering includes:

• An animated SVG icon (appears with fade + scale)
• A subtle drop shadow on the icon color
• Hidden accessible text (screen readers) indicating "Yes" or "No"

Tip: Order your check rows so that your column displays the maximum checkmarks first. The first rows have the greatest visual impact.

Text type (free text)

Each column displays short text. Use this type for numeric values, descriptions, or anything that can't be summarized as yes/no.

Text value examples:

• "Unlimited" vs "5 GB"
• "24/7" vs "Mon-Fri 9am-5pm"
• "Lifetime warranty" vs "1 year"
• "Free shipping" vs "$9.90"

Rating type (stars)

Each column displays a rating out of 5 stars. The setting is a continuous slider from 0 to 5 with a step of 0.1, allowing ratings like 4.7 or 3.5.

The system handles 3 star states:

• Full star: Filled with the accent color, drop shadow
• Half star: Partial fill via SVG gradient (proportional to the tenth)
• Empty star: Outline only, muted color

Next to the stars, the numeric value is displayed in a rounded badge (e.g., "4.7"). This badge is hidden on mobile to save space.

in column 1 and 3.2 stars (3 full + 1 at 20%) in column 2, with numeric badges)

Label column visibility

The hide_label_column setting lets you hide the left column that displays the names of compared features. When hidden:

• The comparison columns take up the full width
• Width distribution recalculates automatically (50/50 for 2 columns, 33/33/33 for 3, etc.)
• Labels are no longer visible, so the visitor must understand values from context

When to hide labels: When column names and values are self-explanatory (for example, a simple "Us vs Them" with checkmarks), or when the table is used alongside descriptive text (split layout).

When to keep labels: For detailed tables with many rows where the values alone aren't enough to understand what's being compared.

Complete configuration reference

Content settings

Layout settings

Per-column settings

Each column (1 to 4) has the following settings:

Custom color settings

Global settings

The section also includes the theme's global settings (margins, color palette, visibility, separators) via {{GLOBAL_SETTINGS}}, as well as animation settings via {{SECTION_ANIMATIONS}} and {{ANIM_HAS_ITEM}}.

Available blocks

Heading block

Section title, displayed above or beside the table depending on the layout. Supports a subtitle, different heading sizes, and standard animations.

Text block

Description paragraph. Use it to give context to the table: why your product is superior, what the visitor should focus on, etc.

Button block

CTA (call to action) button. Placed below the text, it directs the visitor to the desired action after reviewing the table (product page, pricing page, add to cart).

Comparison Row block

This is the main block. Each instance adds a row to the table.

Conditional settings per column (for each column 1-4):

App block

A generic block for integrating third-party Shopify apps into the section.

Configuration examples

E-commerce: "Us vs The Competition"

Ideal setup for a product page or brand landing page:

• Layout: Split (catchy text on the left, table on the right)
• Style: Rounded with 12px border-radius
• Columns: 2 (column 1 = your brand, column 2 = "Other Brands")
• Labels hidden: Yes (hide_label_column: true)
• Rows (6-8 check type rows):
  • Natural ingredients: check / cross
  • No additives: check / cross
  • Lab tested: check / cross
  • Free shipping: check / cross
  • Satisfaction guarantee: check / cross
  • Made in the USA: check / cross
• Color scheme: Column 1 in scheme-1 (accent), column 2 in scheme-2 (neutral)

SaaS: Pricing table

Setup for comparing pricing plans:

• Layout: Stacked (centered title, full-width table)
• Style: Separated (each cell as a card)
• Columns: 3 (Starter, Pro, Enterprise)
• Labels visible: Yes
• Rows (mix of types):
  • Price: text type ("$9/month", "$29/month", "$99/month")
  • Users: text type ("1", "10", "Unlimited")
  • Email support: check type (check / check / check)
  • Priority support: check type (cross / check / check)
  • API: check type (cross / cross / check)
  • Satisfaction: rating type (4.2 / 4.7 / 4.9)
• Color scheme: Column 2 (Pro) in accent to highlight it as the recommended plan

Wellness: Comparison with ratings

Setup that leverages the star system for a nuanced comparison:

• Layout: Stacked
• Style: Rounded
• Columns: 3 (your product + 2 competitors)
• Labels visible: Yes, header "Criteria"
• Rows (all rating type):
  • Effectiveness: 4.9 / 3.5 / 4.0
  • Taste: 4.7 / 3.0 / 3.8
  • Ingredients: 5.0 / 2.5 / 3.2
  • Value for money: 4.5 / 3.8 / 3.5
• Images: Each brand's logo in the header

Mixed: Complete comparison

For dedicated comparison pages, combine all 3 types:

• Layout: Stacked (detailed full-width table)
• Style: Rounded
• Columns: 4 (your product + 3 competitors)
• Rows (full mix):
  • GMO-free guaranteed: check type
  • Vitamin C content: text type ("500mg", "200mg", "300mg", "150mg")
  • Customer rating: rating type (4.8, 3.9, 4.1, 3.5)
  • Free shipping: check type
  • Price: text type ("$24.90", "$19.90", "$22.90", "$29.90")

Mobile behavior

The table adapts to small screens with several automatic adjustments:

• Horizontal scroll: The table container becomes horizontally scrollable with -webkit-overflow-scrolling: touch for smooth native scrolling on iOS
• Styled scrollbar: A thin, discreet scrollbar appears at the bottom of the table (8px height, muted color)
• Reduced sizes: Font sizes drop to --text-xs, padding is reduced
• Images hidden: Images in each column header are hidden (display: none) to save space
• Subtitles hidden: Column subtitles are also hidden on mobile
• Rating badge hidden: The numeric value next to the stars is hidden, only the stars remain
• Smaller stars: Stars go from 20px to 12px, and spacing tightens
• Separated style adapted: Cell spacing decreases to 0.375rem
• Reduced corners: In separated mode, the cell border-radius is reduced to 60% of its desktop value

Animations

The section supports the theme's animation system. Each table row can be animated individually as it enters the viewport, creating an elegant staggered (cascade) effect.

Animation settings are injected via {{SECTION_ANIMATIONS}} and {{ANIM_HAS_ITEM}}. Each Comparison Row block also includes {{BLOCK_ANIMATION}} for fine-grained per-row control.

Accessibility

The section is built with accessibility in mind:

• The table uses semantic tags: <table>, <thead>, <tbody>, <th>, <td>
• Row labels use <th scope="row"> to properly identify the scope
• Check/cross icons have aria-hidden="true" and a <span class="visually-hidden"> with the text "Yes" or "No"
• Ratings have role="img" and a descriptive aria-label indicating the score (e.g., "4.7 out of 5 stars")
• Header images have an alt attribute based on the column title

Best practices

Next steps

• Image Before/After -- For visual before/after comparisons
• Reviews Carousel -- Add customer testimonials to reinforce the comparison
• Steps -- Show the process after the visitor has chosen your product
• Collapsible Content / FAQ -- Detail the features that the table summarizes