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.
Desktop only
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.
Heading
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.
Description
Use this block to compare the Description for each product. Customize the product descriptions using the Description field in the Products admin.
Product rating
Use this block to compare the Product rating paired with each product (requires a reviews app).
Add Product Reviews or upgrade to Stamped.io
Vendor
Use this block to compare the Vendor for the products.
Customize your product's vendor by editing the Vendor field in the Products admin.
Custom Liquid
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.
Dynamic comparison
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.
Share your experience with Empire
Your feedback is crucial! Help make Empire better by sharing your thoughts.
What to provide:
- Pain points: What's not working for you?
- Missing features: What should we add to Empire?
- General feedback: Any other ideas?
How to provide feedback:
- Fill out our quick and easy form.
- Details help us improve, so the more specific, the better!