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, ensure you have applied the required settings in Shopify admin -> Products -> Collections. Read more information in the initial documentation.
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. Read about the aspect ratio here.
The collection title and description can be set to the "Left" or "Center" in the "Text alignment" picker. This option is designed to work on both desktop and mobile.
If you need to set up the color of the title, use the "Heading" picker. Here you can paste the hex code into the related field or select the color using the paint palette. The color settings will be applied to both desktop and mobile.
The color of the description can be set in the "Description" picker. The color you apply to the item will be used for both desktop and mobile.
Section 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 "None" option.
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.
In the following examples, you can view how the section might display on desktop and mobile:
Last updated