Dynamically Display Collection Banner Based on Each Collection

About Collection Banner

A Collection Banner is an image or visual element displayed at the top of a collection page, representing the collection’s theme or purpose.

Dynamic banners allow each collection to showcase its unique banner image automatically based on the collection data from Shopify.

Dynamically Display Collection Banner Based on Each Collection

Step 1: Add or Change Collection Featured Image in Shopify (Optional)

Note: If you’ve already added images for your collections, you can skip this step.

• Log in to your Shopify Admin. Go to Products > Collections.
• Select the collection you want to customize.

• Under the Collection Image section, upload or change the featured image for the collection.

This image will serve as the banner for the corresponding collection.

• Save your changes.

Step 2: Create a Collection Page in GemPages

For a detailed guide on creating collection pages, refer to GemPages Collection Page Setup.

• Open the GemPages dashboard.
• Go to Pages > Collection and create a new Collection Page.
• Add necessary collection elements like a Product List to the page.

Step 3: Add Collection Banner Element

In the GemPages editor, drag and drop the Collection Banner element onto your Collection Page layout.

The banner will dynamically display the featured image of the current collection viewed by the customer.

Customize the banner’s size, alignment, and style using the settings panel.

Add other dynamic collection elements to the banner such as Collection title, description, etc,… This ensures each Collection Page updates correctly with its unique products, titles, and features from Shopify data. 

Once you’ve completed designing the Collection Page, click Save.

Step 4: Assign Collection

Assign the newly created Collection Page to collections in your Shopify admin:

In the GemPages Editor, click the Collection Assigned button on the top-left bar to choose where to apply your Collection Template.

• All Collection Pages: The template will be applied to every collection in your store.
• Specific Collections: Select the collections you want to apply this template to.

Save your changes, and your dynamic banners are ready to display.

By following these steps, you can efficiently set up dynamic collection banners that adapt automatically to each collection in your store, ensuring a cohesive and personalized shopping experience for your customers.