Context 1.0

Full width image

Context lets you add full width images with overlay text and call-to-action links.

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

:

Set up a Full width image section

To set up a Full width 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 Full width image from the list of sections.

    This opens the Full width image section settings.

  4. Select or upload an Image to be used.

  5. (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 full width image section.

  6. Select the Aspect ratio: either 3:2 or unconstrained. More on that here

  7. 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 your use a contrasting color for the text to make it readable.

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

    Adjusting the max width of text will help control 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 Full width image section.

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

  1. Click Save.

Settings reference

The Full width image section has the following settings:

Image

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

Video link

Paste a link to an MP4 file that should be auto-played in the collage block, taking the place of the image.

For more information, see Add a video to a Full width image section.

Change Aspect ratio

Choose the aspect ratio for the full width image: 3:2 or Unconstrained.

Using 3:2 may crop your image, while Unconstrained displays the full image, no matter what shape it is. See an example

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.

Add a video to a Full width image section

The Full width image home page section allows you to add an auto-playing video instead of an image.

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][files] uploader screen 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.

Settings reference

The Aspect ratio setting allows you to change the potential shape of the full width image section.

Use 3:2 if your image is a 3:2, landscape-oriented image – or close to it. You can also use 3:2 if you don't mind your image being cropped (from the center) to be a 3:2 image.

Use Unconstrained to display the full image, no matter what shape it is. It will still be displayed at full width, so be careful with very tall images.

Here's an example of what an Unconstrained full width image looks like, with lines representing the 3:2 crop within::

  • Home page

  • Colors

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