Context 1.0

Slideshow

The Slideshow section adds an auto-playing slideshow to your home page. It supports video slides, and it can be configured to fill the entire screen. Each slide has its own text layout and call to action button.

This section looks especially great as the top-most section on your home page with the transparent header enabled.

:

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 sections 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. 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:

  6. Add some slides using the Add slide button.

    For more information about the settings for each column, see Add slides to a slideshow.

  7. Click Save.

Settings reference

The slideshow has the following settings:

Aspect ratio

Choose the aspect ratio of the slideshow.

Choose either Full height, so that the slideshow takes up the entire screen, choose 3:2 for landscape-oriented images, or Unconstrained which displays the full image, no matter what shape it is.

Add a slide

To add a slide to a slideshow:

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.

    We recommend an image that is landscape (wider than it is tall) with a minimum width of 2048px for optimal quality. Read our article about Image guide for Context to learn more.

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

  5. Add Heading text.

    We recommend keeping this to a few words.

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

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

  8. You can choose how wide the heading and subheading appear with the Max width of tex sliders.

    There is one for heading and one for subheading so you can fine tune it just right.

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

    There are 3 vertical alignment options and 3 horizontal alignment options.

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

Add or upload an image for the current slide.

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.

Heading

Add heading text to be used above the list of featured products.

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.

Link text

Add custom text for your call to action button.

We recommend keeping this between 1 and 3 words.

Link

Choose a link that the call to action button should lead to.

Link style

Choose between a Button or Link with arrow.

Max width of heading

You can adjust the with available to the heading text.

We recommend adjusting this and checking the live preview to get it just right for your image.

Max width of text

You can adjust the width available to the subheading text.

We recommend adjusting this and checking the live preview to get it just right for your image.

Horizontal text position

You can change the horizontal text position to Left, Center or Right.

We recommend adjusting this and checking the live preview to get it just right for your image.

Vertical text position

You can change the vertical text position to Top, Middle or Bottom.

We recommend adjusting this and checking the live preview to get it just right for your image.

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

  • Parallax slideshow

  • Typography

  • Image guide