How To Setup Product Block Featured Icons

The Featured Icons allows you to showcase key product or brand attributes as a grid or list of small icons paired with text labels.

Key Features

• Flexible Layouts: Configure how many columns/rows to display between grid or list styles.
• Built-In Icon Library: Choose from hundreds of vector icons or upload your own SVG.
• Responsive & Mobile-First: Automatically collapses/reflows icons on narrow viewports so badges never overlap

Benefits

• Instant Scannability: Icons grab attention faster than plain text, letting your customer scan core selling points at a glance.
• Breaks Up Long Copy: Chunking key features into bite-size icon tiles makes your page feel lighter and more engaging.

How To Use?

1. After installing the Featured Icons blocks. Going to the Shopify Editor sidebar, select the product page temple, click Add Section in the Template tab.
2. Choose the Featured Icons block

1. Copy the block ID. For example: smi-block-featured-icons-1

1. On the Product Detail sections, click Add Block and add Smind Block to the section

1. On the Smind Block, insert the block ID of featured icons which is smi-block-featured-icons-1 to the Section ID and change the block name if you want

1. Next, you can rearrange the relevant blocks within the product detail sections

1. Finally, let’s start to customize the Featured Icon block

General Settings of Featured Icons

• Block ID: The unique ID of featured icons
• Content Max Width: Set the maximum width of the timer’s content area can stretch to.
• Item gap on desktop: The horizontal & vertical spacing between each icon and label tile when viewed on desktop.
• Item gap on mobile: Same as above, but only applies at mobile breakpoints.
• Columns on desktop: How many columns of icons to display side by side on desktop.
• Columns on mobile: How many columns to use on mobile devices. Often set to 1 or 2 for readability.
• Content padding: The internal padding around each individual icon and text card.
• Icon size: The size of the SVG/icon graphic.
• Icon position: Display the icon appears to the left or right of its text label.
• Text size: Preset font sizes for your labels.
• Text alignment: Aligns the text within each card.
• Thickness: Width of the border around each icon and text card.
• Opacity: How transparent that border is.
• Corner radius: Rounds the corners of each card.

Settings of Featured Items

• Icon: Pick one of the built-in icons from Smind’s library
• Upload icon: Upload your icon and make sure using a recommended size which is 128×128 PNG file format.
• Text: Enter the label or caption for this feature