The Products Comparison Module - Sparks

📝 Note: The Product Comparison module is part of the Sparks plugin, which you can get from here.

The Product Comparison is an indispensable feature of an online shop nowadays that helps the user to have a better overview of the desired products by having them displayed along with their specifications one next to the other.

🖲 Activating the Module

1

Install the Sparks plugin, using these instructions.

2

Navigate to Settings > Sparks and activate the module.

🧰 Using the Product Comparison

In order to see it on your website, you have to click on the ➕ button:

Then, all the added products will appear at the bottom of the screen and, to access the comparison table, you will have to click on Compare:

📝 Note: You can set a maximum of products to be compared. After you complete the limit, a notification will appear when you hover over the plus button again.

🖌 Configuring the Product Comparison

Once you have activated the module, click on the  Configure button to start using it.

There you will find six panels with options:

General

In this section, you will find the following options:

• Choose Comparison Product Page - the page where the comparison table will be shown. It can be different from the Comparison Table one.

IMPORTANT NOTE: The page selected here, needs to have the [sparks_comparison_table] shortcode added in the content, in order for the comparison to work.

• Number of Products Limit - the maximum number of products that can be compared at the same time can be chosen here as well ( maximum 4 ) - ( 1 )
• Compare Checkbox Position - the position of the add to comparison button that is displayed on the product thumbnail on archive pages or sections as Related Products ( top / bottom ) - ( 2 )

💡Result

Table Style

The table style tab provides options for color changing of the following elements:

• Table rows background
• Table header text

📝 Note: You can boost the table's appearance by using the Gradient option that can be accessed from the Table rows Background color.

• Table text
• Table borders

All items with a similar appearance, such as product names, the add to cart button, and the icon for removing a product from the comparison table, are inherited from the Primary Accent color available in the Customizer > Colors & Background. 

💡Result

The toggle for enabling alternate row color will change the table design as in the image below:

• 📝Note: You can boost the table's appearance by using the Gradient option that can be accessed from the Alternating row background color.

Category restriction

The category restriction allows setting a rule:

• Exclude categories - which means that products within these categories can't be compared.
• Include categories - which means that only products within these categories can be added to the comparison table.

📝 Note: A product that can't be added to the comparison table due to such rules won't display the ➕ icon on the front end - an example below.

 Table Layout

This panel allows the table rows to be  sorted as desired, except for the product attributes which will act as a group, with a drag and drop movement.

You also have the possibility to modify the visibility of some elements, if you click on the 👁 icon.

The layout can be changed from columns to rows, and horizontal scroll will be enabled by default - an example below:

 Related products

By enabling this option, products related to the ones within the comparison table will be listed below.

💡Result

Sticky bar

The  sticky bar where the comparison table can be opened is displayed at the bottom of the page if at least one product was added to the comparison.

These options allow customizing:

• Bar background color - boost the table's appearance by using the Gradient option that can be accessed from the BG color.
• Text color
• the style of the compare products button - Primary / Secondary.

💡Result