Product comparison settings

Setting

Description

Card style

Card Style

Style 1: The table has solid lines, and all columns with products are connected.
Style 2: Columns with products are separated, and the lines are not solid.

You can customize the view of this section further by using additional options, such as the Secondary Background Color.

In the Color Scheme, you can set:

The Background for columns.
A Background Gradient for the entire section.

For Style 1, the gradient will also apply to the columns.

For Style 2, the gradient will apply to the section and columns will be separated by a different color from “Background picker”.

Style 1

Style 2

Color scheme	Applying a color scheme to the product comparison section automatically updates all associated colors set in the theme settings according to the created color schemes. You can edit colors in this block, but it will impact the other sections and blocks in which the same color scheme is used.
Show secondary background	Check the box to set a background for the entire section different from the container background with content.
Secondary background color	You have a color picker to choose the right color for secondary background.
Heading	To add a heading, simply enter the text in the provided field. In the top menu of the field, you can find options to customize the heading such as making it bold, italic, or adding a hyperlink. Furthermore, you can click the dynamic source button to insert a dynamic source for the featured collection description.
Heading size	The heading size setting offers three options to control the size of the section heading: Small Medium Large
Description	To add a description, simply enter the text in the provided field. In the top menu of the field, you can find options to customize text such as making it bold, italic, or adding a hyperlink. Additionally, you can use the style of headings from H1 to H6 to the body text and create bullet or numbered lists for your description. Furthermore, you can click the dynamic source button to insert a dynamic source for the featured collection description.
Description font size	Choose the font size for description: Small Medium Large
Description color	This option allows you to customize the description color. You can choose from two options: Main: The text color in your color scheme Secondary: The secondary text in your color scheme
Heading alignment	You have three options to align heading or heading with description: Left: Aligns heading and description to the left side of the section. Center: Aligns heading and description to the center of the section. Right: Aligns heading and description to the right side of the section.
Table content alignment	Left Center Right
Table content color	This option allows you to customize the price color. You can choose from two options: Main: The text color in your color scheme Secondary: The secondary text in your color scheme
Products	You can add up to 3 products to compare different characteristics, allowing customers to choose the best option. Click on Select product and look through the list to pick 3 products.

Section paddings

Setting	Description
Top padding	The “Top padding” setting allows you to adjust the amount of space at the top of the section using a slider.
Bottom padding	The “Bottom padding” setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section.