The Bento grid (blocks) preset is a prebuilt layout in Flexible content. Combine a split hero and smaller supporting tiles into an editorial bento layout.
Available in Be Yours 10.0.0 or later. The preset is optional and does not change existing pages unless you add it.
STEPS:
1. Add the Bento grid (blocks) Preset
- From Shopify admin, open Online Store > Themes and click Customize.
- Open the template where you want to display the content.
- Select Add section and open the Flexible category.
- Choose Bento grid (blocks).
- Edit the preset's blocks and click Save.
Note: Choose the preset when adding the section. It creates a Flexible content section with ready-made blocks; you can then customize those blocks.
2. Understand the Preset Structure
The starting layout contains:
- Row with a Group text panel and a Banner panel
- Inside the Group: Subheading, Heading, Text, and Button
- Inside the Banner: Heading and Button
- Grid with Image, Group (Jumbo text + Text), and Image
You can edit and rearrange the nested blocks in the Theme Editor.
3. Configure the Content
- Update the Row Group copy and button.
- Set the Banner media, heading, and link.
- Replace the two supporting Images in the Grid.
- Edit the middle Grid Group’s Jumbo text and supporting Text.
Add more blocks
- Select the Flexible content section, or a container block such as Row, Grid, Group, Banner, or Slider.
- Click Add block, choose the block you want, then configure its settings.
- Drag blocks to rearrange them. You can add or remove blocks beyond the preset's starting layout.
Available blocks in Be Yours 10.0.0
| Category | Blocks |
|---|---|
| Text and actions | Subheading, Heading, Jumbo text, Text, Button, Popup link |
| Media and visuals | Image, Video, Video card, Banner, Before / after, Logo, Icon |
| Products and information | Product card, Collection products, Collection card, Blog posts, Countdown, Spec |
| Layout and structure | Row, Grid, Group, Slider, Tabs, Accordion, Spacer, Divider |
| Promotion and utilities | Marquee, Testimonial, Newsletter form, Menu, Social icons, Payment icons, Custom Liquid |
Nested blocks: Tabs contains Tab blocks, and Accordion contains Accordion item blocks. Select an individual Tab or Accordion item to add its content blocks. Available choices depend on the selected container and nesting level. Shopify app blocks can also be added where the editor offers them.
4. Configure the Main Settings
| Setting | What it controls |
|---|---|
| Row > Columns / Space between blocks | Adjust the split hero ratio and spacing. |
| Setting | What it controls |
|---|---|
| Group > Use color scheme / Color scheme | Give individual tiles their own colored surface. |
| Setting | What it controls |
|---|---|
| Banner > Desktop height / Mobile height | Control the hero media tile. |
| Setting | What it controls |
| --- | --- | | Grid > Number of columns on desktop | Choose the supporting tile count per row. | | Grid > Enable swipe on mobile | Make the supporting row swipeable on phones. | | Setting | What it controls |
| --- | --- | | Image > Image ratio | Control supporting image crop. |
The Flexible content section itself also supports Color scheme, Desktop content alignment, Mobile content alignment, Make section narrow, Make section full width, Section height, Background image, Overlay opacity, Show section divider, and Top/Bottom padding.
5. Notes and Troubleshooting
- The default split Row uses a 1:2 ratio and the supporting Grid starts with three columns.
- Groups, Banner, and Grid are nested containers, so select each tile before editing its content.
- The public Theme features demo shows a bento-style Flexible content composition; it may have been customized beyond this preset.
- If something does not appear, check that the relevant block has content and is not hidden.
- For mobile layouts, review the parent Row/Grid/Slider settings where applicable and preview the page in mobile mode.
- If highlight styling is enabled, select the words to highlight and click the italic (I) button in the text editor.
Need Further Assistance
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.
शेयर करना:
How to Set Up the Collage on Scroll Section in Concept
How to Set Up Flexible Content in Be Yours