Icon Banner is a Shopify theme section in the Section Star library. Highlight your best offers at a glance — a bold icon banner that drives clicks to your sales, promotions, and new arrivals.
About the Icon Banner section
The "Icon Banner" section is designed to visually highlight specific points or features through a combination of icons and text. This customizable banner section utilizes Shopify's Section Star app to offer a flexible and interactive way to enhance your e-commerce store's design. The Icon Banner can be used to present essential information such as promotional offers, shipping details, payment methods, and much more, all backed by visually appealing icons.
Live demo
Use cases
- Promotional Highlights: Use the Icon Banner to showcase special promotions, discounts, or bundle offers.
- Shipping Information: Visually display shipping options, delivery times, and any free shipping offers to attract customers.
- Customer Support: Highlight customer support features with icons representing chat, email, phone support, and FAQs.
- Payment Methods: Showcase the different payment methods you accept, making it easier for customers to know their options at a glance.
- Environmental Efforts: Use icons to represent eco-friendly initiatives, such as recyclable packaging or sustainable sourcing.
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Font
Set the fonts for your section
| Setting | Type | Default |
|---|---|---|
| Override theme fonts | Checkbox | Off |
| Text Font | Font | sans-serif |
Text
Set the text for your section
| Setting | Type | Default |
|---|---|---|
| Text Size | Range | 15 |
| Mobile Text Size | Range | 15 |
| Text Line Height | Select (0.75, 1.0, 1.1, 1.2, 1.3, 1.4…) | 1.1 |
Icon
Set display of the icons
| Setting | Type | Default |
|---|---|---|
| Icon Shape | Select (Square, Rounded, Circle) | circle |
| Icon Padding | Number | 15 |
| Icon Size | Range | 25 |
| Background | Color or gradient | linear-gradient(164deg, #0D8BF4 0%, #… |
| Icon Color | Color | #fff |
Colors
Set colors for the section.
| Setting | Type | Default |
|---|---|---|
| Background | Color or gradient | linear-gradient(164deg, #111 0%, #333… |
| Text Color | Color | #fff |
Dimensions
Set the section dimensions in pixels.
| Setting | Type | Default |
|---|---|---|
| Max Width of Section | Number | 1000 |
| Gap Between Testimonials | Number | 20 |
| Padding Top | Number | 15 |
| Padding Bottom | Number | 15 |
| Padding Left | Number | 10 |
| Padding Right | Number | 10 |
Icon block settings
| Setting | Type | Default |
|---|---|---|
| Icon | Select (Cart, Gift, Gift Card, Shipping, Payment, Trending…) | tag |
| Custom Offset | Range | 0 |
| Text | Inline rich text | The content for the banner item |
| Link (optional) | URL | — |
Image block settings
| Setting | Type | Default |
|---|---|---|
| Image | Image | — |
| Custom Offset | Range | 0 |
| Text | Inline rich text | Some followup text to build on the fe… |
| Link (optional) | URL | — |
How to add this section to a Shopify store
- Install Section Star from the Shopify App Store.
- Open the app and search the library for “Icon Banner”.
- Click Publish, then choose a name and the theme to publish into.
- Follow the deep link into the Shopify theme customizer.
- Add the section to any page and customize it with the native theme settings.
No code is required, and the section lives in your theme as ordinary Liquid — see the full install guide.