Context 1.0

Parallax image

Much like the full width image home page feature, the parallax section adds a sprawling, full-screen image section to your home page. This section adds a subtle parallax scrolling effect to the featured image.

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.

Using the provided settings, you can easily change the text alignment and button styles to accommodate your images.

Note that whenever you change settings, you may need to save and refresh your theme editor before you see what the final parallax effect will look like to your customers.

Set up a Parallax image section

To set up a Parallax image section on your home page:

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 from the list of sections.

    This opens the Parallax image section settings.

  4. Select or upload an Image to be used.

  5. Select the Overlay color, Text color, and Overlay opacity.

We recommend a black or white Overlay color, as these colors will look great with a wide variety of images. Make sure to use a contrasting color for the text so it's readable.

  1. Add a Heading, Text, and (optionally) limit the Max width of text

    Adjust the width of the text gives you extra control over how the heading and text look.

  2. Add a Link and Link text for a call to action button.

  3. Adjust your Horizontal text position and Vertical text postion to balance your text with your imagery.

  4. Return to the list of Home page sections to find your new Parallax image section.

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

  5. Click Save.

Settings reference

The Parallax image section has the following settings:

Image

Select or upload an image to be associated with the current section.

Heading

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

We recommend keeping this to just a few words long.

Subheading text

Add subheading text to be displayed below the heading text.

We recommend keeping this to a short sentence or two.

Max width of text

Change how wide the heading and text can be at a maximum.

Link

Choose a page from your store to be link to from the section's call to action button.

Link text

Add text to be used on the call to action button

Link style

You can change the link style to Button or Link with arrow.

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.

  • Home page

  • Colors

[upload-a-video]: #add-a-video-to-a-full-width-image-section) [files]: https://shopify.com/admin/settings/files