Multi Column Banner Setup Guide

This guide explains how to configure the Multi Column Banner section of your Shopify store— a structured, scannable section for showcasing core store advantages (e.g., fast delivery, safe payments) or trust signals. It helps visitors quickly grasp your store’s key value propositions.

Overall Multi Column Banner Settings

Text align

Controls the horizontal alignment of text (headings + descriptions) across all columns.

• Left: Traditional, readability-focused layout (ideal if your descriptions are slightly longer).
• Center: Balanced, clean style (recommended for this section—matches the scannable, high-level advantage focus).

Icon size

Slider (default: 100%) that adjusts the size of the icons in each column.

• Adjust between 80% (subtle) and 120% (prominent) based on your layout.
• Avoid sizes over 120%: Oversized icons will crowd text and reduce readability.

Font size

Slider (default: 100%) that controls the size of headings and descriptions in all columns.

• Stick to 90-110%: This section is meant to be scannable—extreme sizes will hinder quick comprehension.
• Match to your store’s global body text size for visual consistency.

Section spacing

Controls the padding above and below the entire Multi Column Banner section, ensuring it fits smoothly with adjacent content.

• Top spacing (default: 44 px): Increase to 60 px if the section feels cramped against the content above (e.g., a product grid).
• Bottom spacing (default: 44 px): Match to top spacing for symmetry, or adjust to fit your page flow (e.g., reduce for a tighter layout before a footer).

Border Style

Toggles a border around the Multi Column Banner (and other theme elements like media/modals, per the setting description).

• No border (default): Clean, seamless look (recommended for most store designs).
• Border: Adds a visible border to the section—use if you want to visually separate this area from adjacent content.

Individual Column Settings

Customize each column (add/edit via the "Add block" button in the customizer) to showcase a unique advantage/trust signal:

Select an icon

Chooses a pre-built icon (included with your theme) to represent the column’s advantage.

• Use icons that match the advantage: e.g., Fast delivery (truck icon) for shipping speed, Safe payments (lock icon) for payment security.
• Stick to theme-built icons first: They ensure visual consistency across columns.

Image

Optional: Replace the built-in icon with a custom image (e.g., a branded graphic).

• Click Select to upload a PNG file (transparent background recommended).
• Follow the recommendation: 140px width (ensures the image scales well with text).
• Tip: Use this only if the theme’s built-in icons don’t match your brand—icons are more consistent for this section.

Heading

The short, bold title for the column (summarizes the advantage).

• Keep it 1-2 words: e.g., Fast Delivery, Safe Payments.
• Use uppercase (as in the preview) for emphasis—most themes style this text to stand out.

Description

A brief explanation of the advantage (adds context to the heading).

• Keep it 1-2 short sentences: e.g., "Faster delivery on selected items thanks to our improved logistics".
• Avoid jargon—keep it simple and visitor-focused (explain how this benefits them).
• Use basic styling (bold/italics) sparingly to highlight key details (e.g., "selected items").

Best Practices

• Focus on visitor benefits: Highlight what matters most to shoppers (e.g., delivery speed, payment security, returns policy).
• Keep consistency: Use either theme icons or custom images (don’t mix both) for a polished look.
• Test on mobile: Ensure icons/images and text don’t overlap—reduce icon/font size if needed.
• Place this section strategically: Use it on the homepage (after the hero section) or product pages (to reinforce trust before checkout).