We've recently relaunched all three of our themes. Watch the launch video here.

Mosaic grid

The 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
Mosaic grid section

Add a Mosaic grid section

The Mosaic grid section can be added to any template (except Checkout). To learn more about Sections and Templates, see Shopify's OS2 Theme Editor manual.

  1. In your theme editor (Customize), select the Template you wish to edit from the dropdown menu in the top bar.

    Drop-down menu of page templates
    Drop-down menu of page templates
  2. Click + Add section and select Mosaic grid from the Theme Sections list.

    Add section button
    Add section button
  3. (Optional.) Click and hold the ⋮⋮ drag icon to change the order of your sections:

    Shopify section drag handles
    Shopify section drag handles
  4. (Optional.) Enable the Alternate section color option in the section settings found by clicking on the section title.

    See Spark's Color settings guide to learn how to create a secondary color scheme with alternate section colors.

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. If you added a video, choose whether you want the video to fill or 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
    Text alignment options
  10. Remember to click Save in the top-right corner.

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

Set up section headings

The Mosaic grid section has a heading and subheading with an adjustable max width. You can remove the headings by leaving them blank.

  1. Click on the Mosaic grid section.

    This opens the Mosaic grid section settings.

  2. Add Heading text for the section title.

    We recommended a short title of just a few words.

  3. Add Subheading text.

    We recommend two to three short sentences.

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

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

  5. 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 Video hero 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. Read our article about Image size recommendations for Spark to learn more.

Video link

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

Button link

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.

Text alignment

Change the alignment of Heading, Subheading, and Button blocks to Left or Center

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.

Use alternate section color

Apply the alternate section colors as chosen in your Theme Settings.

See Spark's Color settings guide to learn how to create a secondary color scheme with alternate section colors.

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.