Collection banner
Overview
Collection banner adds a configurable collection banner experience to your Radian storefront.
Customize Collection banner
- From Shopify admin, go to Online Store > Themes, find Radian, and select Customize.
- Use the page selector to open the template that contains Collection banner.
- Select Collection banner in the template panel, adjust the settings, and select Save.
Section settings
LAYOUT
| Full width | Turns full width on or off. |
|---|---|
| Section layout | Choose from Page, Content, Narrow, Custom. |
COLOR
| Color scheme | Selects one of the color schemes configured in Theme settings. |
|---|---|
| Collection title color | Controls collection title color. |
MEDIA
| Show collection banner image | When a collection image is displayed, section spacing is automatically set to 0. |
|---|---|
| Height | Choose from Adapt to media, Percent of viewport, Fixed. |
| Percent height | Adjusts percent height within the available range. |
| Fixed height | Adjusts fixed height within the available range. |
| Mobile height | Choose from Adapt to media, Percent of viewport, Fixed. |
| Mobile percent height | Adjusts mobile percent height within the available range. |
| Mobile fixed height | Adjusts mobile fixed height within the available range. |
TEXT
| Heading style | Choose from Display, Page title, Section heading, Secondary heading, Subheading, Body, Caption. |
|---|---|
| Make font bolder | Turns make font bolder on or off. |
| Show collection description | Turns show collection description on or off. |
HEADING LAYOUT
| Heading alignment desktop | Controls heading alignment desktop. |
|---|---|
| Heading position desktop | Choose from Left, Center, Right. |
| Heading alignment mobile | Controls heading alignment mobile. |
| Heading position mobile | Choose from Left, Center, Right. |
SECTION SPACING
| Desktop and mobile spacing | Sets top and bottom spacing independently for desktop and mobile. |
|---|
Recommended setup
- Choose the section width, layout, and color scheme before fine-tuning individual content blocks.
- Configure desktop positioning first, then switch the Theme Editor preview to mobile and adjust the mobile-specific controls.
- Check links, product or collection resources, and interactive controls before publishing the theme.
Conditional settings
Settings that depend on another option appear only when that parent option is enabled. If a control is missing, check the related layout, style, or enable toggle first.