Slideshow

The Slideshow displays up to 16 auto-rotating slides to showcase your images. You can fine-tune how your images look and add a mobile-specific image for the best experience across all devices. 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 section

Add this section to your template and re-order its position. You can add this section multiple times with different content and settings.

Steps

In your theme editor (Customize):

1. Select a Template to edit from the dropdown menu in the top bar.

   Learn how to use Context's available templates in our Templates help guide.

2. Under Template, click (+) Add section and select Slideshow.

3. Change the order of your sections by using the drag and drop handles ⋮⋮

Add slides with images

Add up to 8 slides with unique images, headings, buttons, and custom colors.

In your theme editor (Customize):

1. Click +Add slide and/or click on the Slide block to open the block settings.

2. Under Image, click Select image to upload and select your image file.

   There are no required images dimensions. We recommend images that are square (1:1) or landscape (3:2) (wider than tall) with a minimum width of 2048px for optimal quality across all devices.

   See our article for image recommendations for Context to learn more.

3. (Optional.) Under Mobile image, click Select image to upload and select an alternate slide image that will show only on mobile.

   You may want a different image that works best with mobile screen dimensions.

4. Select the Image focal point to choose which section of the image to keep centered within the slide.

   This setting ensures the key part of your image appears when cropping occurs.

5. (Optional.) Click and hold the drag handles ⋮⋮ to rearrange the blocks:

   

   Click Remove block in the block settings to delete a block.

   Click the Eye icon to hide or unhide a block.

6. Click Save.

Slide image settings

Each slide image has the following settings:

Add headings and buttons

Add and customize slide headings, buttons, and colors.

In your theme editor (Customize):

1. Click the Slide block to open the block settings.

2. Add a Heading as a title of slide.

   We recommended a short title of just a few words.

3. Add Subheading text to display below the heading.

   We recommend two or three short sentences.

4. Adjust the Max width of text of your headings using the slider.

   Experiment with this setting to find a clean visual shape for your text.

5. Add a Button Link and change the Button label to display a button underneath the subheading.

   The entire slide will become a link if the Button label is blank.

   The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"

6. Set the Link style to either a Button or Link with arrow.

7. Change the position of the slide content by using the Text alignment dropdown.

   

8. Change the color of the Text color andOverlay color.

   We recommend using WebAIM's contrast checker when matching colors to make sure your text is clear and readable for everyone.

9. Change the Overlay opacity to increase the contrast between the slide text and image.

   Set the opacity to 0% to turn off the overlay color; set it to 100% to create a solid color slide with no image.

   These settings help make your text clear and readable.

10. Click Save.

Slide content settings

Content for slides have the following settings:

Adjust slideshow height

In the section settings, set the height of the slideshow for desktop and mobile devices.

In your theme editor (Customize):

1. Click on the Slideshow section to open the section settings.

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

3. Click Save.

Adjust time between slides

By default, multiple slides will rotate every 4 seconds. You can choose to display each slide between 0 to 10 seconds.

In your theme editor (Customize):

1. Click on the Slideshow section to open the section settings.

2. Move the slider to set the time between slides between 0 to 10 seconds.

3. Click Save.

Enable parallax

The parallax makes it look like the image and text have depth as customers scroll.

In your theme editor (Customize):

1. Click on the Slideshow section to open the section settings.

2. Check the Enable parallax scrolling checbox to add a dynamic 3D-like effect.

   Use the Parallax scale to adjust how much the image moves when scrolling past.

3. Click Save.

Slideshow settings

The slideshow has the following settings: