The Mosaic banner section displays a headline over a tilted collection of image, text, and product tiles. The rows can drift in alternating directions to create an animated storefront banner.
STEPS:
1. Add the Mosaic Banner Section
- From Shopify admin, go to Online Store > Themes.
- Find your Be Yours theme and click Customize.
- Open the page template where you want the banner.
- Click Add section and select Mosaic banner.
- Configure the section and add or edit the tile blocks.
- Click Save.
2. Configure the Tile Field
The Tile field settings control the layout and motion behind the main content.
| Setting | Description |
|---|---|
| Full width | Extends the banner across the available page width. |
| Tilt | Rotates the tile field, from -14° to 14°. |
| Rows | Sets 2–5 rows; the number of visible rows cannot exceed the number of tiles added. |
| Tile height | Sets the base tile height, from 12–32 rem. |
| Drift speed | Controls the row movement, from 0–10; 0 keeps the tiles still. |
| Pause the drift on hover | Pauses moving rows when a customer hovers over the banner. |
| Follow the pointer when still | Adds subtle pointer movement when Drift speed is set to 0. |
| Desktop height | Sets the banner height on desktop, from 50–100 vh. |
| Mobile height | Sets the banner height on mobile, from 50–100 vh. |
When drift is enabled, neighboring rows move in alternating directions. Pointer movement applies only to a still field and is disabled for visitors who prefer reduced motion.
3. Add and Configure Tile Blocks
The section supports up to 24 blocks. Use Add block to insert more tiles, then drag blocks to change their order.
| Block | Available settings | Purpose |
|---|---|---|
| Image tile | Image, Shape, Link | Displays a clickable image tile. |
| Block | Available settings | Purpose |
 |
||
| --- | --- | --- |
| Text tile | Text, Caption, Tile colour, Shape, Link | Displays a short promotional message or statistic. |
| Block | Available settings | Purpose |
|---|---|---|
| Product tile | Product | Displays the selected product as a product card linking to its page. |
| Block | Available settings | Purpose |
|---|
Image tile shapes: Portrait, Square, Landscape, Wide.
Text tile shapes: Portrait, Square, Landscape.
Text tile colours: Highlight, Ink, Soft.
For each block:
- Open Mosaic banner and click Add block.
- Select Image tile, Text tile, or Product tile.
- Complete the available settings.
- Add more blocks or reorder them as needed.
- Click Save.
Note: Product tiles link to their product pages. They do not include Quick View or Quick Add controls within the moving mosaic.
4. Configure the Main Content
The Content settings control the message displayed in front of the moving tiles.
| Setting | Description |
|---|---|
| Subheading | Adds a short line above the heading. |
| Heading | Adds the main banner headline. |
| Heading size | Controls the headline size. |
| Text | Adds supporting content. |
| Button label / Button link | Adds the primary button and its destination. |
| Second button label / Button link | Adds an optional secondary button. |
| Content style | Choose Card or Open on the wash. |
| Content position | Aligns content Left, Center, or Right. |
| Wash | Adjusts the lightening effect behind the content, from 0–90%. |
The Card style places the content in a panel. Open on the wash places it directly over the softly lightened tile field.
Add a valid destination to each button link if you want that button to be clickable.
5. Configure Highlight and Colors
To highlight part of the heading:
- Enable Highlight.
- Choose a Highlight style.
- In the Heading editor, select the words to highlight and click the italic (I) button.
- Click Save.
For colors, choose one of these approaches:
- Enable Use color scheme and select a Color scheme.
- Or leave Use color scheme disabled and configure the section's Background, Text, Button background, Button label, and Highlight colors individually.
6. Notes and Troubleshooting
- Mosaic banner is available in Be Yours 10.0.0 or later.
- The section supports up to 24 Image tile, Text tile, and Product tile blocks combined.
- If a row is missing, add more tiles; the section cannot create more occupied rows than there are blocks.
- If tiles do not move, check Drift speed. A value of 0 keeps the field still.
- Pause the drift on hover affects moving rows; Follow the pointer when still requires a drift speed of 0.
- If a tile is not clickable, check its Link or selected Product.
- If the headline highlight does not appear, enable Highlight and apply italic formatting to the selected words.
- Reduced-motion preferences can limit motion effects.
If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
Flexible content section in Be Yours - Statement (blocks) Preset
How to Set Up the Scroll Video Section in Be Yours