Collection banner
The "Collection banner" section is valuable if you need to display a title, banner, and a collection description from your admin on collection pages.
Tip: Drag and drop the section to the desired position on a page. If the section is unnecessary, you can hide it. Hover over a section title and click the eye icon to hide the section.
Before proceeding with customization of the section, convince you have applied the required settings in Shopify admin -> Products -> Collections. Find the details in the initial documentation.
Layout
To add a divider between sections, use the "Dividing line" to set the position: "Top", "Bottom", or "Both". The dividing line will be hidden once you use the option "None".
On the "Top spacing" and "Bottom spacing" scales, decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.
Content
To show a description on collection pages, tick the "Show collection description" option.
Enable "Show collection image" to showcase a collection image added in the admin. The recommended image aspect ratio is 16:9. Learn more about aspect ratio here.
The collection title and description can be set to the "Left" or "Center" in the "Text align" picker. This option works for desktop and mobile.
If you need to set up the color of the title, use the "Heading color" picker. Here you can paste the hex code to the related field or choose the color using the paint pallet. The color settings will be used for both desktop and mobile.
The color of the description can be set in the "Description color" picker. The color you apply for the item will be used for a desktop and mobile.
In the following examples, you can view how the section might display on desktop and mobile:
Last updated