Slideshow split
The Slideshow split section adds a beautiful split-screen style, auto-playing slideshow to your home page. It displays two slide images at once. It’s a great way to showcase special product collections.
Just like the slideshow section, it supports video slides and adding alternate slide images for mobile devices.
Set up a slideshow split section
To add a slideshow split section:
-
From your theme’s “Customize” screen, choose Home page from the pages drop-down menu at the top of the screen.
-
Scroll down the list of home page settings until you see the Add section button.
-
Choose Slideshow from the list of sections, and press the Add button.
This opens the slideshow section settings.
-
Add some slides using the Add slide button.
For more information about the settings for each column, see the Add slides to a slideshow article.
-
Choose the Time between slides, in seconds.
-
Add Small heading text and a Heading.
The small heading is tiny text displayed above your heading. If you’re using the slideshow to highlight many different kinds of things, you could use the mini heading to distinguish between “Products”, “Collections”, “Blog posts” and so on. Or, you could choose to leave it blank.
-
Add Subheading text to be displayed below the heading.
-
You can choose how wide the heading and subheading appear with the Text max width slider.
-
Add a Link and Button text to be displayed as a call to action button on the slide.
-
Tweak the Overlay opacity and Overlay color.
The overlay is a colored filter that is layered on top of your slides.
The opacity can be between 0 and 100, where 0 is invisible and 100 is completely opaque.
-
Change the Text color so it’s visible against the image and image overlay.
-
Choose a Max width of text, between 16 and 50.
The text max width lets you control the shape of the text, and make it look good no matter how long your collection descriptions are.
-
Choose the Horizontal text position and Vertical text position for this content block.
-
Use the Back to settings (<) button to go back to all of the home page settings again. Use the drag handles to rearrange the order of your home page sections:
-
Use the Save button in the top-right corner when you are finished editing.
Settings
The slideshow split has the following settings:
- Time between slides
- Use the slider to choose how many seconds Lorenza should wait before switching slides.
Choose between 5 seconds and 15 seconds.
- Small heading
- Add mini heading text, which is smaller text placed above the heading.
This text uses your Small heading typography styles.
See Typography for more information.
- Heading
- Add heading text to be used for this slideshow split.
We recommend keeping this to just a few words long.
- Subheading
- Add subheading text to be displayed below the heading text.
We recommend keeping this to a short sentence or two.
- Text max width
- Change how wide the subheading text can be at a maximum.
- Link
- Choose a link that the call to action button should lead to.
- Button text
- Add custom text for your call to action button.
We recommend keeping this between 1 and 3 words.
- Overlay opacity
- Use the slider to choose how opaque the overlay color should be. Where 0% is invisible and 100% is completely opaque.
- Overlay color
- Pick the color of the overlay for the current slide.
- Text color
- Pick the color of the slide text.
- Max width of text
- Using the slider, choose how wide the heading text should appear, at a maximum.
- Horizontal text position
- Choose where the text and call to action button should be placed on the slide.
Either Left, Center, or Right.
- Horizontal text position
- Choose where the text and call to action button should be placed on the slide.
Either Top, Middle, or Bottom.
Add slides
To add slides to your slideshow split section:
-
Make sure you are already editing the slideshow split section you want to change.
-
Under Content, use the Add slide button to add a new slide.
-
Add an Image for the current block.
-
(Optional.) Add a Mobile image.
The mobile image is an alternative image to be displayed on mobile. This lets you add photos that look better when on portrait-oriented, smartphone-shaped devices.
-
(Optional.) Add a Video link.
Your Image is used as a fallback for the video, if you’ve added a video link.
For more information about adding videos, see Add a video to a slideshow.
-
Repeat this process until you’ve added all of the slides you need.
You can reorder the content blocks using the drag handles:
-
Use the Save button in the top-right corner when you are finished editing.
Settings
Each slide has the following settings:
- Image
- Add or upload an image for the current slide.
- Mobile image
- Add an alternate image to be displayed on mobile devices only.
- Video link
- Paste a link to an MP4 file that should be auto-played in the slide, taking the place of the image.
For more information, see Add a video to a slideshow split.
Add a video to a slideshow split
The slideshow split section allows you to add auto-playing videos to individual slides.
Before you start setting this up, you should know a few things:
- You’ll need your video as an MP4 video file.
- For the best customer experience, we strongly recommend using a 20- to 30-second video that’s under 10MB in size.
- You can’t use a service like YouTube or Vimeo to host this video.
Host the video file with Shopify
To use Shopify to host this video file:
-
Go to the Shopify Files uploader screen in your Shopify dashboard.
-
Use the Upload files button to add a video file from your computer.
-
Once it has been uploaded, copy the URL next to the file.
It should look something like this: https://cdn.shopify.com/s/files/1/0074/8165/5349/files/my-video-filename.mp4.
-
Paste the link into the Video link field in the section settings.