Try Hyper free

Comparison table 🔥

Showcase key differences between your related products. It’s ideal for highlighting specs, ingredients, usage, or benefits—especially in industries like skincare, electronics, wellness, and supplements.

How to add a Comparison table section to your Shopify store

Steps:

  1. In the theme editor (Customize), click Add section.

  2. Locate Comparison table section.

  3. Make necessary changes.

  4. Save.

How to customize a Comparison table section

Section settings

These settings affect the layout and overall appearance of the comparison table on your page.

General settings

  • Color scheme: Select predefined set of colors for the section. This color scheme affects the header and background of the section.

Section header

Customize the heading that appears above the table.

  • Layout

Header content

See settings

  • Text alignment: Align the text in the section to the Left, Center, or Right.

  • Text alignment on Mobile: Override desktop alignment settings specifically for mobile devices if needed.

  • Subheading: Add a short, secondary heading to complement the main heading. This can provide additional context or detail.

  • Heading: Enter the primary title for your banner.

  • Heading size: Adjust the size to fit your design preference and ensure readability. Choose from available heading sizes.

    ✍️ Add Highlighted text to your Headings

  • Text: Add a detailed explanation or summary for the banner. Use rich text formatting like bold, italic, links, and lists for better visual emphasis.

  • Text size: Select the size of the description text.

  • Button label: Input the text for the call-to-action button.

  • Button link: Add a link to the button to direct users to a specific page, product, or collection.

  • Button style: Choose a style for the button.

Table content

  • Icon size: Controls the size of the icons for each heading row.

  • Text line limit: Limits content height per cell to avoid overflow (No limits/ 1-5 lines).

  • Show view more button: Toggle this to show/hide an expandable button if content is clipped.

Block settings

The Comparison Table includes two block types:

Heading

Each heading defines a row in your comparison table (e.g., “Description,” “Skin Type,” “Usage”).

Heading block fields:

  • Icon: Choose from theme icons (chat, heart, check, etc.) for visual clarity.

  • Image (optional): Upload a custom icon.

  • Title: The row label (e.g., “Key Ingredients”).

💡 Best practices:

  • Use clear, relevant labels.

  • Keep titles short (1–3 words).

  • Max 10 heading rows supported.

Content

Each Content block represents a column in the table—linked to one specific product.

Content block fields

  • Product: Select the product to display in this column.

  • Text 1–10: Match each text field to a heading row. For example:

    • Text 1 → Description

    • Text 2 → Skin Type

    • Text 3 → Key Ingredients

    • And so on...

💡 Tip: You don’t need to fill all 10 text fields—only what matches your current comparison table headings.

🔁 Repeat this for each product you want to compare.

PreviousCollection tabsNextContact form

Last updated