Highlight Cards Block (Product Page)

---

The Highlight Cards block shows up to four small feature tiles on the product page, each with an icon, a short title and an optional one-line description, for example Free shipping · 30-day returns · Vegan · Made in Germany. The tiles sit in a tidy grid, so key facts can be taken in at a glance without reading the description.

The block is available in both product sections, Product Information and Product block, with the same settings in each. One block per section.

Adding The Block

1. Open the theme editor and navigate to a product page.
2. In the Product Information section (or the Product block section), click "Add block".
3. Choose Highlight cards.
4. Fill in the four features, then choose where the grid should appear with Placement.

Settings

Placement

• Content column (right) (default): the grid appears where you drop the block in the block list, between the other buy-box blocks.
• Under gallery (left): on desktop, the grid moves under the product images in the left column. This fills the empty space that often appears under the gallery on long product pages. On mobile, where the gallery and the content are stacked, the grid stays at the block's position in the list. If the section has no Media Gallery block, the grid always stays at its position in the list.

Grid

• Columns (desktop): 3 or 4 (default 4).
• Columns (mobile): 1, 2 or 3 (default 2).
• Gap (desktop) / Gap (mobile): space between the cards, 0–40px.

Match the column count to the number of features you show. Four features look best as 4 columns on desktop and 2 columns on mobile (a 2 × 2 grid). With three features, use 3 columns on desktop.

Card style

• Background: card fill color (default white).
• Border color and Border width (0–5px). Set the width to 0 for borderless cards.
• Corner radius: 0–30px.
• Vertical padding / Horizontal padding: space inside each card, 0–40px.

Icon & text

• Icon size: 16–48px.
• Icon to text gap: 0–24px.
• Default icon color, Default title color, Default description color: used by every card unless you override the color on a single feature.
• Text size (desktop) / Text size (mobile).
• Text transform: AA (uppercase), Aa (capitalize) or None.
• Title weight / Text weight: 400–700.

Feature 1–4

Each of the four features has the same settings:

• Show feature X: turn off to hide this card.
• Icon type: Google material icon or Image.
• Google icon name: the name of a Google Material Symbol, for example local_shipping, autorenew, eco or verified. Browse them at fonts.google.com/icons. Shown when the icon type is Google material icon.
• Icon image: your own icon file. Shown when the icon type is Image.
• Icon color: leave blank to use the default icon color.
• Title: the main text of the card.
• Title color: leave blank to use the default title color.
• Description: optional second line in smaller text.
• Description color: leave blank to use the default description color.

Block margin

Margin bottom (desktop) and Margin bottom (mobile), 0–100px.

Tips

• Keep the titles to two or three words. The cards are small, and a long title wraps into several lines and breaks the even grid.
• Use the description for the detail ("Free over €50", "Easy returns") and keep the title for the headline fact.
• Use one icon style for all four cards. Mixing material icons with uploaded images looks uneven.
• Only state facts that apply to the product. Highlight cards are read as product facts, so claims such as "Vegan" or "Made in Germany" have to be true.