Product comparison section
The Product comparison section in Seventh shows a table that compares the products you choose, row by row: price, rating, metafields and more.
Applies to: Seventh 4.0.0 and later. Added in: Seventh 4.0.0. Last checked: 2026-10-12 against Seventh 4.0.0.
The Product comparison section shows a table that compares up to 4 products you choose, side by side. Each row is one attribute: price, vendor, rating, description, variants, a metafield or an attribute meter. You can add it to any page, including product pages.
Where to find it: select Add section in the theme editor, then choose Product comparison (category Products).
Since Seventh 4.0.0. The release notes call this section "Product comparison (static)". The comparison that customers build themselves from the collection grid is a separate template, documented in Product comparison page. Both use the same Comparison table and row blocks, documented on this page.
What it shows
- A section header, with a Caption and a Heading block in the preset. See General section styling.
- One Comparison table block. Its first row shows each product's image and title. Every block you add inside the table becomes one more row.
With no products selected, the section shows 4 placeholder columns so you can design the table first. On the storefront, a table wider than the screen scrolls sideways.
Comparison table
The Comparison table block sets the style of the whole table. Add rows with Add block inside it:
- Product description: the product description, shortened or in full.
- Product price: the price of the selected or first available variant.
- Product vendor: the product vendor.
- Product rating: star rating from a reviews app.
- Product metafield: the value of any product metafield.
- Product link: a button that opens the product page.
- Attribute meter: a segmented bar, for example for fit, strength or water resistance.
- Product variants: each option name with all its values, for example "Size: S, M, L".
The preset adds the Vendor, Description, Price and Product link rows. The row blocks only have a Heading: the row label shown in the first column when Show table headings is on.
Product rating row
- It reads the standard
reviews.ratingandreviews.rating_countproduct metafields that review apps write. - A product without a rating shows the Empty fields label.
Attribute meter row
- It has the meter settings of the Attribute meter block, without its typography settings.
- The Active segment metafield is read from each compared product, so every column can show its own value.
Comparing products by a metafield
The Product metafield row shows one metafield value per product, for example material, case size or weight. The metafield must exist in Shopify admin first.
Create the metafield
Open Shopify admin → Settings → Metafields and metaobjects → Products and add a metafield definition, for example custom.material.
Fill in the values
Open each product you compare in Shopify admin and enter its value in the new metafield.
Add the row
In the theme editor, select the Comparison table inside the Product comparison section, select Add block and choose Product metafield.
Enter the reference
Set Heading to the row label, for example "Material", and type the metafield as namespace.key in Metafield, for example custom.material. Products without a value show the Empty fields label.
The row formats the value by metafield type: numbers with units, true or false as Yes or No, dates, colors, links, references and lists. See Shopify's metafields documentation for creating definitions.
Why does the comparison table show placeholder products?
Because Products is empty. Select up to 4 products in Products. The placeholders only show when no product is selected.
Why does the current product not appear first?
Because Show current product first works only when the section is on a product page. There, the current product becomes the first column. If it is not in Products, Seventh adds it as an extra column.
Can I compare more than 4 products?
No. Seventh does not support more than 4 products in Products. Add a second Product comparison section for another group of products.
All Product comparison settings
Every setting on this page, one list per section or block, with its type and default.
Accepts these blocks: Comparison table.
Products (products picker, up to 4): Sets the products to compare. Each product is one column of the table.
Show table headings (checkbox, default: on): Shows the first column with the row labels (the Heading of each row block). When off, the table shows only the product columns.
Show current product first (checkbox, default: off): Shows the product of the current product page as the first column. If that product is not in Products, Seventh adds it as an extra column. Only works when the section is added to a product page.
Empty fields label (text field, default: "-"): Sets the text shown in a cell when a product has no value for that row, for example no vendor, no rating or an empty metafield.
Image aspect ratio (dropdown, default: Square (1:1)): Sets the shape of the product images in the first row of the table. In Seventh 4.0.0, Natural shows the images as squares. Options: Natural, Short (4:3), Square (1:1), Tall (5:6), Taller (2:3).
Product comparison section: Section design
Where to find it: Product comparison → Section design
The Product comparison section uses the standard Section design settings, listed in General section styling. Not available in this section: Extend section width to the edges of the screen.
Color scheme (color scheme, default: Scheme 1).
Top padding (dropdown, default: Default). Options: Default, None, Smaller, Larger, Largest.
Bottom padding (dropdown, default: Default). Options: Default, None, Smaller, Larger, Largest.
Show media background (checkbox, default: off): Shows a background image or video behind the section content.
Background image (image). Shown only when Show media background is on.
Background image (mobile) (image): Replaces the background image on screens narrower than 768 px. Shown only when Show media background is on and Background image is set.
Background video (video): Plays a muted, looping video behind the section content. When both a video and an image are set, the video is shown. Shown only when Show media background is on.
Media overlay (dropdown, default: Color): Sets the layer over the background media: a flat color or a gradient. Options: Color, Gradient. Shown only when Show media background is on.
Overlay color (color with transparency). Shown only when Show media background is on and Media overlay is Color.
Overlay gradient (gradient, default: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%)). Shown only when Show media background is on and Media overlay is Gradient.
Parallax effect (dropdown, default: Medium): Moves the background media at a different speed than the page while customers scroll. Subtle, Medium and Strong move it by up to 5, 10 and 20 percent. Options: None, Subtle, Medium, Strong. Shown only when Show media background is on.
Push content down (checkbox, default: off): Replaces Top padding with a larger top space, so more of the background media shows above the content. Shown only when Show media background is on.
Make section full height (checkbox, default: off): Makes the section at least as tall as the screen and centers the content vertically.
Where to find it: Products → compare → Product comparison → Comparison table.
Accepts these blocks: Product description, Product price, Product vendor, Product rating, Product metafield, Product link, Attribute meter and Product variants.
Comparison table block: Style
Where to find it: Products → compare → Product comparison → Comparison table → Style
Text alignment (alignment, default: Left).
Padding (dropdown, default: XSmall): Sets the space inside each table cell. Options: XSmall, Small, Regular.
Corner radius (dropdown, default: Slighty rounded): Sets the corner rounding of the table. Options: None, Slighty rounded, Rounded.
Color scheme (color scheme, default: Scheme 1): Sets the background, text and border colors of the table.
Where to find it: Products → compare → Product comparison → Comparison table → Product description.
Displays description from parent product.
Heading (text field, default: "Description"): Sets the row label shown in the first column.
Truncate description (dropdown, default: Show a small excerpt): Sets how much of the description shows: a small excerpt is 10 words, a medium excerpt 30 words and a large excerpt 40 words, as plain text. Don't truncate shows the full description with its formatting. Options: Don't truncate, Show a small excerpt, Show a medium excerpt, Show a large excerpt.
Where to find it: Products → compare → Product comparison → Comparison table → Product price.
Heading (text field, default: "Price"): Sets the row label shown in the first column. The row shows the price of the selected or first available variant.
Where to find it: Products → compare → Product comparison → Comparison table → Product vendor.
Heading (text field, default: "Vendor").
Where to find it: Products → compare → Product comparison → Comparison table → Product rating.
Heading (text field, default: "Rating"): Sets the row label shown in the first column. The stars come from the reviews.rating metafield that review apps write.
Where to find it: Products → compare → Product comparison → Comparison table → Product metafield.
Heading (text field, default: "Text"): Sets the row label shown in the first column, for example Material.
Metafield (text field): Sets the product metafield to show, written as namespace.key, for example custom.material. Products without a value show the Empty fields label.
Where to find it: Products → compare → Product comparison → Comparison table → Product link.
Heading (text field): Sets the row label shown in the first column. Leave it empty for a row with only buttons.
Label (text field, default: "View product"): Sets the text of the button that opens each product page.
Where to find it: Products → compare → Product comparison → Comparison table → Attribute meter.
Heading (text field, default: "Attributes"): Sets the row label shown in the first column.
Attribute meter block: Content
Where to find it: Products → compare → Product comparison → Comparison table → Attribute meter → Content
Segments (slider 1 to 10, default: 9): Sets the total number of segments in the meter, from 1 to 10.
Active segment (slider 1 to 10, default: 6): Sets the highlighted segment when no metafield value is found for a product.
Dynamic segments label.
Active segment metafield (text field): Sets a number metafield, written as namespace.key, that holds the active segment for each product, for example custom.active_segment_value. When a product has a value, it replaces Active segment for that product.
Active segment color (color, default: #000000): Sets the color of the active segment. The other segments use the text color at a lower opacity.
Fill segments up to active segment (checkbox, default: off): Highlights every segment up to the active one, instead of only the active segment.
Remove space between segments (checkbox, default: off): Joins the segments into one continuous bar.
Segments height (slider 3 to 10, default: 6): Sets the height of the meter, from 3 to 10 px.
Show active segments value (checkbox, default: off): Shows the active value as a number above the meter, for example 6/9.
Start label (text field): Sets the label under the start of the meter.
Middle label (text field): Sets the label under the middle of the meter.
End label (text field): Sets the label under the end of the meter.
Where to find it: Products → compare → Product comparison → Comparison table → Product variants.
Heading (text field, default: "Variants"): Sets the row label shown in the first column. The row lists each product option with all its values, for example Size: S, M, L. Products without variants show the Empty fields label.
Related pages
- Product comparison page: the comparison customers build from the collection grid.
- Collection filters and sorting: where Enable comparing turns on the compare checkboxes.
- Attribute meter block: the same meter as a block for product pages and cards.
- General section styling: the Section design settings of this section.