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:
In the theme editor (Customize), click Add section.
Locate Comparison table section.
Make necessary changes.
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.
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.
Last updated