Introducing Stiletto - the essential Shopify theme to fuel your ecommerce growth. Learn more.

3 column mosaic grid

The 3 column mosaic grid section displays a flexible collage of feature images and autoplay videos. Mix and match between different size blocks and reorder them to create a promotional feature or lookbook layout.

Mosaic grid section

This section displays a maximum three columns per row with 7 different block sizes. Alternatively, see the 2 column mosaic grid

Add a 3 column mosaic grid section

The 3 column mosaic grid section can be added to any template (except the Checkout). Learn more about sections and templates in our article about how to use the theme editor.

In the theme editor (Customize):

  1. Select a Template to edit from the dropdown menu in the top bar.

  2. In the side panel, click +Add section and select 2 column mosaic grid.

  3. Change the order of your sections by using the drag and drop handles ⋮⋮

Add mosaic blocks

The Mosaic Grid section offers 7 different sizes of Mosaic blocks that you can rearrange using the drag-and-drop handles in your navigation panel. For each Mosaic block, you can add an image or autoplay video, a promotional headline and text, and a call-to-action button.

Here's how to add a Mosaic block with an image or video:

  1. Click + Add block and/or click on the Mosaic block you wish to edit.

    Learn more about the 7 different block sizes in the section below.

  2. Under Image, click Select Image to choose an uploaded image. Your image will be cropped to fit the size of the block.

    See Step 4 to learn how to use the Media focal point setting to ensure the desired part of your image appears.

    We recommend uploading an image with a minimum width of 2048px for optimal quality.

  3. (Optional) Paste a direct link to an .mp4 file in the Video URL field.

    Learn how to upload a video to your Shopify files in the section below.

  4. Change the Media fit to either fill / Cover the entire block or if you want to Contain the video in the block to display its original shape.

  5. Select the Media focal point to control what part of the image or video to center within the block.

    Use the focal point to make sure the key part of your image or video won't be cropped when it overflows the size of the block.

  6. Add Heading text.

    We recommended a short title of just a few words.

  7. Add Subheading text.

    We recommend two to three short sentences.

    Use the formatting buttons to add bold, italic, or linked text.

  8. Use the Max width of text slider to limit the maximum width of the text.

    Experiment with this setting to find a clean visual shape for your text.

  9. Use the Text alignment dropdown to change the position of your headings and button on the block.

    Text alignment options
  10. Remember to click Save.

Add a call-to-action button

You can link to you collections or products or any other page with a custom call-to-action button.

Mosaic block with call-to-action button
  1. Click on the Mosaic block you wish to edit to open the block settings.

  2. Add a Button label and Button link to display a button underneath the text block.

    The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"

    To learn how to change the style and shape of buttons across your site, see the Style section in our Theme Settings article.

  3. Remember to click Save in the top-right corner.

Selecting a block size

The Mosaic Grid section offers 7 different sizes of Mosaic blocks. The smallest block is the Small square and the largest block is the Large square that's 3 small squares tall and wide.

Here's a visualization of the size of each block compared to the Small Square block. Remember that each block can be moved within the grid by using the drag-and-drop handles in your navigation panel:

Mosaic block sizes compared to a Small Square block

Here's a chart that compares all the block sizes to a Small Square (1 x 1).

BlockDimensions (Height x Width)
S square1 x 1
M square2 x 2
L Square3 x 3
M rectangle (vertical)2 x 1
M rectangle (horizontal)1 x 2
L rectangle (vertical)3 x 2
L rectangle (horizontal)2 x 3

Return to the Add Mosaic blocks section to continue setting up your Mosaic grid.

Uploading a video to Shopify Files

The Mosaic grid section requires an .mp4 that's been uploaded to your Shopify Files.

This section is best for short looping videos. We strongly recommend using a video that's no more than 30 seconds long and that's under 10MB in size.

To upload your .mp4 video:

  1. From your Shopify dashboard, go to Settings > Filesto open your[Shopify Files][files].

  2. Click the Upload files button to add your .mp4 file from your computer.

  3. Once your file has been uploaded and processed, click the Link icon next to the file to copy the URL.

  4. You can now continue to add a Mosaic grid section and past the link into the Mosaic block settings.

Mosaic grid section settings

The following settings are found by clicking directly on the section title:

Configuration Settings

Image

Use the Select image button to add an uploaded image. Your image will be cropped and can be adjusted with the Media focal point setting.

We recommend uploading an image with a minimum width of 2048px for optimal quality.

Choose whether the video should fill the entire block or be contained within the block.

If Cover is selected, use the Media focal point option control what part of the video will be centered within the block.

Media focal point

Select the Media focal point to control what part of the image or video to center within the block.

Use the focal point to make sure the key part of your image or video won't be cropped when it overflows the size of the block.

Heading

Add heading text.

We recommended a short title of just a few words.

Subheading

Add subheading text to describe the feature.

Use the formatting buttons to add bold, italic, and linked text.

Max width of text

Use the slider to adjust the maximum width of the text.

Experiment with this setting to find a clean visual shape for your text.

Button label

Add custom text for your call-to-action button.

The most effective button labels ask your customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"

Select or paste a link for the call-to-action button.

Text alignment

Change the position and alignment of the Heading, Subheading, and Button.

Color

Change the colors for the text, button, and background of the block.

Overlay opacity

Use the slider to adjust the transparency of the overlay color.

Set the opacity to 0% to turn off the overlay color.

Mosaic grid section settings

The following settings are found by clicking directly on the Heading, Subheading, or Button blocks:

Configuration Settings

Heading

Add heading text.

We recommended a short title of just a few words.

Subheading

Add subheading text to describe the feature.

Use the formatting buttons to add bold, italic, and linked text.

Max width of text

Use the slider to adjust the maximum width of the text.

Experiment with this setting to find a clean visual shape for your text.

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.