Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Parallax scrolling

Some templates use a special visual effect on header images called parallax scrolling. Parallax scrolling involves a background image moving slower than the content in the foreground, creating an illusion of depth and immersion.

Parallax scrolling is available in the following templates. Templates are grouped by family.

  • Brine, Aria, Basil, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny, Sonora, Thorne, Wav, West
  • Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift (discontinued)

Here's an example of parallax scrolling in the Burke template:

parallax_scroll_download.gif

Before you begin

  • Parallax scrolling is only available for thumbnail images.
  • Image Blocks and gallery images don't offer the parallax scrolling effect.
  • Templates that use parallax scrolling also support special banner formatting that involves adding text and buttons over an image. To create the best design, we recommend pairing parallax scrolling with this effect. To learn more, visit Adding text to banners.
  • For the Marquee, Adversary, Alex, Eamon, Ginger, Mint, and Shift templates (discontinued), parallax scrolling works on mobile when Mobile Styles are enabled.
  • For the Brine, Aria, Basil, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny, Sonora, Thorne, Wav, and West templates, parallax scrolling works on mobile.
  • Focal point changes may not have a noticeable impact on a parallax scrolling image's position.

Supported pages

For the templates listed below, parallax scrolling is only available on banners on specific pages.

Brine, Aria, Basil, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny, Sonora, Thorne, Wav, West:

  • Index Pages (background images behind Regular Page sections)
  • Regular Pages
  • Products Pages
  • Events Pages
  • Album Pages
  • Blog Pages
  • Gallery Pages

Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift (discontinued):

  • Index Pages (Regular Page sections)
  • Regular Pages
  • Products Pages and individual products
  • Events Pages and individual events
  • Blog Pages and blog posts

If parallax scrolling is available in your template, ensure that these pages have thumbnail images.

Step 1 - Add a thumbnail image

Repeat this step for every page on your site.

In the Pages panel, hover over a page and click the next to the title to open Page Settings.

In Page Settings, click the Media tab. Drag an image into the Thumbnail/Banner Image box, and then click Save.

You can also license a stock image for $10 through our partnership with Getty Images.

Step 2 - Enable parallax scrolling

In the Design panel, open the Style Editor.

Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift (discontinued):

  • Scroll down to Parallax Images and check Parallax Scrolling if it's not already checked. Then click Save.

Brine, Aria, Basil, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny, Sonora, Thorne, Wav, West:

  • Scroll down to Main: Overlay and check Enable Parallax if it's not already checked. Then click Save.
Tip: For the Brine family, you may also want to check Parallax Smart Crop to minimize cropping.

Disable parallax scrolling

To disable parallax scrolling, open the Style Editor and uncheck Parallax Scrolling or Enable Parallax. Disabling parallax scrolling affects the entire site and can't be disabled per page.

Was this article helpful?
45 out of 102 found this helpful