Try Hyper freeContact support

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

  1. In the theme editor (Customize), click Add section

  2. Locate Collection list banner

  3. Make necessary changes

  4. 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.

2 columns with swipe on mobile enabled
2 columns with swipe on mobile disabled

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.

Last updated