Electro theme supports the Product Comparison section, which allows customers to easily compare similar products before deciding which one to buy. When used properly, it can become an important tool for generating conversions for your store.
The comparison on this section will be shown as a table with various metafield keys of a metafield namespace. To make the Product Comparison section work properly, the Comparison metafield keys and Metafield Namespaces must be filed.
Check this video tutorial to explore the way to create Product Comparisons for both single and multiple product categories, using the Electro theme:
To customize for the Product Comparison section, click on the section and you will see all settings on the left hand.
You can customize this section by filling on the placeholders of these content:
- Section subheading
- Section heading
- Section description
If you want to remove any settings, just delete the content and give it a blank space.
The Product Comparison section supports 2 buttons: Primary and Secondary button. To add button text and button link, you need to click on the placeholder and insert the content, and to change the settings of the button, please update your Theme settings. Learn more about Theme settings here.
If you want to remove 1 button in that section, just delete the label text.
On Comparison metafield keys, please enter a list of the product metafield keys you want to compare in the table, separated with commas (E.g: height, width, depth). Check these articles about what is the product metafield and how to use it in Electro theme.
You can also adjust the row revealed by default from the range 1 to 10, and enable ‘Display in product page’ to automatically generate a column for the currently viewed product.
You can choose to enable or disable to show the scroll horizontal bar with the ‘Show progress indicator’.
By default, the Product Comparison section supports 2 kinds of Content alignment:
In the theme settings, you can select to show the Color Swatches, show the Quick shop button, product rating, and product vendor for each product in this section.
Note: The Show Color swatch and Enable Color swatch options must be turned on to make the Color swatch show for each product in the list.
The Image ratio and Image fit settings control how the product image is displayed.
The Product Comparison section only supports one block: Product. To choose the product for this section, click on the Product block here.
You can select featured products here by clicking the Select products button. Please note that the maximum number of products you can choose to compare in this section is 3.
To display product specifications, you need to customize it in Theme settings.
- Once you choose the products to compare in this section, they will be displayed on all product pages that use this product template. These products cannot be changed automatically when you view different product pages.
- If the current product page is one of the products that have been chosen in the Product Comparison section, the comparison will only show 3 products instead of 4. This is because the current product cannot be compared to itself.