Context 1.0

Collage

Context's Collage section is a versatile way to show off special collections and seasonal offerings. It lets you create a grid-based gallery of images or videos, each one with its own (optional) text, links and size. You can even add videos in place of images.

On mobile devices, grid items appear one after another instead of in rows: :

Add a collage to the home page

To set up a collage:

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 and click the Add section button.

  3. Choose Collage from the list of sections.

    This opens the collage settings but there are none, so you can proceed to the next step.

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

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

  5. Use the Add Item button to add as many blocks to the collage as you want.

For more information about item settings, See the Add collage blocks part of this article.

  1. Click Save.

Add collage blocks

For each collage block you want to add:

STEPS

  1. Make sure you are already editing the collage section you want to change.

  2. Use the Add item button to add a new collage block.

  3. Add an Image for the current block.

    Some blocks may appear larger than others. For more information about collage layouts see collage layouts.

  4. Set the Block size for this collage image to Large or Small.

    Small displays as a landscape (3:2) image and Large displays as a portrait (2:3) image.

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

  6. Tweak the Overlay opacity for this content block.

    The overlay is a colored filter that is layered on top of your video and image. The opacity can be between 0% and 100%, where 0% is invisible and 100% is completely opaque.

  7. Change the Overlay color.

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

  8. Change the Text color.

Choose a color that contrasts with your overlay to increase text legibility (i.e. if you choose a black overlay, choose white or light text)

  1. Add Heading text

We recommend keeping this to a few words.

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

  2. You can choose how wide the subheading and heading can appear with the Text max width slider.

  3. Add a Button link and Button text to be displayed as a call to action button or link on the collage block.

Choose Link style for a button or a link with an arrow.

  1. Choose the Horizontal text position and Vertical text position for this collage block.

  2. Return to the list of Home page sections to find your collage 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 collage items you need.

    You can also use the Remove block button to remove a block from this section entirely.

  2. Click Save.

Settings reference

Each collage block has the following settings:

Image

Use the Select image button to add an uploaded image. We recommend an image that is square or landscape for Small blocks and portrait for Large blocks.

Read our article about Image guide for Context to learn more.

Block size

Choose whether the block should be Small or Large.

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.

Overlay opacity

Use the slider to choose how opaque the overlay color should be. Where 0% is invisible and 100% is completely opaque.

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 for text overlaying the full width 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.

Settings reference

You can add up to 9 blocks per collage section. Mix and match between large and small blocks to create many different grid effects. The layout runs left to right, so try small, large, large, small for a mixed 4 item grid, or small, large, small for two stacked small items and a large item. The possibilities are up to you!

Avoid cropping

Context may crop your images to help them fit uniformly in the grid. To reduce cropping, we recommend that you upload images that have a 3:2 aspect ratio (for Small grid items) or a 3:4 aspect ratio (for Large grid items).

Add a video to a collage section

The Collage home page section allows you to add auto-playing videos as blocks in the collage.

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

  • Images with text

  • Full width image

  • Typography

  • Image guide