Icon list
Show short selling points as a row of pills with icons, such as "No animal testing" or "Free returns".
The Icon list section shows a single row of rounded pills, each with an icon or small image and a short label. When there are more pills than fit on screen, shoppers can swipe the row on mobile or click and drag it on desktop. Pills can link to a page. Use it to highlight product benefits, store policies or trust points.
1. Our guide to set up an Icon list section:
2. Section settings
Heading: Optional title above the pills. Leave empty to hide it.
Heading size: Size of the heading, 15–60px.
Heading alignment: Left / Center.
Pills
Text size: Size of the pill labels, 12–24px.
Space between pills: 4–40px.
Colors
Section: Color scheme of the section background: Accent 1 / Accent 2 / Accent 3 / Background 1 / Background 2 / Background 3 / Inverse.
Pill: Color scheme of the pills, with the same options.
Corner radius
Pill: Roundness of the pill corners, 0–40px.
Section padding
Top padding: 0–100px.
Bottom padding: 0–100px.
3. Item block settings
Each Item block adds one pill. The section can have up to 12 items.
Icon: None / Box / Certificate / Chat bubble / Check mark / Clipboard / Credit card / Eye / Globe / Heart / Lightning bolt / Lock / Mail / Map pin / Percent / Phone / Plane / Price tag / Question mark / Recycle / Return / Ruler / Shopping bag / Smile / Snowflake / Star / Store / Sun / Timer / Truck / User.
Alternative icon/image: Upload your own icon or image. Replaces the selected icon.
Label: The pill text.
Link: Optional. Makes the pill clickable.
4. Tips
Keep labels short (two to five words) so more pills fit on one row.
Use a Pill color scheme that contrasts with the Section color scheme so the pills stand out.
Set Icon to None for text-only pills.
An Icon list block is also available inside the product information area of product pages.