How to customize the Page Header

📖 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.

On this page

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 Integration menu > select Shopify Integration > Find [Target Theme] > Select Edit Visual Design.

  1. 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 Collection header tab.

  1. You can choose from up to 4 different layouts as follow:


Note: Please be careful when you make any changes to the Collection layout, you will need to re-setup your Breadcrumbs.

  1. Select Change layout.
  2. 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.
  3. Utilize our previews and select your preferred setting.
  4. 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 Header background color

You can check more information about the STYLING tab here.

  • Click 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 Integration menu > select Shopify Integration > Find [Target Theme] > Select Edit Visual Design.

  1. 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: Image will show in 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 image background color.

You can check more information about the STYLING tab here.

Click 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 Integration menu > select Shopify Integration > Find [Target Theme] > Select Edit Visual Design.

  1. 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 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’s size.

Styling configuration

You can check more information about the STYLING tab here

Click 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 Integration menu > select Shopify Integration > Find [Target Theme] > Select Edit Visual Design.

  1. 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 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 Integration menu > select Shopify Integration > Find [Target Theme] > Select Edit Visual Design.

  1. 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 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.


    Click 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 support@boostcommerce.net.