What are seamless sections?
The Beautify theme helps build a visually cohesive storefront by blending sections together - allowing content to flow smoothly from one area to another to create a unified experience. Combine color gradients, image fades, and boundary spacing to smooth transitions between sections.
How to create seamless sections
Beautify has a range of style and layout settings to support different blending techniques:
- Seamless sections with a collage hero section
- Seamless sections with gradients
- Seamless sections with boundary joins
- Seamless sections with image fades
1. Seamless sections with a Collage hero section
The Collage hero section can share a background image with up to five sections that are above or below it. This is a quick and simple way to create a sense of continuity and flow between sections. The shared background image is controlled by a Section layout background setting Show behind sections above or Show behind sections below. In addition to showing behind other sections, the Collage hero background image can also fade into a color at the top or the bottom of the image.
Refer to our Collage hero guide for more details about how to use this dynamic section.
Image to show a Collage hero section with a background image extending below two subsequent sections.
Image to show a Collage hero section with a background image that does not extend below subsequent sections.
2. Seamless sections with gradients
To create a seamless section transition with gradients, select sections that support a Section Background. Blog posts and pages also support gradients as backgrounds.
Tip
The Section background options available are:
- Default: Uses a color scheme
- Color: Choose a custom Background color
- Image: Upload a Background image
- Simple gradient: Define the start and end colors, plus select the gradient style
- Advanced gradient: Fully customize the gradient using the Color stop settings
For example by choosing a Simple gradient, two sections can be blended together. A Shoppable carousel section can be joined to a Scrolling text section so they appear connected.
Image to show a shoppable carousel with a gradient background blending into a scrolling text section.
Image to show a shoppable carousel and a scrolling text section WITHOUT a gradient join - the two sections appear separate with different colored backgrounds.
Steps
- Add a section which has Section background style settings.
- In the first section, under the Style settings, choose Simple gradient as the Section background type.
- Select a Gradient end color and make a note of it.
- In the second section, under the Style settings, choose Simple gradient or a Color as the Section background type.
- Use a color that matches the Gradient end color of the section above. For example:
Set the Gradient start color to be the same as the Gradient end color of the section above
or
Choose a Color scheme or Background color where the background matches the Gradient end color of the section above.
3. Seamless sections with boundary joins
Create a seamless section with boundary joins by selecting two sections that are not full width. Blog posts and pages also support boundary joins.
If the section is not full width, Beautify offers three Boundary above section layout choices
- Default - Will leave the standard spacing at the top of the section
- Tight - Will leave a smaller space between sections
- Join - Adjacent sections will touch each other
For example, by choosing Join, two sections can appear as a single, seamless section. A Shoppable image section can be joined to a Rich text section so they appear connected. If you do not enable this option, the sections remain completely separate.
Image to show a rich text section joined to the shoppable image section above it. Boundary above section is set to Join.
Image to show a rich text section with a shoppable image section where the two sections remain separate Boundary above section is set to Tight.
Steps
- Add a section which has the Boundary above section layout settings.
- In the lower section, select Join as the setting for Boundary above section.
4. Seamless sections with image fades
For a full width image section, use image fades at the top or the bottom of the image to blend with the adjacent section.
Currently, the following sections include this option when they are set to be Full width:
Image banner with scrolling text, Image banner and Shoppable image.
Image to show an image in an Image banner section faded into a Get the look section.
Steps
- Add an full width image section.
- Select Enable top fade or Enable bottom fade.
- Select a fade color and depth.
- In the second section, under the Style settings, choose a Section background that matches the fade color.
- Adjust the fade depth and check the results on different screen sizes.
Tip
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!
Contact us