Shine Icon With Text

Theme: Shine · Section type: All-template section

The Icon with text section shows a row of small icons, each with a heading and a short description. Use it for store benefits such as free shipping, easy returns, or secure payment.

Note: You can add this section to any template and to the footer, but not to the header. The section comes with 4 items.

What you can do

Add the section and your items
Choose an icon for each item
Style the items
Choose the layout on large screens and mobile
Add a button
See what customers see
Change the icon with text settings
Fix common problems

Add the section and your items

In the theme editor, open the template where you want the section.
In the left sidebar, click Add section > Icon with text.
Enter a Section subheading, a Section heading, and a Section description, and choose a Heading size.
Click an Icon with text item block and enter a Heading and a Description.
To add more items, click Add block > Icon with text item.
Click Save.

Choose an icon for each item

Click an Icon with text item block.
Under Icon, choose an Icon source:
- Theme library: pick an icon from the Theme library list, for example Truck, Return, Gift, or Discount.
- Image: select an Image. Use a square image.
- Custom SVG: paste the SVG code of your icon into Custom SVG. It's shown at the icon size you set for the section.
Click Save.

Tip: Use the same icon source for all items so the icons look consistent.

Style the items

Click the Icon with text section.
Under Icon with text item, set Item alignment to Left or Center, and choose an Icon size: 32px, 48px, or 64px.
Optional: select Enable item background to put each item on a card with a border, then set the Background and Content colors.
Click Save.

Choose the layout on large screens and mobile

Under Large screen, set Section heading position to Top left, Top center, or Inline.
Set Columns per row to 3, 4, or 5.
Under Mobile screen, set Section heading position to Left or Center.
Set List style to Grid or Carousel.
Click Save.

With Inline, the section heading takes the first column and the items fill the other columns of the row.

Add a button

Under Button, enter a Label, choose a Style, and add a Link.
Click Save.

The button shows only when the section has a subheading, heading, or description. With Inline, it sits under the section heading.

What customers see

Large screens: the items show in a row with the number of columns you chose.
Tablets and phones, Grid: the items stack, 2 per row on tablets and 1 per row on phones.
Tablets and phones, Carousel: the items show in one row that customers swipe sideways.
Cards: with item background on, each item sits on its own card with a border.

Settings reference

General

Setting	What it does
Color scheme	Sets the section colors. Color schemes are set in Theme settings > Colors.
Section subheading	Adds a short line above the heading.
Section heading	Adds the section heading. To highlight words, put them between [ and ] and choose the style in Theme settings > Typography.
Heading size	Sets the heading size: H2, H3, H4, or H5.
Section description	Adds a short text below the heading.

Icon with text item

Setting	What it does
Item alignment	Aligns the icon and text Left or Center.
Icon size	Sets the icon size: 32px, 48px, or 64px.
Enable item background	Puts each item on a card with a border and turns on the Background and Content colors.
Background	Sets the card background color. Works only with Enable item background.
Content	Sets the card text color. Works only with Enable item background.

Large screen

Setting	What it does
Section heading position	Places the section heading at Top left or Top center above the items, or Inline in the first column.
Columns per row	Shows 3, 4, or 5 columns per row. With Inline, the heading uses one of the columns.

Mobile screen

Setting	What it does
Section heading position	Aligns the section heading Left or Center on mobile.
List style	Shows the items as a Grid or as a swipeable Carousel on tablets and phones.

Button

Setting	What it does
Label	Sets the button text. The button is hidden if the label is empty.
Style	Shows the button as Filled, Outlined, or Text link.
Link	Sets the page the button opens.

Icon with text item block

Setting	What it does
Icon source	Chooses where the icon comes from: Theme library, Image, or Custom SVG.
Theme library	Picks an icon from the theme's icon list. Used with Theme library.
Image	Uses your own image as the icon. A square image works best. Used with Image.
Custom SVG	Uses your own SVG code. It's shown at the section's icon size. Used with Custom SVG.
Heading	Sets the item heading.
Description	Sets the item text.

Troubleshooting

My button doesn't show.
The button needs a Label, and the section needs a Section subheading, Section heading, or Section description.

My image icon looks stretched or cropped.
The icon area is square. Use a square image, or choose Theme library or Custom SVG instead.

My SVG icon is the wrong size.
Custom SVG icons use the Icon size set in the section. Change it to 32px, 48px, or 64px.

On mobile the items scroll sideways, but I want them stacked.
Set List style under Mobile screen to Grid.

Updated on: 22/10/2026

Was this article helpful?

Thank you!