Flexible content is a new section system introduced in Be Yours 10.0.0. It lets you combine text, images, products, videos, and layout blocks to build custom page designs directly in the Theme Editor.
Instead of starting from a blank layout, you can choose one of 19 ready-made presets and customize its blocks.
STEPS:
1. Add a Flexible Content Section
- From Shopify admin, go to Online Store > Themes.
- Find your Be Yours theme and click Customize.
- Open the page or template you want to edit.
- Click Add section.
- Find the Flexible category and select a preset, such as Rich text (blocks) or Image with text (blocks).
- Edit the preset's content and layout blocks.
- Click Save.
Each preset is a starting layout. You can replace, rearrange, or add supported blocks to create your own design.
2. Choose from 19 Presets
The Flexible category includes these presets:
| Preset | Purpose |
|---|---|
| Rich text (blocks) | Headings, text, and buttons |
| Image with text (blocks) | Image and text side by side |
| Image banner (blocks) | Image or video with overlay content |
| Multicolumn (blocks) | Content arranged in columns |
| Countdown timer (blocks) | Countdown with supporting content |
| Featured collection (blocks) | Products from a collection |
| Collection list (blocks) | Collection cards |
| Logo list (blocks) | Brand or partner logos |
| Testimonials (blocks) | Customer feedback |
| FAQ (blocks) | Expandable questions and answers |
| Blog posts (blocks) | Articles from a blog |
| Email signup (blocks) | Newsletter subscription form |
| Slideshow (blocks) | Multiple sliding banners |
| Tabs (blocks) | Content organized into tabs |
| Image comparison (blocks) | Before-and-after images |
| Shoppable video (blocks) | Product-linked video cards |
| Scrolling promotion (blocks) | Moving promotional content |
| Statement (blocks) | Large brand message |
| Bento grid (blocks) | Mixed-size content layout |
3. Customize Content and Layout Blocks
In the Theme Editor, expand the section to view its blocks. Some blocks can contain other blocks, allowing you to build more detailed layouts.
| Block | Main settings or purpose |
|---|---|
| Heading, Subheading, Text, Button | Text, typography, links, and alignment |
| Image, Video, Banner | Media, sizing, positioning, and visual content |
| Row | Column proportions, vertical alignment, mobile stacking, and spacing |
| Grid | Desktop/mobile columns, spacing, and mobile swipe |
| Group | Arrange blocks vertically or horizontally; control width, padding, and colors |
| Slider | Slides per view, auto-rotate, arrows, and dots |
| Tabs, Accordion | Organize content into tabs or expandable items |
| Collection products, Collection card, Product card | Select and display Shopify products or collections |
| Countdown, Testimonial, Newsletter form | Specialized content and interactions |
To adjust a layout:
- Select a Row, Grid, or Group block.
- Change its layout and spacing settings.
- Add or move content blocks inside it, where supported.
- Check the mobile preview and click Save.
Note: Available child blocks depend on the selected parent block. Not every block can be added inside every layout.
4. Configure Section Settings
Open the main Flexible content section to adjust its overall appearance.
| Setting | Description |
|---|---|
| Color scheme | Applies a theme color scheme |
| Desktop content alignment | Left, Center, or Right |
| Mobile content alignment | Left, Center, or Right |
| Make section narrow | Restricts the content width |
| Make section full width | Extends the section across the available width |
| Section height | Auto, Small, Medium, Large, Full screen, or Custom |
| Custom height | Sets the height when Custom is selected |
| Vertical alignment | Top, Middle, or Bottom |
| Background image | Adds a section background image |
| Overlay opacity | Adjusts the overlay over the background |
| Show section divider | Displays a divider |
| Top padding / Bottom padding | Controls vertical spacing |
Some individual blocks also provide their own color scheme, width, padding, corner radius, and alignment options.
5. Configure Desktop and Mobile Layouts
Flexible content includes responsive controls for several layout blocks:
- Row: Choose column proportions such as 1:1, 1:2, or 2:1; choose whether to stack or keep columns on mobile.
- Grid: Set desktop columns, 1 or 2 columns on mobile, and optionally enable mobile swipe.
- Group: Choose vertical or horizontal direction, widths, alignment, and whether to stack vertically on mobile.
- Banner: Set separate desktop/mobile heights and optional mobile imagery.
- Slider: Choose slides per view and enable arrows, dots, or automatic rotation.
Always check both desktop and mobile previews before publishing.
6. Add Highlight Styling to Headings
For a Heading block:
- Select the Heading block.
- Enable Enable highlight.
- Choose a Highlight style.
- In the heading editor, select the text you want to highlight and click the italic (I) button.
- Click Save.
Only the italic-formatted text receives the selected highlight effect.
7. Notes and Troubleshooting
- Flexible content and its 19 presets are available in Be Yours 10.0.0 or later. Update the theme if you are using an older version.
- Presets provide initial layouts; they do not automatically populate your store's products, collections, or images.
- If a product or collection block is empty, select the relevant Shopify content in its settings.
- If content looks incorrect on mobile, check the layout block's mobile options and the section's mobile alignment.
- If a background is too dark or bright, adjust Overlay opacity or Color scheme.
- If a block is unavailable in Add block, check whether the selected parent supports it.
- If highlighted text does not display as expected, ensure the text is italicized and Enable highlight is on.
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 - Bento grid (blocks) Preset