Radian 3.0 est là — bundles, vitrine de catégories et animations cinématographiques.Voir les nouveautés

Documentation Contact

Comparison table

Updated 1 min read

Comparison table sets your product beside others, feature by feature, such as "Ours", "Drugstore" and "Luxury". Each row shows a check, a cross or a short text in each column. One column can be highlighted.

The Comparison table section.
The Comparison table section.

How to set it up

Step 1: Add the section

  1. In the theme editor, open the page and click Add section.
  2. Choose Comparison table. Drag it to where you want it on the page.
Adding Comparison table.
Adding Comparison table.

Step 2: Name the columns

  1. Under Columns, write the name of Column 1, Column 2 and, for three columns, Column 3. Add a logo to any column.
  2. Choose the Highlighted column (1), usually your own.
  3. Write the Feature column name, Check text and Cross text. Screen readers read them aloud.

Step 3: Add the rows

  1. Click Add block > Row. Write the Feature and an optional Detail.
  2. In each column, write yes for a check, no for a cross, or any short text, such as 30 ml.

Step 4: Add a heading and button

  1. Write the heading under Heading, and a button Label and Link under Button.

Step 5: Review the settings

  1. See the settings reference below for every option.
Comparison table settings.
Comparison table settings.

Settings reference

Comparison table

Heading
Highlight style Options: None, Swipe, Sheen, Halo, Marker, Soft underline.
Highlight color
Columns
Column 1
Column 1 logo An image from your files.
Column 2
Column 2 logo An image from your files.
Column 3 Leave empty for two columns.
Column 3 logo An image from your files.
Highlighted column Options: None, Column 1, Column 2, Column 3.
Feature column name Read by screen readers.
Check text Read by screen readers.
Cross text Read by screen readers.
Button
Button label
Button link Where the link goes.
Corners
Make section rounded Rounds this section's corners with the radius set for each one.
Top left radius Slider.
Top right radius Slider.
Bottom right radius Slider.
Bottom left radius Slider.

Full width, section layout, color scheme, spacing and mobile overrides work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.

How it works

  • Leave Column 3 empty for a two-column table.
  • On phones the table keeps its columns and scrolls sideways when it doesn't fit.

Related

Still stuck?

Include your store URL and theme version — we'll get back to you.

Contact support