Collection banner

Banner settings

Setting	Description
Show breadcrumbs	Enable this option to display the breadcrumb navigation trail on your pages. Customers can back to the homepage by clicking on homepage link in breadcrumbs.
Breadcrumbs color	The “Breadcrumbs color” setting offers four options to customize the color of breadcrumbs: Text main color Text secondary color Headings color Headings secondary color It's important to note that the color scheme you choose for these four options will be consistent throughout your website.
Breadcrumbs color hover	The “Breadcrumbs Color Hover” setting offers four options to customize the color of breadcrumbs when hovered over: Text main color Text secondary color Headings color Headings secondary color Note: The breadcrumb corresponding to the current page (the last breadcrumb) receives the hover color. This helps users better navigate and understand which page of the store they are currently on.
Hide banner	Enable the setting to hide the banner.
Heading size	The heading size setting offers three options to control the size of your main heading on the page: Small Medium Large
Heading weight	Choose the appropriate font weight for headings to ensure they stand out and align with your design.
Heading color	The ‘Heading color’ setting offers four options to customize the color scheme of your main heading: Text main color Text secondary color Headings color Headings secondary color
Text color	The “Text color” setting offers four options to customize the color scheme of text: Text main color Text secondary color Headings color Headings secondary color
Show collection description	On the Collection page (Products/Collections – theme store) enter the text that you want to be shown on collections' banner. Check screenshots under the table. Then enable the toggle.
Show collection image	On the Collection page (Products/Collections – theme store) add a featured image of the collection. In the left sidebar, find image settings and click edit. Check screenshots under the table. Then enable the toggle to make an image visible on collections' banner.
Banner background image	Add an image as the background for your banner to enhance its visual appeal and match your overall design.
Banner background mobile	Choose a different background image for mobile devices to ensure the banner looks good and maintains visual consistency across different screen sizes.
Banner left overlay	Apply an overlay over the banner image on the left to enhance its visual appeal.
Banner right overlay	Add a second overlay to the banner image on the right, allowing for creative combinations of overlay.
Make section full width	Enable the toggle and the section will take up the full width of the page.
Shape position	Choose the position of shape: Top: The shape is displayed only at the top of the section. Bottom: The shape is displayed only at the bottom of the section. Both: The shape is shown at both the top and bottom of the section.
Type	Select the shape type that enhances the visual appeal of your banner the most.
Color	You can select the color of the shape to complement the color of the banner.
Width	Adjust the shape width using the slider. But notice that it has an impact on section width.

Collection description

To show a collection description in the banner:
1. Go to Dashboard > Collections.
2. Select a collection.
3. Enter text in the Description (rich text field).
4. In the Theme Customizer, enable the “Show collection description” toggle.
5. Click Save.

We can add a featured image of the collection through the 'Show collection image' option.

To show a collection image in the banner on the right:
1. Go to Dashboard > Collections.
2. Select a collection.
3. Add an image in the “Image” block on the right.
4. In the Theme Customizer, enable the “Show collection image” toggle.
5. Click Save.

Alternatively, you can include a custom image using the 'Show collection description' feature. This allows the heading, description, and image to be centered within the banner.

To show a collection image centered with heading and description in the banner:
1. Go to Dashboard > Collections.
2. Select a collection.
3. In the Description field, enter your text, then insert the image using the small image icon in the top settings menu.
4. In the Theme Customizer, enable “Show collection description”.
5. Disable “Show collection image”.
6. Click Save.

Section settings

Background color	There are six options: Background main, Background section 1,2,3,4,5. Colors for these backgrounds can be set in the Theme Settings/Colors block.
Background gradient	Use the gradient picker to create a custom gradient for your section background.
Top padding	The ‘Top padding’ setting allows you to adjust the amount of space at the top of the section using a slider.
Bottom padding	The ‘Bottom padding’ setting functions similarly to the ‘Section top padding’ setting, but controls the space at the bottom of the section.