Compare
The provided page demonstrates products added to the compare list.
Tip: To edit the page, navigate to Pages -> compare using the top drop-down menu.
Compare
Activate the "Show "Only different" checkbox" option to display the corresponding button in the comparison table. The enabled checkbox hides details about products that are similar for all of them.
The button state remains active by default if the "Enable by default" option is enabled.
Choose the appropriate aspect ratio of the product images in the "Image ratio". You can use one of the options that display well on both desktop and mobile views: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". Check each image ratio here.
Show vendor
Display the product vendor above the product title by simply enabling the checkbox.
Theme Blocks
Tip: To add a block, press "Add block" in the "Compare" section and select one from the list.
The "Product information" section can be added with the dynamic content blocks, such as: "Image", "Title", "Options (single line)", "Options (split by name)", "Price", "Compare at price", "Availability", "SKU", "Weight", "Product type", "Vendor", and "Product metafield". Each block can be moved to the needed position in the product information section.
Image
Displays an image of the selected product variant in a separate row of the table.
Title
Add the block to display product titles in the comparison table.
Options (single line)
This block displays all variants of the related product in a single row within the corresponding table field.
Options (split by name)
The current block displays each product variant on its own separate line within the comparison table.
Price
Display an initial product price in the table using the block.
Compare at price
The comparison price can be shown in a separate row by adding the current block.
Availability
This block helps you to display the product availability information.
SKU
Add the SKU code to the table by adding the block.
Weight
If the product details page includes product weight information, add the current block to show that specification in the comparison table.
Product type
Specify the product type in the table by adding the block.
Vendor
Using this block, you can add the product vendor.
Product metafield
This block helps to add information to the table linked to products using metafields.
In the "Metafield (namespace.key)", specify the namespace and key of the developed metafield in your Shopify admin -> Settings -> Metafields and metaobjects -> Products.
Change the row title in the "Row label (optional)" field.
If a product includes a specific related value to the metafield, connect it in the "Metaobject value field (optional)".
In the "List separator" drop-down, select the desired option to split the values by "Line break", "Line break with bullets", "Comma + space (, )", "Slash with spaces ( / )", "Pipe with spaces ( | )", or "Tab (\t)".
In the following example, you can view how the page might be displayed on the desktop and mobile:
Last updated