Callout Icons Widget¶
Show a row of icons, each with an optional heading and short text, to highlight your store's key features or services — such as free shipping, fast support, secure checkout, or easy returns. You can choose from a large built-in icon set, upload your own icon image, or paste custom icon code.
Page Builder name: Callout Icons | PapaThemes Beautify — Version: 1.0.1
Add it to your page¶
- In your BigCommerce admin, open Storefront → My Themes and click Customize to launch Page Builder.
- In the left Widgets panel, find Callout Icons | PapaThemes Beautify.
- Drag it onto the page — a USP strip near the top of the homepage or above the footer works well.
- The widget appears with four sample callouts. Click it to open the settings panel and edit them.
Settings¶
All settings live inside the Callouts list — there is one entry per icon.
Callouts¶
This is the repeatable list of callouts. Each entry is labeled Callout.
- Add a callout with the Add button at the bottom of the list.
- Remove a callout using its delete icon.
- Drag callouts by their handle to reorder them.
Each callout has a Content tab with the options below. You type the heading and the second text directly on the callout in Page Builder.
| Option | What it does | Default |
|---|---|---|
| Style | Overall layout of the callout: Large, Small, Left (icon beside the text), or Circle (icon in a colored circle). | Large |
| Background color | Circle background color (only shown when Style is Circle). | #ffffff |
| Width | How wide each callout is: auto, % (percent), or px (pixels), with separate Value fields for Desktop, Tablet, and Mobile. | auto |
| Padding | Spacing around the callout (top/right/bottom/left) for Desktop, Tablet, and Mobile. | Desktop 45/5/45/5, Tablet & Mobile 20/5/20/5 px |
| Alignment | Text and icon alignment (Center, Left, or Right), set separately for Desktop, Tablet, and Mobile. | Center |
| Icon | The icon to display. Choose from the built-in set (Chat, Clock, Vehicle, Cart, Phone, and many more), or pick Choose Image to upload your own, or Custom HTML/SVG to paste icon code. | Chat |
| Icon color | Color of a built-in icon. | #ECB9E4 |
| Icon image | The image used as the icon (only when Icon is set to Choose Image). | Sample image |
| Icon SVG Code | A field to paste your own icon code (only when Icon is set to Custom HTML/SVG). | Empty |
| Icon size | Original keeps the icon's natural size; Custom dimension lets you set an exact width and height. | Original |
| Icon width | Icon width in pixels (only when Icon size is Custom dimension). | 0px |
| Icon height | Icon height in pixels (only when Icon size is Custom dimension). | 0px |
| Link | Where the callout goes when clicked. | Empty |
| Show text | Turn the main heading on or off. | Shown |
| Hide on mobile | Hides the heading on mobile screens (only when Show text is on). | Off |
| Text style | Typography for the heading — Default or Custom; Custom reveals Font family, Weight, Size, Mobile size, Text color, Text color hover, and an option to force the style over your theme. | Default |
| Show second text | Turn the secondary line of text on or off. | Hidden |
| Hide on mobile | Hides the second text on mobile screens (only when Show second text is on). | Off |
| Second text style | Typography for the second text — Default or Custom; Custom reveals Font family, Weight, Size, Mobile size, Text color, Text color hover, and an option to force the style over your theme. | Default |
| Display icons in container div | Keeps the callouts aligned to your store's normal content width. Turn off for a wider layout. | On |
Tips¶
Use the same style for every callout
For a clean, balanced row, give every callout the same Style, Alignment, and icon size.
- Keep the heading to a few words (such as "Free Shipping") and put the detail in the second text.
- Add a Link to each callout so shoppers can tap through to the relevant page (shipping policy, returns, contact, and so on).
- Use Choose Image or Custom HTML/SVG when you need a brand-specific icon that is not in the built-in set.
- Turn on Hide on mobile for the second text to keep the strip compact on small screens.