Collection list banner 🔥
Display a curated selection of collections in a clean grid layout, paired with a promotional banner on the left. This layout enhances browsing and helps customers quickly explore your product range.
How to add a Collection list banner section to your Shopify store
Steps
In the theme editor (Customize), click Add section
Locate Collection list banner
Make necessary changes
Save.
✍️ To know more about creating and editing collections, see: This tutorial.
How to edit a Collection list banner section
Section settings
Section header
Subheading: Add a short, secondary heading to complement the main heading. This can provide additional context or detail.
Heading: Enter the primary title for your banner.
Heading size: Adjust the size to fit your design preference and ensure readability. Choose from available heading sizes.
Text: Add a detailed explanation or summary for the banner. Use rich text formatting like bold, italic, links, and lists for better visual emphasis.
Text size: Select the size of the description text.
Button label: Input the text for the call-to-action button.
Button link: Add a link to the button to direct users to a specific page, product, or collection.
Button style: Choose a style for the button.
Text alignment:
Align the text in the section to the Left, Center, or Right.
Adjust alignment based on your banner’s design and layout.
Text alignment on Mobile: Override desktop alignment settings specifically for mobile devices if needed.
Card settings
Color scheme: Select from predefined color schemes to match your store's branding.
Image ratio: Use "Adapt to image" to keep the image's original ratio or fix a ratio for uniformity.
Show rounded image: Display the cards in square or round.
Grid settings
Number of columns on desktop: Adjust the slider to set the number of columns.
Column gap & Row gap: Control the gap between collection cards.
Grid border: Enable if you want a clear separation between items. The Grid border once enabled will override the card's border.
Mobile layout
Enable swiping on mobile or display the collections in a 1/2/3 grid column layout.
Block settings
Highlight a promotion, collection, or featured content using a custom image, headline, text, and optional call-to-action button — all wrapped in a clean and responsive layout.
Adjust the Color scheme for the block. Learn more Colors
Image settings
Image: Upload an image for the card.
Image overlay opacity: Add a dark overlay for better text readability.
Content settings
Content position: Choose where the text/button appears.
Content alignment: Align text left, center, or right.
Content spacing: Adjust padding around the text.
Content gap: Adjust the gap between elements in the content.
Card link: Add a link to the image that directs customers to a desired page.
Subheading & Heading: Add eye-catching titles.
Text: Add supporting promo or product details.
Button label: Add a call-to-action button to the card content.
Button style: Choose between primary, secondary, underline, etc.
Badge settings
You can add a promotional badge like “Save 40%” or “New” to catch the shopper’s attention with deals or labels.
Show badge: Toggle on/off.
Color scheme: Style it to match your theme.
Shape: Circle or Square.
Position: Top right/Top left/Button right/Button left.
Subtext & Text: Customize your badge message (e.g. Save / 40%).
The size of the badge depends on the length of the badge content.
Mobile settings
Choose a mobile-specific image if needed for better display.
Set how the content is aligned on mobile: Left/Center/Right.
Select a collection for the block. It automatically takes the collection's featured image and title. You can also upload a new image/add a custom title for the section.
Last updated