A comparison table across up to four products, measured on rows you define — strength, texture, frequency, pairing, or anything else. Renders as a real HTML table with a sticky first column.
Merchant-addable
Yes
Settings
50
Block types
1
Max blocks
4
File
sections/formula-comparison.liquid
Used by default on: Home , Product , Product (stage)
Screenshots pending
Captures for Formula comparison at desktop and mobile widths are generated from a live store by
npm run shots. They appear here automatically once that has run.
When to use it
When customers ask "which one is right for me" and the answer depends on more than price. Strongest on a collection page or a dedicated comparison page.
Setting it up
Add the section and write the heading and intro under Content.
Define your measures under Comparison rows. These become the table rows and apply to every product in the table, so pick measures every product can actually answer.
Add one Formula block per product, up to four. Each block picks a product and fills in that product's answer for each row.
Configure the Call to action group if you want a button under the table.
Check it on a phone — the table scrolls sideways and the first column stays pinned.
Give each row a Value source so the table fills from each product's category attributes rather than typed text. The first three rows ship pointed at real attributes already. See Per-product content.
Where the content comes from
Product references come from Shopify product data. The measures and each product's answers are block content, because they are specific to this comparison, not facts on the product record.
Notes and cautions
Four products is the maximum and three is usually better. A comparison a customer cannot hold in their head does not help them decide.
Because it is a semantic table, screen readers announce row and column relationships properly. Do not replace it with a card grid to save vertical space.
Section settings
Every setting on the section itself, in the order it appears in the theme editor. Group headings
match the editor's own grouping.
Content
EyebrowText
ID
eyebrow
Default
Formula comparison
HeadingText
ID
heading
Default
Compare the formulas
Heading sizeDropdown
ID
heading_size
Default
Large
Smallsmall
Mediummedium
Largelarge
SubheadingRich text
ID
subheading
Default
<p>Read two to four products across the same rows, so the right choice is easy to see.</p>
Content alignmentDropdown
ID
content_alignment
Default
Left
Leftleft
Centercenter
Comparison rows
Label column titleText
Optional text shown at the top of the left column.
ID
label_column_title
Tags shown per cellSlider
Extra tags collapse behind a control that customers can expand. Applies to rows using the tags style.
ID
tag_limit
Default
3
Range
2 to 6, in steps of 1
Row 1 headingText
ID
heading_1
Default
Benefit
Value sourceDropdown
Fills this row from each product automatically. The typed value for a product is used when it has no data for the attribute.
ID
row_attribute_1
Default
Skin care effect
Shown when
heading_1 is set
Manual value (same on every product)manual
Skin typesuitable-for-skin-type
Skin care effectskin-care-effect
Skin care featuresskin-care-features
Active ingredientsactive-ingredient
Constitutive ingredientsconstitutive-ingredients
Cosmetic functioncosmetic-function
Ingredient originingredient-origin
Product formproduct-form
Moisturizer typemoisturizer-type
Texturetexture
pH levelph-level
Fragrance levelfragrance-level
SPF levelspf-level
UVA protection gradeuva-protection-grade
Certifications and standardsproduct-certifications-standards
Row 1 value styleDropdown
ID
row_style_1
Default
Text
Shown when
heading_1 is set
Texttext
Tagstags
Time of dayschedule
Strength meterstrength
Row 2 headingText
ID
heading_2
Default
Best for
Value sourceDropdown
Fills this row from each product automatically. The typed value for a product is used when it has no data for the attribute.
ID
row_attribute_2
Default
Skin type
Shown when
heading_2 is set
Manual value (same on every product)manual
Skin typesuitable-for-skin-type
Skin care effectskin-care-effect
Skin care featuresskin-care-features
Active ingredientsactive-ingredient
Constitutive ingredientsconstitutive-ingredients
Cosmetic functioncosmetic-function
Ingredient originingredient-origin
Product formproduct-form
Moisturizer typemoisturizer-type
Texturetexture
pH levelph-level
Fragrance levelfragrance-level
SPF levelspf-level
UVA protection gradeuva-protection-grade
Certifications and standardsproduct-certifications-standards
Row 2 value styleDropdown
ID
row_style_2
Default
Tags
Shown when
heading_2 is set
Texttext
Tagstags
Time of dayschedule
Strength meterstrength
Row 3 headingText
ID
heading_3
Default
Format
Value sourceDropdown
Fills this row from each product automatically. The typed value for a product is used when it has no data for the attribute.
ID
row_attribute_3
Default
Product form
Shown when
heading_3 is set
Manual value (same on every product)manual
Skin typesuitable-for-skin-type
Skin care effectskin-care-effect
Skin care featuresskin-care-features
Active ingredientsactive-ingredient
Constitutive ingredientsconstitutive-ingredients
Cosmetic functioncosmetic-function
Ingredient originingredient-origin
Product formproduct-form
Moisturizer typemoisturizer-type
Texturetexture
pH levelph-level
Fragrance levelfragrance-level
SPF levelspf-level
UVA protection gradeuva-protection-grade
Certifications and standardsproduct-certifications-standards
Row 3 value styleDropdown
ID
row_style_3
Default
Text
Shown when
heading_3 is set
Texttext
Tagstags
Time of dayschedule
Strength meterstrength
Row 4 headingText
ID
heading_4
Default
When to use
Value sourceDropdown
Fills this row from each product automatically. The typed value for a product is used when it has no data for the attribute.
ID
row_attribute_4
Default
Manual value (same on every product)
Shown when
heading_4 is set
Manual value (same on every product)manual
Skin typesuitable-for-skin-type
Skin care effectskin-care-effect
Skin care featuresskin-care-features
Active ingredientsactive-ingredient
Constitutive ingredientsconstitutive-ingredients
Cosmetic functioncosmetic-function
Ingredient originingredient-origin
Product formproduct-form
Moisturizer typemoisturizer-type
Texturetexture
pH levelph-level
Fragrance levelfragrance-level
SPF levelspf-level
UVA protection gradeuva-protection-grade
Certifications and standardsproduct-certifications-standards
Row 4 value styleDropdown
ID
row_style_4
Default
Time of day
Shown when
heading_4 is set
Texttext
Tagstags
Time of dayschedule
Strength meterstrength
Row 5 headingText
ID
heading_5
Default
Size
Value sourceDropdown
Fills this row from each product automatically. The typed value for a product is used when it has no data for the attribute.
ID
row_attribute_5
Default
Manual value (same on every product)
Shown when
heading_5 is set
Manual value (same on every product)manual
Skin typesuitable-for-skin-type
Skin care effectskin-care-effect
Skin care featuresskin-care-features
Active ingredientsactive-ingredient
Constitutive ingredientsconstitutive-ingredients
Cosmetic functioncosmetic-function
Ingredient originingredient-origin
Product formproduct-form
Moisturizer typemoisturizer-type
Texturetexture
pH levelph-level
Fragrance levelfragrance-level
SPF levelspf-level
UVA protection gradeuva-protection-grade
Certifications and standardsproduct-certifications-standards
Row 5 value styleDropdown
ID
row_style_5
Default
Text
Shown when
heading_5 is set
Texttext
Tagstags
Time of dayschedule
Strength meterstrength
Row 6 headingText
ID
heading_6
Default
Strength
Value sourceDropdown
Fills this row from each product automatically. The typed value for a product is used when it has no data for the attribute.
ID
row_attribute_6
Default
Manual value (same on every product)
Shown when
heading_6 is set
Manual value (same on every product)manual
Skin typesuitable-for-skin-type
Skin care effectskin-care-effect
Skin care featuresskin-care-features
Active ingredientsactive-ingredient
Constitutive ingredientsconstitutive-ingredients
Cosmetic functioncosmetic-function
Ingredient originingredient-origin
Product formproduct-form
Moisturizer typemoisturizer-type
Texturetexture
pH levelph-level
Fragrance levelfragrance-level
SPF levelspf-level
UVA protection gradeuva-protection-grade
Certifications and standardsproduct-certifications-standards
Row 6 value styleDropdown
ID
row_style_6
Default
Strength meter
Shown when
heading_6 is set
Texttext
Tagstags
Time of dayschedule
Strength meterstrength
Price row labelText
ID
price_label
Default
Price
Call to action
Show the View product buttonCheckbox
ID
show_view_product
Default
On
View product button labelText
ID
view_product_label
Default
View product
Shown when
show_view_product
Style
Color schemeColor scheme
ID
color_scheme
Default
scheme-1
Label column widthSlider
ID
label_column_width
Default
200
Range
140px to 280px, in steps of 4px
Label illustrationDropdown
Show a decorative line illustration at the top of the label column.
ID
label_illustration
Default
Leaf
Nonenone
Botanical branchbotanical
Leafleaf
Mushroommushroom
Dropletsdroplets
Sunsun
Customcustom
Custom illustrationImage
Use a transparent PNG line illustration. 400 x 720px recommended.
ID
label_illustration_image
Shown when
label_illustration is 'custom'
Illustration rotationSlider
ID
label_illustration_rotation
Default
0
Range
-30° to 30°, in steps of 1°
Shown when
label_illustration is not 'none'
Illustration horizontal shiftSlider
ID
label_illustration_shift_x
Default
0
Range
-40% to 40%, in steps of 2%
Shown when
label_illustration is not 'none'
Illustration vertical shiftSlider
ID
label_illustration_shift
Default
0
Range
-40% to 40%, in steps of 2%
Shown when
label_illustration is not 'none'
Space between cardsSlider
ID
column_gap
Default
20
Range
8px to 40px, in steps of 2px
Use custom corner radiusCheckbox
ID
use_custom_corner_radius
Default
Off
Corner radiusSlider
ID
corner_radius
Default
16
Range
0px to 32px, in steps of 2px
Shown when
use_custom_corner_radius
Animate on scrollCheckbox
Reveal the comparison as it scrolls into view. Respects the theme motion settings.
ID
enable_entrance_animation
Default
On
Padding
Top paddingSlider
ID
padding_top
Default
64
Range
0px to 120px, in steps of 4px
Bottom paddingSlider
ID
padding_bottom
Default
64
Range
0px to 120px, in steps of 4px
Blocks
Blocks are added, reordered, duplicated, and removed inside the section. Each type has its
own settings.
Formula formulamax 4
ProductProduct
Title, image, link, and price are read from this product.
ID
product
Highlight labelText
Feature this product with a short label, such as Most loved. Leave blank for none.