Shopify Icon Banner Section

Description of the 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 Sections Pro 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.

Demo of the Section

Installation Instructions

1. Download the Sections Pro app on the Shopify App Store
2. Open the app and navigate to Free Sections
3. Search for "Icon Banner"
4. Click to Publish or Purchase

Sample Use Cases for a Shopify E-commerce Store

1. Promotional Highlights: Use the Icon Banner to showcase special promotions, discounts, or bundle offers.
2. Shipping Information: Visually display shipping options, delivery times, and any free shipping offers to attract customers.
3. Customer Support: Highlight customer support features with icons representing chat, email, phone support, and FAQs.
4. Payment Methods: Showcase the different payment methods you accept, making it easier for customers to know their options at a glance.
5. Environmental Efforts: Use icons to represent eco-friendly initiatives, such as recyclable packaging or sustainable sourcing.

Overview of the Configuration Settings

Text Settings:

• Text Font: Choose the font family for the text displayed in the banner.
• Text Size: Set the size of the text (10px - 50px).
• Text Line Height: Select the line height from various options (0.75 to 2.0 or inherit).

Icon Settings:

• Icon Shape: Choose the shape of the icon (Square, Rounded, Circle).
• Icon Padding: Set padding around the icon.
• Icon Size: Specify the size of the icon (10px - 200px).
• Icon Background Color: Select the background color or gradient for the icon.
• Icon Color: Choose the color of the icon itself.

Colors:

• Background Color: Set the background color or gradient for the banner.
• Text Color: Choose the color for the text.

Dimensions:

• Max Width of Section: Define the maximum width of the section.
• Gap Between Icons: Set the spacing between the icons.
• Padding Top/Bottom/Left/Right: Set padding values for top, bottom, left, and right edges of the banner.

Blocks:

• Icon Type: Select from various icon options such as Cart, Gift, Shipping, Payment, etc.
• Text: Add the text associated with the icon.
• Link: Optionally add a URL link to make the icons clickable.

These settings offer extensive customization options to fit the overall aesthetic and functional needs of your Shopify store.