1. What is a collection banner?
A collection banner is a key visual and informational component on a collection page, primarily used to highlight and present various content such as featured images and breadcrumbs. It serves both aesthetic and functional purposes, enhancing user engagement and guiding users through the collection.
2. How to show a collection banner on a collection page?
To show a collection banner on a collection page and configure its settings, follow these steps:
- Look for the option labeled "Show collection image" and tick the checkbox to display the collection image on the banner.
- Adjust the height of the collection image on desktop devices.
- Set the overlay opacity of the image. The higher the value, the clearer the overlay on the image.
- Adjust the height of the collection image for mobile devices.
- Set the padding on top & bottom of the banner. This can range from 0 to 100 px.
If you need to add a specific title to the collection banner, you will need to follow these settings:
- Decide whether to display the collection title.
- Adjust the position of the collection title.
- Adjust the size of the collection title. This can range from 50% to 200% of the default size.
3. How to show breadcrumbs in the collection page?
Breadcrumbs are a navigational aid used in websites and applications to help users understand their location within the site's hierarchy and to easily navigate back to previous sections.
To show breadcrumbs on a collection page and configure their settings, follow these steps:
- Select "Breadcrumbs" from the list of available blocks.
- Tick “Show breadcrumb borders” or “Make breadcrumbs full width on desktop” if needed
- Adjust the alignment of the breadcrumbs on desktop/mobile devices.
- Choose the color of background/text/text link for light/dark mode for the breadcrumbs.
4. How to show a collection description on a collection page?
To show the collection description on a collection page and configure its settings, follow these steps:
- Add a block and select "Description".
- Adjust the alignment of the content on desktop/mobile devices.
- Adjust the style settings (like background color, text color, and padding) to match your website's design.
- Adjust the padding on top/bottom of the block
If the collection description is long, use the "Show Read More" button feature. The "Read More" button helps manage long descriptions, keeping the page clean and user-friendly.
- Specify how many lines are shown by default.
- Customize the label of the button.
