Collection Banner Element

What is the Collection Banner Element?

The Collection Banner Element in GemPages is an element that allows you to display a custom banner at the top of your collection pages. 

How to Add the Collection Banner to Your Collection Page?

Step 1: Locate the Collection Banner Element in the left sidebar of the GemPages editor.

Step 2: Drag and drop the element into the desired position on your page.

The image will automatically appear based on the settings in Shopify.

Collection Banner Element Settings

The Collection Banner Element offers several customization options to help you design the perfect banner for your collection pages.

1. Layout

Control the content arrangement on the Collection Banner:

Choose Layout: Select a layout style for the content on the banner.

Column Width:

• Fit to content: Automatically adjusts column width based on content.
• Aspect Ratio: Set a specific column ratio for consistency.

2. Collection Banner

• Image: The banner image is pulled directly from your Shopify collection settings. If you want to change the banner image, you need to update it within Shopify.
• Scale: You can choose either Cover (for the image to cover the entire banner area) or Contain (to ensure the full image is visible without stretching).
• Position: You can adjust the image’s position within the banner.
• Repeat: Determine if the image should repeat across the background.
• Attachment: Controls image behavior: Scroll moves with the page, Fixed stays stationary, and Local scrolls within its container.

3. Size

• Fit text to content: Toggle this setting on or off to automatically adjust the text size to fit within the content area.
• Height: Adjust the height of the banner in pixels.
• Content width: Set the width of the content in either pixels or percentages.
• Content align: Align the content (e.g., left, center, right) based on your design needs.

4. Overlay

• Color: Choose a color for the overlay, which can add a visual effect to the banner.
• Opacity: Adjust the opacity of the overlay to make it more subtle or bold, depending on your design preferences.

5. Effect

Hover effect: You can apply a hover effect to the collection banner. The options include None or Zoom.

If you select the zoom effect, you can further customize:

• Zoom value: Control the level of zoom on hover.
• Zoom time: Set the duration of the zoom effect.

How to Change Collection Banner?

To change the Collection Banner, you’ll need to update it within Shopify. 

Here’s a quick guide:

Step 1: In your Shopify admin, go to Products > Collections.

Step 2: Select the collection for which you want to update the banner.

Step 3: Go to Image, click Edit to change the banner image, then click Save.

Go back to the GemPages editor, click Sync again, and the collection banner will be updated.