Hyper Theme
Hyper Theme
Theme Sections

Collection list banner πŸ”₯

4 min read
image

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

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

image

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.

image
Last updated