Flexible content section in Be Yours - Shoppable video (blocks) Preset

The Shoppable video (blocks) preset is a prebuilt layout in Flexible content. Show short product-linked video cards in a flexible grid.

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 Shoppable video (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 Shoppable video (blocks).
  • Edit the preset's blocks and click Save.
docs__be-yours__flexible-content-section-in-be-yours-shoppable-video-blocks-preset__01.webp

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:

  • Heading
  • Grid containing five Video card blocks
docs__be-yours__flexible-content-section-in-be-yours-shoppable-video-blocks-preset__02.webp

You can edit and rearrange the nested blocks in the Theme Editor.

3. Configure the Content
  • Open each Video card and choose a Shopify-hosted Video.
docs__be-yours__flexible-content-section-in-be-yours-shoppable-video-blocks-preset__03.webp
  • Optionally set a Cover image, Product, Title, Label, or custom Link.
docs__be-yours__flexible-content-section-in-be-yours-shoppable-video-blocks-preset__04.webp
  • Choose card playback and shopping actions.
  • Adjust Grid columns and mobile swipe.
docs__be-yours__flexible-content-section-in-be-yours-shoppable-video-blocks-preset__05.webp

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.
docs__be-yours__flexible-content-section-in-be-yours-shoppable-video-blocks-preset__06.webp

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
Video card > Card ratio Choose Vertical 9:16, Portrait 3:4, or Square.
Video card > Autoplay when in view Play muted clips as they enter view.
Video card > Show title / Show price Display card information from the product.
Video card > Enable quick view Offer product quick view when available.
docs__be-yours__flexible-content-section-in-be-yours-shoppable-video-blocks-preset__07.webp

| Setting | What it controls |

| --- | --- | | Grid > Number of columns on desktop / Mobile | Arrange the video cards. | | Grid > Enable swipe on mobile | Use a horizontal mobile row. |

docs__be-yours__flexible-content-section-in-be-yours-shoppable-video-blocks-preset__08.webp

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
  • Video cards initially use five columns on desktop and two columns on mobile with swipe enabled.
  • A product selection provides title, price, and link; a custom title/link can override those defaults.
  • Clips download when in view, and autoplay respects the visitor’s reduced-motion preference.
  • 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.