How to set up Multicolumn Section in Be Yours

The Multicolumn section lets you arrange images, videos, headings, and descriptions in a grid of columns. Each Column block can also open a popup with more information, an optional image, and a button.

Version updates: Video and popup support were introduced in 8.2.0. Version 9.3.0 added desktop scrolling and edge-to-edge rows. In 10.0.0, you can limit popup image height, use a section color scheme, and choose whether to use the theme's corner radius or a custom one. See the Be Yours release notes.

Demo Usage

You can see the standalone Multicolumn section on the Be Yours – Beauty Demo homepage.

• Section heading: Nature Meets Science.
• Placement: Between What customers say and Our New Collections.
• Example columns: Glow with confidence, Nourish, naturally, Kind to skin and earth, and Trusted by thousands.

This example uses the standalone Multicolumn section with Column blocks, not the Multicolumn preset in Flexible content. You can also refer to the official Multicolumn guide for video and popup examples.

1. Add the Multicolumn Section

• From Shopify admin, go to Online Store > Themes and click Customize.
• Open the template where you want to display the section.
• Click Add section and select Multicolumn.

  

• Click Add Column to add more cards, then drag the blocks to rearrange them.

• Click Save when finished.

Each Column block can have its own image or video, heading, description, colors, popup, and button.

2. Add a Video to a Column

• Open a Column block.
• Select Video to choose or upload a Shopify-hosted video (such as .mp4 or .mov).
• Optionally choose a Video poster image to display before playback. If no poster is selected, the video's preview image is used.
• Add a Heading and Description if needed.

The video supports a short muted preview on hover and a play/pause button. If both Image and Video are selected in the same block, the video is displayed.

3. Set Up the Description Popup

In the Column block, enable Show description in popup. Add text to the Description field: the popup opens from the + icon beside the column heading. The description is displayed inside the popup instead of directly on the card.

Under Popup settings, configure:

Setting	Description
Popup image	Optional image displayed in the popup.
Image position	Top, Bottom, Left, or Right.
Popup image height	Natural, Small, Medium, or Large. Added in 10.0.0.
Justify text in popup	Align the description evenly on both sides.
Button label	Text displayed on the popup button.
Button link	Destination when the button is clicked.
Use underline button style	Display an underline-style button.

To add a clickable popup button, enter a Button label and assign a Button link.

Note: The popup trigger requires a description. If Show description in popup is disabled, the description and button appear on the card instead.

4. Configure the Section Layout

Select the Multicolumn section to adjust the layout:

• Image ratio: Adapt to image, Square, Portrait, Landscape, or Wide.
• Image focal point: Choose which part of an image stays in view when cropped.
• Image width: One-third, Half, or Full width of the column.
• Number of columns on desktop: Choose 1–6 columns.
• Desktop content alignment and Heading alignment: Left, Center, or Right.
• Enable scroll on desktop: Let visitors scroll horizontally through the columns.
• Run the row to the screen edges: Extend the row beyond the standard page width.
• Number of columns on mobile: Choose 1 or 2 columns.
• Enable swipe on mobile: Allow horizontal swiping on phones.
• Mobile content alignment: Left, Center, or Right.
• Open links in a new tab: Open column links and buttons in another tab.

You can also edit the section Heading, Heading size, Heading tag, Show section divider, and Top/Bottom padding.

5. Customize Colors, Corners, and Highlight

Section settings:

• Use color scheme: Enable it and select a Color scheme for the section. Added in 10.0.0.
• Highlight: Choose the highlight color when a section color scheme is not enabled.

• Use a corner radius of its own: Keep this enabled to set a custom Card border radius (0–40 px), or disable it to use the theme's shared media corner radius. Added in 10.0.0.

• Enable highlight and Highlight style: Apply text highlighting to the section heading.

Column block settings:

• Background color, Heading color, and Text color: Style individual cards.
• Heading size: Adjust the heading within a column.

• Enable highlight and Highlight style: Highlight text within a column.

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

• If a popup does not open, enable Show description in popup and make sure the Description is not empty.
• If a popup image looks too tall, reduce Popup image height or select another Image position.
• If a button does not open a page, enter a valid Button link.
• If columns look crowded on phones, try 1 column or enable swipe on mobile.
• If the video poster does not appear, check Video poster image or the video's preview image.
• The standalone Multicolumn section uses Column blocks; the Multicolumn (blocks) preset in Flexible content has a different block structure.

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.