Skip to main content

Banner collection page

This guide describes how to set up a banner collection page.

Below is the guide to create a section like this.

1.webp

Add the Banner with text section​

  1. On your store's Shopify admin page, from the left-side menu, select Sales channels > Online store > Themes.

  2. In the Current theme section, select Edit theme (or Customize) to open the Theme editor.

3ec3b6de-9b32-4084-af24-02cc1e65b512.webp

  1. Add Section

3.webp

  1. Add the following blocks:

4.webp

  1. Configure the section and blocks

  • Section:

    • Height: Select the Custom option to adjust the height (change from 0 to 100vh)

    • Background image: Select an image for desktop and mobile from your store’s library, or use Connect dynamic source

If the background image is selected from the library, then all collections using the same template will share the same image.

If the background image uses Connect dynamic source, then each collection will display its corresponding image.

5.webp

  • Block Group:

    • Position: select Space between

    • Height: select Fill

6.webp

  • Block text:

    • Text: select Connect dynamic source to pull the collection name

    • Configure typography, padding, and more to match your brand’s design.

7.webp