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

2 column mosaic grid

The 2 column mosaic grid section displays a flexible grid of different sized feature images and autoplay videos. Mix and match between different size blocks and reorder them to create a promotional feature or lookbook layout. Add overlaying headings and an optional button to promote your products and collections.

Mosaic grid
Mosaic grid

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

Mosaic grid section on mobile

This section displays a maximum two columns per row. Alternatively, see the 3 column mosaic grid

Add a 2 column mosaic grid section

The 2 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 blocks with images

Add up to 16 mosaic blocks with 4 different block sizes. Use the the drag-and-drop handles ⋮⋮ to rearrange the blocks to change the layout of the mosaic

In the theme editor (Customize):

  1. Click + Add block and select a Block size.

    Either Small square, Large square, Large rectangle - horizontal, or Large rectangle - vertical.

  2. Click on the mosaic block to open the block settings.

    Mosaic grid block settings
    Mosaic grid block settings
  3. Click Select Image to upload an image. Your image will be cropped to fit the size of the block.

    We recommend images that are square (1:1) or landscape (3:2) (wider than tall) with a minimum width of 2048px for optimal quality across all devices.

    For the Large rectangle - vertical block size, you may want to try an image with a Portrait (3:2) orientation.

  4. To avoid cropping and show the entire image, change the Media fit option to Contain.

    By default, the media fit is set to Cover, which crops the uploaded images to create a more uniform layout.

  5. If the Media fit is set to Cover, use the Image focal point dropdown to select what part of the image to center within the block.

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

  6. Add Heading text for a title.

    We recommended a short title of just a few words.

  7. Add Subheading text to display 2 - 3 short sentences below the heading.

    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.

    See the Add a call-to-action button section.

  10. Repeat steps 1 - 9 until you have add all the mosaic blocks you want.

  11. Return to the list of sections to rearrange the order of the block to change the layout:

    When two small squares or large vertical rectangles are placed together as blocks in the editor panel, they will display side-by-side in two columns.

    Shopify content blocks nested in a section
    Shopify content blocks nested in a section
  12. Next: Change mosiac block colors, Add a call-to-action button, or Add mosaic blocks with videos.

Add mosaic blocks with videos

Add mosaic blocks with short auto-playing videos that loop continuously. It's a great way to add some dynamism to your page.

Video requirements

This feature requires a .mp4 video file uploaded to your Shopify files. For the best experience, we strongly recommend using a 5 to 10 second video under 10MB.

To embed a single video from YouTube or Vimeo with audio, see Lorenza's Video section.

Upload video file to Shopify

Here's how to upload your video:

  1. From your Shopify Admin, go to Settings > Files to open your Shopify Files.

    Shopify files in admin dashboard
    Shopify files in admin dashboard
  2. Click the Upload files button to add your .mp4 file from your computer.

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

    Note: you may need to refresh the page for your file to appear.

    Shopify files copy link button
    Shopify files copy link button
  4. In the theme editor (Customize), paste the link into the Video link field. Click on the the link that appears in the results above.

    Direct link in the Video link field
    Direct link in the Video link field

  5. Return to the list of sections to rearrange the order of the blocks:

    Shopify content blocks nested in a section
    Shopify content blocks nested in a section
  6. Remember to click Save.

  7. Next: Change mosiac block colors or Add a call-to-action button.

Mosaic block settings

Click on a Mosaic block to find the following block settings:

Configuration Settings

Block sizes

Either Small square, Large square, Large rectangle - horizontal, or Large rectangle - vertical.

Image

Use the Select image button to add an uploaded image. We recommend uploading an image with a minimum width of 2048px for optimal quality.

There are no required dimensions. Your image will be cropped and can be adjusted with the Media focal point setting.

The direct URL of your MP4 file uploaded to Shopify Files.

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 to use as a title for your slide.

We recommended a short title of just a few words.

Subheading

Add subheading text to display below the heading.

We recommend two to three short sentences.

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

Max width of text

Use the slider to adjust the maximum width of the heading and subheading text.

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

Text alignment

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

Change mosaic block colors

Choose colors for your mosaic blocks, text, and overlay to match your branding and make text readable on different images or videos.

  1. Click on a mosaic block to open the block settings.

  2. If Media fit is set to Contain, select a Background color display behind the image or video.

    By default, this color option is set to transparent.

  3. Select a Text color to match your headings to your brand and make sure the text is readable.

    We recommend using WebAIM's contrast checker when matching colors to make sure your text is clear and readable for everyone.

  4. Select a Text container color or delete the color hexcode to set it to none.

    Text container color set to none for small block
  5. Select the Overlay color and Overlay opacity to change the tint of your images or videos or create a solid color block.

    These options can help create contrast with your headings to make them readable.

    Set the opacity to 0% to turn off the overlay color; set it to 100% to create a solid color block with no image.

  6. Remember to click Save.

Mosaic block color settings

Click on a Mosaic block to find the following block color settings:

Configuration Settings

Background color

Choose a color to display behind the image or video when Media fit is set to Contain.

Text color

Choose the color of the heading text.

Text container color

Choose the color of the box that contains the headings.

To remove the box, delete the hexcode to set it to "None".

Overlay color

Choose the color that overlays the entire 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.

Add a call-to-action button

You can link to your collections or products or any other page. Add Button label to display a button or link text, or leave this field blank to make the entire block a clickable link.

Small block with "Shop Now" button
  1. Click on a mosaic block to open the block settings.

  2. Select or paste a Button link.

    When a button link is selected with no Button label, the entire block becomes a clickable link.

    Make sure you copy the full URL, including https:// at the start. For example: https://instagram.com/abc123.

  3. Add Button label text 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.

  4. (Optional.) Change the Link style to display a Link with arrow rather than a Button.

  5. Remember to click Save.

Click on a mosaic block to find the following block settings for links and buttons:

Configuration Settings

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

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

Button text

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?"

Choose to display your link as a button or link with an arrow.

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.