Empire includes a comparison feature for product grids across the storefront. Customers can make selections of products and compare their qualities, specifications, and more. This feature is enabled by default and uses a customizable bottom bar.
Enable product compare in theme settings
Use the theme editor (Customize) to open the Theme settings, then Product Grid.
Scroll down to Product compare to activate Enable product compare.
By default, this feature will Show on desktop and mobile. Adjust the Product compare feature setting to Show on desktop only.
When customers select products, the products will gather in a bottom bar. Customers then click Compare and the theme directs them to a comparison page.
This feature is limited to a maximum of 3 products to optimize legibility, layout, and performance
Customize comparison page
Open a collection page in the theme editor preview, then select at least two products to compare. Click Compare in the bottom bar to open the comparison page template.
You can also access this template by using the page selector to open Products, then compare.
Assemble and customize your comparison page template with blocks.
There are blocks for Heading, Description, Product rating, Vendor, Custom Liquid, and Dynamic comparison.
Separate and label the comparisons by adding a Heading block. Click the block to open its settings and customize the H2 (default is Product information) using the Heading field.
Use this block to compare the Description for each product. Customize the product descriptions using the Description field in the Products admin.
Use this block to compare the Product rating paired with each product (requires a reviews app).
Use this block to compare the Vendor for the products.
Customize your product's vendor by editing the Vendor field in the Products admin.
Use the Custom Liquid block to include custom code for product comparisons. If you have some custom code for an app or conditional HTML, for example, add it using this block.
Use the Dynamic comparison block to include additional content to compare. Connect this block to a dynamic source (metafield content) to display more information to compare.
For example, use this to connect a single-line text metafield for the height of each product.