The Shoppable video section lets you display a row or grid of short videos and connect each video card to a product or custom link.
This section is useful for:
- Product demos
- Tutorials
- Before and after videos
- Routine videos
- Social-style product clips
- Shoppable campaign content
STEPS:
1. Add the Shoppable Video Section
To add the section:
- From Shopify admin, go to Online Store > Themes.
- Find the Be Yours theme and click Customize.
- Open the template where you want to add the section.
- Click Add section.
- Select Shoppable video.
- Add or edit the Video card blocks.
- Configure the section settings.
- Click Save.
The section supports up to 12 Video card blocks.
2. Configure the Section Heading
The heading settings control the title area above the video cards.
| Setting | Description |
|---|---|
| Heading | Adds the main section title. |
| Heading size | Controls the visual size of the heading. |
| Heading alignment | Aligns the heading left, center, or right. |
| Heading tag | Sets the HTML tag used for the heading. |
| Subheading | Adds supporting text beside or below the heading area. |
3. Configure the Video Card Layout
The layout settings control how the video cards appear.
| Setting | Description |
|---|---|
| Number of columns on desktop | Controls how many video cards appear per row on desktop. |
| Card ratio | Controls the video card shape. |
| Spacing between images | Controls the gap between video cards. |
| Horizontal scroll on desktop | Displays the video cards in a horizontal scroll row on desktop. |
| Edge to edge | Allows the scrolling row to extend closer to the screen edge. |
| Full width | Makes the section use the full browser width. |
| Show divider | Adds a divider above the section. |
Card ratio options:
| Option | Description |
|---|---|
| Vertical (9:16) | Best for short-form vertical clips. |
| Portrait (3:4) | Best for product lifestyle clips. |
| Square (1:1) | Best for compact grid layouts. |
4. Configure Video Playback
The section includes an autoplay setting.
| Setting | Description |
|---|---|
| Autoplay when in view | Plays videos automatically when customers scroll to the cards. |
When Autoplay when in view is enabled:
- Videos play muted.
- Videos loop automatically.
- A sound toggle button can appear on the video card.
- Videos are loaded only when customers scroll to them.
- Autoplay is disabled for visitors who prefer reduced motion.
When Autoplay when in view is disabled:
- A play button appears on the video card.
- Customers can click the play button to start the video.
5. Configure Product Information
The section can show product information on each video card.
| Setting | Description |
|---|---|
| Show title | Displays the card title. |
| Show price | Displays the selected product price. |
| Enable quick view | Allows customers to open quick view from video cards when available. |
Important:
- Show price requires a product to be selected in the Video card block.
- Enable quick view works only when a product is selected and quick view is enabled in the theme.
- If no product is selected, the card can still link to a custom URL.
6. Configure Mobile Layout
The mobile settings control how video cards appear on mobile.
| Setting | Description |
|---|---|
| Number of columns on mobile | Displays 1 or 2 columns on mobile. |
| Enable swipe on mobile | Allows customers to swipe horizontally through the video cards. |
Use Enable swipe on mobile if you want the section to feel like a compact video carousel on phones.
7. Add Video Card Blocks
Each Video card block represents one shoppable video item.
Video card settings:
| Setting | Description |
|---|---|
| Video | Selects the video for the card. |
| Cover image | Sets the poster image shown before the video plays. |
| Product | Connects the card to a product and can provide the title, price, and link. |
| Title | Overrides the product title on the card. |
| Label | Adds a short tag over the video. |
| Link | Overrides the product link. |
To add a video card:
- Open the Shoppable video section.
- Click Add block.
- Select Video card.
- Add a video.
- Add a cover image if needed.
- Select a product or add a custom link.
- Add a label if needed.
- Click Save.
If no cover image is selected, the section uses the video preview image when available.
8. Configure Highlight and Spacing
The section supports highlight styling and spacing controls.
| Setting | Description |
|---|---|
| Enable highlight | Enables highlight styling for italic text in the heading. |
| Highlight style | Selects the highlight effect. |
| Highlight color | Sets the highlight color. |
| Padding top | Adds spacing above the section. |
| Padding bottom | Adds spacing below the section. |
When using highlight settings, please use italic formatting by selecting the text you want to highlight and then clicking the italic (I) button in the editor.
9. Notes and Limitations
Please note the following behavior:
- The section supports up to 12 Video card blocks.
- Vertical clips work best.
- Each Video card can use a product or a custom link.
- If a product is selected, the card can use the product title, price, and link.
- The Title setting can override the product title.
- The Link setting can override the product link.
- The Cover image is shown before the video plays.
- If no cover image is selected, the video preview image is used when available.
- Price only displays when a product is selected and Show price is enabled.
- Quick view only works when a product is selected and quick view is enabled.
- Autoplay videos are muted and loop automatically.
- Videos do not autoplay for visitors who prefer reduced motion.
- This section is designed for shoppable video presentation. It does not replace product variant selection or a full video gallery app.
Troubleshooting
If the Shoppable video section does not display as expected, please check the following:
- Make sure you are using Be Yours version 9.3.0 or later.
- Make sure at least one Video card block has been added.
- Make sure a video is selected in the Video card block.
- If the poster image does not look correct, add a Cover image.
- If the card title does not display, make sure Show title is enabled.
- If the price does not display, make sure a Product is selected and Show price is enabled.
- If quick view does not work, make sure a product is selected and quick view is enabled in the theme.
- If the card does not link correctly, check the selected Product or custom Link.
- If autoplay does not work, check whether Autoplay when in view is enabled.
- If autoplay still does not work, the visitor's browser or reduced motion setting may prevent autoplay.
- If mobile layout feels crowded, reduce the number of mobile columns or enable swipe on mobile.
- Clear your browser cache and refresh the storefront.
- Make sure you are using the latest version of the Be Yours theme.
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 Color Fan section
How to set up the Skin Quiz Section