The Slideshow section in the Be Yours theme allows you to display a sequence of image or video slides with text, buttons, overlay content, and optional auto-rotation.
This section is useful for homepage hero banners, campaign promotions, product launches, collection highlights, seasonal sales, brand storytelling, and video-based introductions.
Setup Slideshow Section
STEPS:
1. Adding the Slideshow Section
To add the Slideshow section to your store:
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit and click Customize.
- Open the page template where you want to add the slideshow.
- Click Add section.
- Select Slideshow.
- Click Save.
The Slideshow section can be added to most page templates, but it is not available in the header, footer, or custom overlay groups.
2. Understanding the Slideshow Structure
The Slideshow section supports two block types:
| Block type | Description |
|---|---|
| Image slide | Displays an image with optional text and buttons. |
| Video slide | Displays a Shopify-hosted video or an external YouTube/Vimeo video with optional text and buttons. |
You can add up to 6 slides in one Slideshow section.
A typical slideshow setup includes:
- One or more image or video slides.
- A heading and short text for each slide.
- One or two call-to-action buttons.
- Desktop and mobile layout adjustments.
- Optional auto-rotation.
3. Section Settings
The section settings control the overall slideshow layout, size, rotation, colors, and spacing.
Slideshow type
- Modern: Uses the modern slideshow layout.
- Legacy: Uses the classic slideshow layout.
Use Modern for a more dynamic visual presentation. Use Legacy if you prefer a more traditional slideshow style.
Text alignment
- Text alignment: Align the slide content on desktop.
- Available options: Left, Center, Right.
Desktop image height
The Image ratio setting controls the slideshow height on desktop.
Available options include:
| Option | Description |
|---|---|
| 550px | Short banner height. |
| 650px | Medium banner height. |
| 750px | Tall banner height. |
| 850px | Extra tall banner height. |
| 900px | Very tall banner height. |
| 100vh | Full viewport height. |
| Adapt to first image | Uses the first slide image ratio. |
Auto-rotation
- Auto-rotate slides: Enable this option to make the slideshow change slides automatically.
- Change slides every: Set the auto-rotation speed.
The auto-rotation speed can be set between 3s and 9s.
Full width
- Full width: Enable this option to make the slideshow span the full browser width.
If this option is disabled, the slideshow will stay within the page width.
Animation
-
Image behavior: Choose the image animation behavior.
- None: No image animation.
- Ambient movement: Adds subtle motion to the slide media.
4. Mobile Layout Settings
The mobile layout settings control how the slideshow appears on smaller screens.
Mobile text alignment
- Mobile text alignment: Align the slide content on mobile.
- Available options: Left, Center, Right.
Mobile image height
The Mobile image ratio setting controls the slideshow height on mobile.
Available options include:
| Option | Description |
|---|---|
| 300px | Short mobile banner. |
| 400px | Medium mobile banner. |
| 500px | Tall mobile banner. |
| 600px | Extra tall mobile banner. |
| 100vh | Full mobile viewport height. |
| Adapt to first image | Uses the first slide image ratio. |
Show text below
- Show text below: Enable this option to display slide text below the image on mobile.
If this option is disabled, the text displays as an overlay on mobile.
5. Adding an Image Slide
An Image slide displays a banner image with optional text and buttons.
To add an image slide:
- Open the Slideshow section in the Theme Editor.
- Click Add block.
- Select Image slide.
- Upload the desktop image.
- Optionally upload a mobile image.
- Set the image position.
- Add the subheading, heading, text, and buttons.
- Adjust the text box position and highlight settings.
- Click Save.
Image settings
| Setting | Description |
|---|---|
| Image | Upload the main desktop image. |
| Mobile image | Upload a separate image for mobile devices. |
| Image position | Adjust the focal position of the image. |
| Text box position | Choose where the text appears on the slide. |
Text box position options include:
- Top left
- Top center
- Top right
- Middle left
- Middle center
- Middle right
- Bottom left
- Bottom center
- Bottom right
Use a mobile image when the desktop image does not crop well on smaller screens.
6. Adding a Video Slide
A Video slide displays video media inside the slideshow.
To add a video slide:
- Open the Slideshow section.
- Click Add block.
- Select Video slide.
- Add a Shopify-hosted video or a YouTube/Vimeo video URL.
- Add the subheading, heading, text, and buttons.
- Adjust the text box position.
- Click Save.
Video settings
| Setting | Description |
|---|---|
| Video | Select a Shopify-hosted video. |
| Video URL | Add a YouTube or Vimeo video URL. |
| Text box position | Choose where the text appears over the video. |
For best results, use short videos that are optimized for web performance.
7. Slide Text, Buttons, and Highlight Settings
Both Image and Video slide blocks include the same content settings.
Subheading
- Subheading: Add a short line above the main heading.
- Subheading size: Choose the size of the subheading.
Heading
- Heading: Add the main title for the slide.
- Heading size: Choose the visual size of the heading.
-
Heading tag: Select the HTML tag for the heading, such as
h1,h2,h3,div,span, orp.
Text
- Text: Add supporting text for the slide.
- Text size: Choose the size of the body text.
Primary button
- Button label: Add the primary button text.
- Button link: Select the destination page, product, collection, or URL.
- Button size: Choose the button size.
- Use outline button style: Enable the secondary/CTA style for the primary button.
Secondary button
- Second button label: Add the second button text.
- Second button link: Select the destination for the second button.
- Second button size: Choose the second button size.
- Use outline button style: Enable the secondary/CTA style for the second button.
Highlight
- Enable highlight: Turn this on to highlight specific parts of the subheading, heading, or text.
- Highlight style: Choose the highlight effect, such as marker, circle, underline, squiggle, or solid color.
To display highlight styling, make sure the text follows the highlight format supported by the theme.
8. Color Settings
The color settings control the text, buttons, overlay, navigation, and highlight color.
Button colors
- Button label color: Set the button text color.
- Button background color: Set the button background color.
Text and background colors
- Text color: Set the slide text color.
- Background color: Set the background color used when text is displayed below the media.
Overlay colors
- Overlay color: Set the overlay color on top of slide media.
- Overlay opacity: Adjust how strong the overlay appears.
Use overlay opacity to improve text readability when the image or video is busy.
Navigation colors
- Navigation text color: Set the color of slideshow navigation icons.
- Navigation background color: Set the background color of slideshow navigation buttons.
Highlight color
- Highlight color: Set the highlight color used by highlighted text.
9. Recommended Setup
Recommended homepage hero setup:
| Setting | Recommended value |
|---|---|
| Slideshow type | Modern or Legacy |
| Full width | Enabled |
| Desktop image height | 650px or 750px |
| Mobile image height | 400px or 500px |
| Text alignment | Left or Center |
| Mobile text alignment | Center |
| Auto-rotate slides | Optional |
| Overlay opacity | 16% to 40% |
Recommended slide content:
| Content | Recommendation |
|---|---|
| Subheading | Keep it short, such as “New Collection”. |
| Heading | Use a strong campaign title. |
| Text | Add one short supporting sentence. |
| Primary button | Link to the main collection or product. |
| Secondary button | Optional, use for a secondary action. |
For best results:
- Use high-quality images.
- Upload separate mobile images when needed.
- Keep slide text short and easy to read.
- Use consistent button styles across slides.
- Avoid adding too many slides. Two to four slides usually work best.
10. Notes and Limitations
Please note the following behavior:
- The section supports up to 6 slides.
- If only one slide is added, the slideshow displays as a single static banner.
- If only one slide is used and the primary button link is filled in, the slide can act as a clickable banner.
- Slideshow navigation and auto-rotation are mainly useful when two or more slides are added.
- Mobile images are optional, but recommended when desktop images do not crop well on mobile.
- Video slides can use Shopify-hosted videos or YouTube/Vimeo URLs.
- Text can display as an overlay or below the image on mobile, depending on the Show text below setting.
Troubleshooting
If the Slideshow section does not display correctly, please check the following:
- Make sure at least one slide block has been added.
- If navigation does not appear, make sure there are at least two slides.
- If auto-rotation does not work, make sure Auto-rotate slides is enabled.
- If the slide height looks wrong, check the desktop Image ratio and mobile Mobile image ratio settings.
- If the image looks cropped, adjust the Image position setting or upload a separate mobile image.
- If text is hard to read, increase the Overlay opacity or adjust the text color.
- If the text appears in the wrong place, check the Text box position setting in the slide block.
- If the button is not clickable, make sure the button link has been selected.
- If the video does not display, make sure a Shopify-hosted video or supported YouTube/Vimeo URL has been added.
- If the section does not span the full width, make sure Full width is enabled.
- 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.
بانٹیں:
Timeline section
How to set up Combined Listing