The Comparison table section allows you to compare multiple brands, products, or services side by side using a structured table. You can display each brand with its logo and name, then add comparison rows to highlight differences in features, quality, services, or other criteria.
This section is useful for helping customers quickly understand key differences between available options.
Click the section name to see the section settings on the right-hand sidebar.
Customize the overall appearance of the comparison table.
Reveal on scroll: Show an animation when the section becomes visible while scrolling.
Make section full width: Expand the section to use the full available width.
Color scheme: Select the color scheme applied to the section. You can choose an available color scheme or customize it through Edit scheme.
Total brand: Set the number of brands displayed and compared in the table.
Enable highlight: Enable highlighting to visually emphasize content in the comparison table.
Use these settings to adjust the spacing around the section on desktop and mobile devices.
Top padding: Adjust the space above the section content on desktop.
Bottom padding: Adjust the space below the section content on desktop.
Mobile top padding: Adjust the space above the section content on mobile devices.
Mobile bottom padding: Adjust the space below the section content on mobile devices.
The Section header container allows you to add introductory content above the comparison table.
Text alignment: Choose how the content is aligned within the section header: left, center, or right.
Custom width: Enable this option to use a custom width for the section header content.
Click Add block under Section header to add content.
The available child blocks shown include:
Heading: Add the main heading of the section, such as Why Choose Us?.
Text: Add supporting text or a short description below the heading.
Child blocks can be reordered by dragging and dropping them in the Theme Editor.
Note: These child blocks must be added under the Section header container.
The Brands block defines the brands or options displayed across the top of the comparison table.
Text size: Select the text size used for the brand information.
Logo: Upload the logo displayed for each brand.
Name: Enter the name displayed below the corresponding brand logo.
The number of brand fields available in this block corresponds to the Total brand setting configured in the section.
For example, when Total brand is set to 2, you can configure Brand 1 and Brand 2 with their respective logos and names.
Click Add block below the Brands block to add a new Comparison row. Each row represents one criterion used to compare the configured brands.
The available options include:
Name: Enter the comparison criterion displayed in the first column. For example: Quality, Care Guidance, Packaging, or Customer Experience.
Value 1: Enter the value for the first brand.
Value 2: Enter the corresponding value for the second brand.
You can add multiple Comparison row blocks to build a complete comparison table and reorder them by dragging and dropping the blocks in the Theme Editor.