Product Comparison

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:

Section Settings

To customize for the Product Comparison section, click on the section and you will see all settings on the left hand.

General

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.

Buttons

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.

Table

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.

Layout

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:

• Left

• Center.

Theme Settings

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.

Section Block Settings: Product

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.