Product comparison page
The Product comparison page in Seventh builds a comparison table from the products a customer selects in the collection grid.
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 page shows the products a customer selected in the collection grid side by side, in a comparison table. You set up the rows once, and every comparison uses them.
Where to find it: in the theme editor, open the template picker and select Products → compare. The template holds one section, Product comparison.
This page was added in Seventh 4.0.0. The release notes call it "Product comparison (dynamic)" and "Compare from the collection grid". For a comparison table with products you pick yourself, use the Product comparison section.
How customers compare products
- On a collection page, each product card shows a compare checkbox. The checkboxes appear only when Enable comparing is on in the Collection grid section.
- When a customer checks a product, a compare bar appears at the bottom of the screen with the selected products, for example "2 of 4 selected".
- A customer can select up to 4 products. After that, the other checkboxes are disabled and the bar says "You can compare up to 4 products". Seventh does not support more than 4 products in one comparison. To compare another product, the customer first removes one from the compare bar or the table.
- With 2 or more products selected, the Compare button in the bar opens the Product comparison page.
- On the Product comparison page, the customer can remove a product with the close button on its column. With one product left, the table asks the customer to select another item. With none left, the page says "No products selected".
The selection is stored in the customer's browser, so it survives page changes and new visits in the same browser. The page address carries the compared products (?view=compare&compare=<product handles>), so a customer can share a comparison link.
Turning on product comparison
Turn on Enable comparing
In the theme editor, open the template picker and select Collections → Default collection. Select the Collection grid section and turn on Enable comparing under Filtering and sorting. Repeat for every collection template that should show compare checkboxes.
Open the compare template
Open the template picker and select Products → compare. Select any product to preview the table.
Choose the rows
Select the Comparison table block inside the Product comparison section. The template starts with the Vendor, Price, Rating and Product link rows. Select Add block to add rows such as Product metafield, Attribute meter, Product description or Product variants, and drag them into order.
Save and test
Select Save. On the storefront, check 2 products in a collection grid and select Compare in the compare bar.
Table rows and style
The rows of the table and the table style are blocks inside the Comparison table block. Their settings are listed on the Product comparison section page: Comparison table, Product description, Product price, Product vendor, Product rating, Product metafield, Product link, Attribute meter and Product variants.
Why is there no compare checkbox on my product cards?
Because Enable comparing is off in the Collection grid section of that collection template. Compare checkboxes appear only in the collection grid. Seventh does not support comparing from the search results, featured collection sections or product pages. Use the Product comparison section with a fixed list of products on those pages instead.
Why does the Compare button do nothing?
Because fewer than 2 products are selected. The Compare button opens the Product comparison page only when the compare bar holds at least 2 products.
Why is the Products → compare template missing?
Because the template file is not in your theme, for example because it was deleted. Every Seventh 4.0.0 install includes the Products → compare template, whichever preset you installed: Seventh, Nora, Oak or Orim.
Seventh does not support adding the Product comparison page section with Add section, so a new template cannot replace the deleted one. Contact Krown support for help restoring the template, or use the Product comparison section, where you choose the products yourself.
All Product comparison settings
Every setting in this group, with its type and default.
Accepts these blocks: Comparison table.
Show link to all products (checkbox, default: on): Shows a Back to All products button under the table. It returns the customer to the collection they compared from, or opens the All products collection when there is no previous page.
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.
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: Products → compare → 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.
Related pages
- Product comparison section: the comparison table blocks and their settings.
- Collection filters and sorting: the Enable comparing setting.
- Collection page: the template where customers select products to compare.
- Product card: the card that shows the compare checkbox.
Collection filters and sorting
Collection filters and sorting in Seventh: turn on filtering, show filters in a drawer or a sidebar, and let customers compare products.
Collections list page
The Collections list page in Seventh shows all your collections, or the ones you pick, as collection cards at /collections.