Lorenza 3.0

Slideshow

The Slideshow section adds an auto-playing slideshow to your home page. It supports video slides, as well as alternate slide images for mobile devices. It can also be configured to fill the entire screen.

Set up a slideshow

To add a slideshow:

STEPS

  1. From your Customize theme editor, choose Home page from the pages drop-down menu at the top of the screen.

  2. Scroll down the list of home page and click the Add section button.

  3. Choose Slideshow from the list of sections.

    This opens the slideshow section settings.

  4. Adjust the Height and Mobile Height of your slide images between 50% to 100% of the maximum height.

  5. Choose the Time between slides, in seconds.

  6. Return to the list of Home page sections to find your new Slideshow section.

Use the drag handles to rearrange the order of your Home page sections:

  1. 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.

  2. Click Save.

Settings reference

The slideshow has the following settings:

Aspect ratio

Choose the aspect ratio of the slideshow.

Pick from Full height, Cropped or Natural.

Time between slides

Use the slider to choose how many seconds Lorenza should wait before switching slides.

Choose between 5 seconds and 15 seconds.

Add slides to a slideshow

You can add many slides to a slideshow. This article explains how to add one.

Add a slide

STEPS

  1. Make sure you are already editing the slideshow section you want to change.

  2. Use the Add Slide button to add a new slide.

  3. Add an Image for the current block.

    There are no required image dimensions but we recommend an image that is square or landscape (wider than it is tall).

    We recommend uploading an image with a minimum width of 2048px for optimal quality. Read our article about Image guide for Lorenza to learn more.

  4. (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.

  5. (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.

  6. 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 small heading to distinguish between "Products", "Collections", "Blog posts" and so on. Or, you could choose to leave it blank.

  7. Add Subheading text to be displayed below the heading.

  8. Add a Link and Button text to be displayed as a call to action button on the slide.

  9. 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.

  10. Change the Text color so it's visible against the image and image overlay.

  11. 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.

  12. Choose the Horizontal text position and Vertical text position for this slide.

  13. Return to the list of Home page sections to find your Slideshow section with the blocks nested below.

You can change the order of the blocks by using the drag handles:

  1. Repeat this process until you've added all the slides you need.

You can also use the Remove block button to remove a slide from this section entirely.

  1. Click Save.

Settings reference

Each slide has the following settings:

Image

Use the Select image button to add an uploaded image. There are no required image dimensions but we recommend an image that is square or landscape (wider than it is tall).

We recommend uploading an image with a minimum width of 2048px for optimal quality. Read our article about Image guide for Spark to learn more.

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.

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 the current slide.

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 a video to a slideshow

The Slideshow home page 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. Our Video section is designed for those.

Host the video file with Shopify

To use Shopify to host this video file:

STEPS

  1. Go to the Shopify Files uploader screen in your Shopify dashboard.

  2. Use the Upload files button to add a video file from your computer.

  3. 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.

  4. Paste the link into the Video link field in the section settings.

  • Slideshow split

  • Typography

  • Image guide