The Tab collage section combines images, products, collections, and videos in an interactive, two-column layout. Customers can switch between content items to view their corresponding media and descriptions.
Each section supports up to 6 blocks.
Demo Usage
- Demo: Be Yours – Beauty Homepage
- Section heading: Shop by Collection
- Location: Below In Clean Beauty List and above Before & After.
- Example content: Cleansers & Toners, Serums & Essences, Body & Hand, and Baby & Kids.
STEPS:
1. Add the Tab Collage Section
- From Shopify admin, go to Online Store > Themes.
- Find your Be Yours theme and click Customize.
- Open the page template where you want to display the section.
- Click Add section and select Tab collage.
- Add Image, Product, Collection, or Video blocks.
- Configure the section and click Save.
2. Configure Layout and Display
| Setting | Description |
|---|---|
| Desktop layout | Places the image/media first or second. |
| Desktop content position | Positions the text at the top, middle, or bottom. |
| Desktop content alignment | Aligns text left, center, or right. |
| Desktop height | Sets the media height, including Adapt to image and Full screen options. |
| Show as collapsible rows | Displays the content as expandable rows instead of standard tabs. |
| Make section full width | Extends the section across the available page width. |
| Show section divider | Adds a divider above the section. |
| Mobile layout | Places the image/media first or second on mobile. |
| Mobile content alignment | Aligns mobile text left, center, or right. |
| Mobile height | Adjusts media height on mobile, including Auto and Adapt to image. |
Interaction: In standard tab mode, customers can switch items by hovering or clicking on desktop. With Show as collapsible rows enabled, customers click headings to expand or collapse their descriptions.
3. Add Content Blocks
You can combine these four block types in any order, up to a total of 6:
| Block | Main settings |
|---|---|
| Image | Image, Image focal point, Heading, Description, Button settings |
| Product | Product, Image focal point, Heading, Description, Button settings |
| Collection | Collection, Image focal point, Heading, Description, Button settings |
| Video | Cover image, Image focal point, Video, Video URL, looping, Heading, Description, Button settings |
For each block:
- Add the relevant image, product, collection, or video.
- Customize Heading and Description.
- Optionally configure Button label, Button link, Button size, and Use underline button style.
- Click Save.
Notes:
- For Product and Collection blocks, an empty heading can use the selected item's title.
- If their description is left empty, a shortened product or collection description can be used.
- A Product or Collection button can link to the selected item automatically, unless you provide a custom Button link.
- For Image and Video blocks, supply a Button link if you want a working button. Leave the Button label empty to hide it.
4. Configure a Video Block
To display a video in one of the tabs:
- Add a Video block.
- Select a Shopify-hosted Video, or enter a supported YouTube/Vimeo URL.
- Optionally upload a Cover image.
- Enable Enable video looping if needed.
- Add Video alt text for accessibility.
- Set the heading, description, and optional button.
- Click Save.
A Shopify-hosted video takes priority when both a hosted video and an external URL are supplied. Customers can start playback from the video preview.
5. Configure Heading, Colors, and Highlight
Section heading settings:
- Heading
- Heading size
- Heading alignment
- Heading tag
Color and spacing settings:
- Text, Lines, Background, Background gradient, and Highlight
- Solid button label and Solid button background
- Top padding and Bottom padding
Highlight settings are available for the section heading and individual blocks:
- Enable Enable highlight.
- Choose a Highlight style.
- Please use italic formatting by selecting the text you want to highlight and then clicking the italic (I) button in the editor.
6. Notes and Troubleshooting
- The section supports a maximum of 6 blocks.
- If content or media does not display, check that the block has the correct image, product, collection, or video selected.
- If a button is not clickable, check its Button link or selected Product/Collection.
- If tab descriptions are expandable rather than switching as one panel, check Show as collapsible rows.
- If an image is cropped, adjust Image focal point, Desktop height, or Mobile height.
- If highlighted text does not appear, enable highlight and apply italic formatting to the intended text.
- If an external video does not load, confirm that its URL is from YouTube or Vimeo.
Version note: Be Yours 8.5.0 fixed highlighted text not displaying correctly in the collapsible layout.
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:
How to Set Up the Shop the Look Section in Be Yours
How to Set Up the Testimonials Section in Be Yours