📖 In this article, we are going to learn more about what is Collection/Search Header and how to use it to optimize your theme’s layout and make it look the way you’d like it to.
⚠ This article only works for Boost AI Search & Discovery V3 new Theme settings. To find out which version of our app your store's current theme is installed with, please follow this article.
About Collection Header
While previewing/editing your Collection Page, the Collection Header section will appear on the top left of the theme editor. It is a combination of elements that can be customized to optimize the appearance of your content and improve the conversion rate of your website. With a wide range of parameters at your disposal, you can fine-tune every aspect of the Collection Header to make it look just the way you want it to.
Customize Collection Header
The Collection Header section is a powerful tool that can be customized to optimize the appearance of your content and improve the conversion rate of your website. With a wide range of parameters at your disposal, you can fine-tune every aspect of the Collection Header to make it look just the way you want it to.
How to access Collection Header settings
1. From the app's admin, go to the Integration menu > select Shopify Integration > Find [Target Theme] > Select Edit Visual Design.
2. Select Layout library on the right panel > Switch to Collection header.
Collection Header
Layout Library
You can choose our pre-designed layout for your Collection header.
1. Select the meatballs menu (⋯) button on the right panel > Library > Switch to the Collection header tab.
2. You can choose from up to 4 different layouts as follows:
Note: Please be careful when you make any changes to the Collection layout, you will need to re-set up your Breadcrumbs.
3. Select Change layout.
4. On the left panel, go to the Collection header section > On the right panel, customize the Content position (unavailable for Collection header 3), Header background color and Content box color to your liking.
5. Utilize our previews and select your preferred setting.
6. Select Save.
Content position
Options for content position depend on the Collection header layout. You can change the Collection header layout in the Layout Library.
Collection header 1: (2 options: Left & Right).
Collection header 2 & 4: there are 9 options.
Color
You can change the Header background color
You can check more information about the STYLING tab here.
Click the Save button to save all changes you have made
Collection Image
The Collection Image element is designed to display the images of your Shopify collections on your page to increase your conversion rate. You can use the Collection Image element to promote your collection on any non-collection page or use it on a collection page.
To customize the Collection Image on a page header:
1. From the app's admin, go to the Integration menu > select Shopify Integration > Find [Target Theme] > Select Edit Visual Design.
2. Under the Collection header section > Select Add element on the left panel > Select Collection image.
Note: When you first edit your theme, the default elements have been automatically added based on the [Target Theme] settings.
Collection image configuration
Collection image size: there are 4 options:
Small
Medium
Large
Original: The image will show in its original size
Tick/untick to use Parallax effect to to boost the visual experience of your page.
💪 Parallax effect is a technique where background images move slower than foreground images, creating an illusion of depth on a two-dimensional site.
Parallax direction:
Vertical
Horizontal
Color
You can change the image's background color.
You can check more information about the STYLING tab here.
Click the Save button to save all changes you have made.
Collection Title
The Collection Title element is designed to display the titles of your Shopify collections on your page to increase your conversion rate. You can use the Collection Title element to promote your collections on any non-collection page or use it on a collection page.
Access the Collection Title element
To customize the Collection Title on a page header:
1. From the app's admin, go to the Integration menu > select Shopify Integration > Find [Target Theme] > Select Edit Visual Design.
2. Under the Collection header section > Select Add element on the left panel > Select Collection title.
Note: When you first edit your theme, the default elements have been automatically added based on the [Target Theme] settings.
Collection Title configuration
Color
You can change the Collection title color by selecting from the Color board here:
Text
Text alignment:
Left
Center
Right
Text transform:
- : None
AG: Uppercase
ag: Lowercase
Ag: Capitalize
Font
Font family: You can type in to search for the desired font or select from the dropdown list.
Font style
Example: Alegreya offers multiple Font styles (Regular, Italic, Medium, etc…), while Mono only offers one Font style (Regular).
Font size: You can type in the box the font size number manually (px) or adjust it with the progress bar to change your font size.
Styling configuration
You can check more information about the STYLING tab here.
Click the Save button to save all changes you have made.
Collection Description
The Collection Description element is designed to present the description of your Shopify Collections on your page to increase your conversion rate. You can use the Collection Description element to promote your collections on any non-collection page or use it on a Collection page.
Access the Collection Description element
To customize the Collection Description on a page header:
1. From the app's admin, go to the Integration menu > select Shopify Integration > Find [Target Theme] > Select Edit Visual Design.
2. Under the Collection header section > Select Add element on the left panel > Select Collection description.
Note: When you first edit your theme, the default elements have been automatically added based on the [Target Theme] settings.
Collection Description configuration
We re-use your styling of the Collection description of your Shopify Collections.
Click the Save button to save all changes you have made.
Breadcrumbs
You can add Breadcrumbs to your page to boost your conversion rate, particularly for SEO purposes. By default, if this is your first-time setup, you may need to add this element first before you can edit it. To access its settings:
Step 1: Click on the Add element button in the Collection Header section located in the Left Panel.
Step 2: Click on the Breadcrumbs element in the dropdown menu
Access the Breadcrumbs element
To customize the Breadcrumbs on a page header:
1. From the app's admin, go to the Integration menu > select Shopify Integration > Find [Target Theme] > Select Edit Visual Design.
2. Under the Collection header section > Select Add element on the left panel > Select Breadcrumbs.
Note: When you first edit your theme, the default elements have been automatically added based on the [Target Theme] settings.
Breadcrumbs configuration
Tick/Untick to:
Show collection list: Once ticked, it will display the collection list option to help your users redirect to the All collection page
Show collection title
Show pagination: In case you’d like to optimize your Search Engine Optimization on your Breadcrumbs, turn on this option.
Breadcrumbs placement
There are 2 options:
On top, you can change Alignment for Breadcrumbs
Above title
Alignment
Left
Center
Right
About Search Header
The Search Header is used to customize your search page header section. To access its settings:
Step 1: On the top bar of the editor, from Preview dropdown, select Search page
Step 2: The Search Header section now appears on the left panel.
Customize search header
How to access Search Header settings
Step 1: From the app's admin, go to the Integration menu > select Shopify Integration > Find [Target Theme] > Select Edit Visual Design.
Step 2: From the top bar, in the middle, click the dropdown menu > select Search page.
Step 3: In the editor, on the left panel, select the Search Header section.
When you switch the Preview to "Search page", the Collection header will be hidden and the Search header will be displayed instead.
Regarding the Search header section, you can only hide or show this section.
Step 4: Click the Save button to save all changes you have made.
Tutorial video
Watch this tutorial video to have a visual understanding of how you can customize your Collection Header:
If you need any further assistance, please do not hesitate to contact us at [email protected].