Collage hero – User Guides

Blend sections seamlessly with a dynamic hero collage

What is the collage hero section?

The Collage hero section in the Beautify theme is a dynamic hero area that combines a background image with layered content blocks - such as products, collections, videos, roundels, and images - that appear as users scroll, creating an engaging and interactive visual experience.

BTFY_Desktop_Support Site_Blended (1).jpg

Why use the collage hero section?

Use the Collage hero section to showcase your brand’s most important content in a bold, creative way. It helps capture attention, highlights products or collections, and adds smooth transitions that make your store feel polished and visually immersive. It is also away to connect together multiple sections to give customers a seamless scrolling experience.

How to setup the collage hero section

Steps

Open the Theme Editor and add a new Collage hero section, or edit an existing one.
Add Background Images - Upload your main background Image (landscape recommended). Optionally add a mobile image for smaller screens.
Customize Image Styles - Choose an Image tint color and adjust the Tint opacity to improve text readability.
Adjust Section layout - Use the section height sliders to control how tall the section appears. Taller values give more room for floating blocks and slow the fade into the next section.
Control section overlap - Enable background to show behind sections above or below, and set how many sections are affected to create a seamless scroll.
Add background fades - Apply fade colors at the top or bottom so the image transitions smoothly into a solid color. For best results, match the site background color.
Configure the Text overlay - Add text content and choose a Color scheme.
Add content blocks - (Collection, Image, Product, Video, or Roundel). Each block has width, offset, and visibility settings for desktop and mobile.

How to use the section layout settings

The Section layout settings control the overall size, background behavior, and scrolling effects of the Collage hero section.

Section height – desktop/mobile
Adjusts how tall the section appears on desktop and mobile devices. A taller height gives more space for floating blocks and slows down the fade into the next section, while a shorter height makes the section more compact with a quicker scroll.
Show behind sections above / below
These toggles allow the background image of the Collage Hero Section to extend behind other sections. This creates a seamless, layered scrolling effect. You can choose to have it extend upward (behind the sections above) or downward (behind the sections below).
Number of sections below
When “Show behind sections below” is enabled, this setting controls how many of the following sections the background image overlaps with. Increasing the number makes the effect last longer before fading out.
Background fade color – at top/bottom
Allows the background image to gradually fade into a solid color while scrolling. You can set different fade colors for the top and bottom of the section to create smooth transitions into surrounding sections.

Tip

Adjust the height and overlap settings until the section feels natural as you scroll. Try starting with a 2.6x height and a small number of sections below, then fine-tune the fade colors to create smooth transitions.

Caution

Setting the section height too low may cause blocks to overlap or feel cramped, while setting it too high can create excessive scrolling. Likewise, extending the background too far behind other sections may disrupt the flow of your page. Always preview your changes on both desktop and mobile to ensure a smooth experience.

How to use the block layout settings

Each block in the Collage hero section has its own layout controls so you can decide how it appears over the background image.

Show in front of the text
Toggle this setting to control whether the block appears above the text or behind it as you scroll.
Width (desktop/mobile)
Adjusts the size of the block. A larger width value makes the block bigger, while a smaller value makes it more compact.
Top offset (desktop/mobile)
Sets the vertical position of the block within the section. A lower percentage (e.g. 10%) places the block near the top, while a higher percentage (e.g. 90%) places it near the bottom.
Left offset (desktop/mobile)
Sets the horizontal position of the block. A lower percentage (e.g. 10%) places the block toward the left side, 50% centers it, and a higher percentage (e.g. 90%) pushes it to the right side.
Show on desktop / Show on mobile
Use these toggles to decide whether the block appears on desktop, mobile, or both. This helps you customize layouts for different devices.

Tip

Use the width and offset sliders to position blocks exactly where you want them. Lower percentages place blocks toward the top or left, higher percentages move them toward the bottom or right. Adjust until your layout feels balanced on both desktop and mobile.

Caution

Avoid placing multiple blocks in the same position, as they may overlap and become hard to read. Always check your layout on both desktop and mobile to ensure blocks don’t cover important text or images.

FAQs

Can I hide my blocks on mobile?

Yes. Each block has mobile-specific settings that allow you to control whether it appears on smaller screens. This gives you flexibility to simplify your mobile design and ensure the layout looks clean and user-friendly across all devices.

Can I apply custom color schemes to this section?

Yes. The Collage hero section supports custom color schemes. You can create or edit color schemes under Theme Settings > Colors and then apply them to this section. This allows you to keep the section consistent with your brand’s look and feel.

Can I use the Collage hero section on any page?

Yes. While it’s often used on the homepage to create a bold first impression, the Collage hero section can be added to any page in the Beautify theme. This lets you highlight collections, campaigns, or special content wherever needed.

Bring your business ideas to life with Shopify

Can't find what you're looking for?

Our support staff are here to answer your queries, so don't hesitate to write to us!