Product Comparison
Product Comparison – General Settings
The Product Comparison section allows customers to compare products side by side with clear structure and customizable styling.
General
Show comparison table title
Enables or disables the main comparison table heading.
Comparison table title
Defines the main title displayed above the comparison table.
Subheading
Optional supporting text displayed below the main title.
Design & Styling
Color scheme
Selects the color scheme used for the entire comparison section.
Button style
Choose the visual style of the action button:
- Basic
- Rounded
Button hover color
Controls the background color of the button on hover.
Button text
Defines the label text shown on the comparison action button (e.g. “View Product”).
Spacing
Top padding
Adjusts the spacing above the section.
Bottom padding
Adjusts the spacing below the section.
Custom CSS
Custom CSS
Allows adding custom styles specific to the Product Comparison section.
Notes
- The comparison title and subheading can be shown or hidden independently.
- Button styling can be customized without affecting global button styles.
- Color scheme inheritance ensures consistency with the overall theme.
Product Comparison – Product Block
The Product block represents a single product within the comparison table. Each block adds one product column for side-by-side comparison.
Product
Product
Selects the product to be included in the comparison table.
Media
Image aspect ratio
Controls the aspect ratio of the product image displayed in the comparison:
- 16:9
- 4:3
- 3:2
- 1:1
Call to Action
Button link
Optional custom link for the product action button.
If left empty, the product’s default URL is used automatically.
Button link target
Defines how the link opens:
- Same window
- New window
Notes
- Each Product block adds one comparable product column.
- Image aspect ratio ensures visual consistency across all compared products.
- Leaving the button link empty keeps navigation aligned with the product page.