“Let’s add a full width image to my home page!”

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

Full width image on desktop

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

Full with image on desktop with different settings

Full width image on mobile

While customizing your home page, this feature is available by using the Add section button.

Image
Add an image.
Video link
Show a video instead of an image in this block. Learn more

The image you add will be used as a fallback if the video fails for some reason.

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

Overlay opacity
You can add a colored overlay to the featured image.

You can set how visible the overlay is: 0% is completely transparent, and 100% is completely visible.

Overlay color
You can change the color of the overlay.

We recommend using black or white, as these colors will look great with a wide variety of images.

Text color
You can change the text color featured image.

We recommend using the opposite color that you used for your overlay, or a color you know will be easy to see on top of the image.

Heading
Add heading text. We recommend keeping this to a few words.
Subheading text
Add a subheading or description. We recommend keeping this to a line or two.
Max width of text
You can adjust the width available to the heading and subheading text.

We recommend adjusting this and checking the live preview to get it just right for your image.

Link
Paste a URL or add a link to a page in your store.
Link text
Add text that should be used for your link.
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.

Upload a video

You’ll need an MP4 video if you plan to use Video link setting for mosaic grid sections. We recommend using a 20- to 30-second video that’s under 10MB.

You need to host a video file that is accessible as a direct URL. Video embeds from YouTube, Vimeo or other video streaming services do not work.

You can use the Shopify Files uploader to host video files that are smaller than 20MB:

  1. Go to the Shopify 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 URL field in the section settings.

Aspect ratio

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:

Aspect ratio comparison