Shine Collection Header

Theme: Shine · Section type: Collection page section

The Collection header section opens every collection page with the collection title, its description, and the collection image. Use it to give each collection a clear banner before customers start browsing the products.

Note: This section is part of the collection template. You can't add it with Add section, but you can hide it. The title, description, and image come from each collection in your Shopify admin.

What you can do

• Set up the collection title, description, and image
• Choose how the collection image shows
• Make the text easy to read on the image
• Set the section height on large screens and phones
• See what customers see
• Look up every setting in "Settings reference"
• Fix common problems

Set up the collection title, description, and image

The section shows the content of the collection that customers open. You edit that content in the Shopify admin, not in the theme editor.

1. In your Shopify admin, go to Products > Collections and open a collection.
2. Edit the Title and the Description.
3. Under Collection image, add an image.
4. Click Save.

Tip: Use a wide image with the main subject in the center. The section crops the image to fit its height, and phones show a narrower part of it.

Choose how the collection image shows

1. In the theme editor, open the collection template (Collections > Default collection).
2. In the left sidebar, click Collection header.
3. Under Collection image, choose an Image style:
4. • Behind title shows the image as a full-width banner, with the title and description on top of it.
   • Beside title shows the image next to the title and description, which are aligned to the left on large screens.
   • Hidden shows only the title and description, without the image.
4. Click Save.

Make the text easy to read on the image

With Behind title, the title sits on the image. An overlay darkens or lightens the image so the text stands out.

1. Click Collection header.
2. Under Custom color, choose a Mask overlay color.
3. Drag Overlay opacity to make the overlay stronger or lighter, from 0 % to 90 %.
4. Choose a Text overlay color for the title and description.
5. Click Save.

Note: Mask overlay and Text overlay apply only when Image style is Behind title. If you don't choose them, the section uses the colors of its Color scheme.

Tip: On a busy or light image, use a dark mask with 30–50 % opacity and white text.

Set the section height on large screens and phones

1. Click Collection header.
2. Under Large screen, choose a Section height: Adapt to content, 30% screen, 50% screen, 70% screen, or Fill screen.
3. Switch to the mobile preview. Under Mobile screen, choose a Section height for phones.
4. Click Save.

Tip: Keep the header short (30% screen or Adapt to content), especially on phones, so customers see the first products without scrolling far.

What customers see

• Collection page: the header shows the collection title and description, with the collection image behind or beside them. The image zooms out slightly as the page loads.
• No collection image: if a collection has no image, the header shows only the title and description, whatever Image style you chose.
• Long descriptions: if the text doesn't fit the height you chose, the section grows to fit it.
• Phones: the header uses the Mobile screen height. With Beside title, the image moves above the title and description.

Settings reference

General

Collection image

Custom color

Large screen / Mobile screen

Troubleshooting

The collection image doesn't show.
Check that the collection has an image in Products > Collections, and that Image style isn't Hidden.

The text color doesn't change.
Text overlay and Mask overlay work only with Behind title. With Beside title or Hidden, the text uses the Color scheme.

The header is too tall on my phone.
The phone height is a separate setting. Switch to the mobile preview and set Section height under Mobile screen.

The image is cut off.
The image fills the header and is cropped to its height. Choose a taller Section height, or use an image with the subject in the center.

Related articles

• Shine Collection Products Sections
• Shine Breadcrumb
• Shine Collection List Page
• Shine Theme Settings

Updated on: 22/10/2026