Context 1.0

Parallax slideshow

The Parallax slideshow section is similar to the Slideshow setion, but with a parallax animation effect. Each slide has its own text layout and call to action button. This section also adds a subtle parallax scrolling effect to the your slideshow images.

This parallax effect makes it looks like the image is moving while you scroll past it. You can see how it looks in the video below.

Set up a Parallax slideshow

To add a Parallax 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 Parallax slideshow from the list of sections.

    This opens the Parallax 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 Parallax 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 Parallax slideshow.

  7. Click Save.

Settings reference

The Parallax slideshow has the following settings:

Aspect ratio

Choose the aspect ratio of the Parallax slideshow.

Choose either Full height, so that the slideshow takes up the entire screen, or choose 3:2 for landscape-oriented images.

Add a slide

To add a slide to a Parallax slideshow:

STEPS

  1. Make sure you are already editing the [Parallax slideshow][Parallax 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. Add Heading text.

    We recommend keeping this to a few words.

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

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

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

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

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

  9. Return to the list of Home page sections to find your Parallax slideshow section with the content 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.

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

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

Link text

Add custom text for your call to action button. We recommend keeping this between 1 and 3 words.

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.