Collection Heading
The Collection Heading section controls the main title area displayed at the top of each Collection page. It allows you to customize how your collection titles, descriptions, and accompanying all.
Location: Template -> Collection heading
This section provides flexibility in design and layout, allowing merchants to highlight the collection name, include descriptive text, and optionally display an image or background style that enhances the visual appeal of the page.
Purpose
The Collection Heading helps communicate the theme or purpose of a collection to customers. It provides context, reinforces branding, and improves navigation and user experience. For example, the heading may display “Summer Collection” with a short description and a banner image that visually matches the season.
Option Group
Option Name
Values / Range
Description
Layout
Top spacing
In the following example, you can view the top spacing settings: 
None, Small, Medium, Normal
Adjusts the amount of space above the collection heading section. Useful for controlling vertical balance on the page.
Width
Default, Boxed, Wide
Defines the content width of the heading area. The Wide option is optimized for screens 1440px and wider.
Text align
Left, Center
Determines the horizontal alignment of the text (title and description) within the section.
Text
Show description
Toggle (on/off)
Displays the collection description text, if available. Disable to show only the title or background image.
Text width
Numeric field or slider
Sets the maximum width of the text area for desktop screens, improving readability.
Text width mobile
Numeric field or slider
Adjusts the maximum text width for mobile devices to ensure proper scaling and layout.
Text Box
Show text box
Toggle (on/off)
Enables a content box overlay on the collection header image. When active, additional options appear below.
Text box opacity
0–100%
Controls the transparency of the text box background. Higher values make it more opaque; lower values allow more of the background image to show through.
Text box
Text area
Add custom text (e.g., promotional messages, SEO-friendly descriptions, or collection highlights) to display inside the box.
Dividing Line
Show
Toggle (on/off)
Adds a horizontal line below the section to visually separate it from the content beneath.
Background
Background
Hide, Color, Gradient, Image
Defines the background style for the collection heading. You can use a solid color, gradient, or image.
Desktop height
Auto, Fixed image height
Sets the section height for desktop view. Fixed image height keeps the header consistent across collections.
Mobile height
Auto, Fixed image height
Adjusts the section height for mobile devices for responsive display.
Image position
Top, Center, Bottom
Controls how the background image is positioned vertically within the section. Works on all screen sizes.
Image size
Full background size, Contain
Determines how the image scales within the section: Full background size fills the area, while Contain fits the image within its boundaries. Works on all screen sizes.
Width
Fullwidth, Content width
Defines whether the section spans the full browser width or is constrained to the main content width.
Top, bottom spacing
None, Small, Medium, Normal
Controls spacing above and below the section for layout flexibility.
Remove bottom spacing
Toggle (on/off)
Eliminates bottom spacing to visually connect the header with the next section.
Colors
Base
Color picker
Sets the primary text color for the heading and description.
Lines
Color picker
Defines the color of dividing lines, if enabled.
Notes
The Collection Heading section controls the appearance and structure of the header area on collection pages.
Use the Show text box option to highlight marketing messages, introduce collections, or improve SEO with relevant content.
Background and spacing settings help align the design with your store’s overall visual style.
The Wide layout option ensures an optimal display for larger screens (1440px and above).
Last updated