# Collection list banner 🔥
_kaMLrodq.jpg)
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*](https://youtu.be/M0DoTpdYPWU)*.*
## How to edit a Collection list banner section
### Section settings
* **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.
* **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.
* **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.
**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](https://docs.foxecom.com/hyper-theme/theme-settings/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.
