How to Add and Customize Mosaic Blocks

On This Page

TABLE OF CONTENTS

• Getting Started
  • Finding Mosaic Settings
  • Customizing Mosaic Settings
    • Section Height
  • Finding Mosaic Items
  • Adding and Customizing Mosaic Items
    • Image
    • Show Overlay
    • Overlay Opacity
    • Heading
    • Text
    • Content Position
    • Button Background Color
    • Button Text Color
    • Button Text
    • Button Link

Getting Started

 

The Mosaic blocks are a great way to display multiple links. These links can include collections, products, blogs, events, etc. Due to the way these are positioned and displayed on your store's page, we recommend playing around with adjusting your links and positions in order to best fit your store's page.

 

Finding Mosaic Settings

In order to begin customizing this section, follow these steps:

1. From your myShopify homepage, go to Online Store > Themes
2. Find and click Customize
3. You will see the customization menu on the left of your screen. Find and select Mosaic
4. If you do not see Mosaic, scroll to the bottom of the customization menu and select Add section
5. From here, find and select Mosaic to add the block to your page

 

Customizing Mosaic Settings

Once you have opened the customization tab for the Mosaic, you will find one area for customization: Section Height.

 

Section Height

This section includes a drop-down list consisting of: Small, Medium, and Large. These sizes control the overall size of your Mosaic blocks. We recommend playing around with these features in order to best fit your store's style.

 

Finding Mosaic Items

Following the customization of the Mosaic settings, you will want to create and fully customize the Store blocks displayed on your page. In order to do begin doing so, please follow these steps:

1. From your myShopify homepage, go to Online Store > Themes
2. Find and click Customize
3. You will see the customization menu on the left of your screen. Find Mosaic
4. If you do not see Mosaic, scroll to the bottom of the customization menu and select Add section
5. From here, find and select Mosaic to add the block to your page
6. From Mosaic, select the drop down arrow and select Add Item
7. Select the new item block

 

Adding and Customizing Mosaic Items

Once you have opened your new item block, you will want to begin by customizing and clearly presenting your Mosaic blocks. You will also notice the ability to add up to five different blocks here. As you begin this process, you will notice the following categories for customization:

• Image
• Show Overlay
• Overlay Opacity
• Background Color
• Text Color
• Heading
• Text
• Content Position
• Button Background Color
• Button Text Color
• Button Text
• Button Link

 

Image

In order to add a new image to your block, click Select Image. From here you can upload or select the image your store wishes to display in the slide. Please note that the recommended image size is beneath this section. It will look something like this: 

 

 

If your image doesn't fit these specifications, it will not properly fit within the slide.

 

The recommended image size is calculated as the optimal size across many possible screen sizes (PC monitors of differing sizes, Mac, mobile, tablet, etc.)

 

After you have chosen your image, you will notice another customization option become available: Add alt text.

 

Adding alt text is a good way for your to include addition descriptions that will appear just beneath your icon. You can add up to 255 characters to this alt text feature

 

Show Overlay

This section include a tick box that allows for the readability of text to be more clearly seen on images that are busier. Selecting or deselecting allows for the overlay to become visible or invisible.

 

Overlay Opacity

This section includes a sliding cline that allows for the opacity of the overlay to be adjusted. These adjustments happen in one percent increments ranging from 0 to 100. This adjusts the opacity of the overlay when it is shown by selecting Show Overlay as explained above.

 

Heading

This section includes a text box allowing for the customization of a content heading. This heading will be positioned above both the Text and Button that describe and link to the product being displayed on the slideshow. For the Heading, we recommend something attention grabbing and catchy to capture the eye of customers.

 

Text

This section includes a text box allowing for the customization of a content description. This will be positioned between the Heading and Button and serves to describe the product being advertised in the block. We recommend using a short and succinct message here, if any at all.

 

Content Position

This section allows for the orientation of the content section; a dropdown menu gives the choice for one of nine placement options. These options are: top left, top center, top right, middle left, middle center, middle right, bottom left, bottom center, bottom right.

 

Please note: when on mobile, all content will be centered

 

Button Background Color

Here you will find the option to customize the background color for your content Button.

 

When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store

 

Button Text Color

Here you will find the option to customize the text color for your content Button.

 

When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store

 

Button Text

This section includes a text box allowing for the customization of the message that will appear on your block's content Button.

 

Button Link

This section includes a text box that allows for your store to connect a link to the above Button. You can utilize this text box to insert either a direct link through a URL or by selecting the text box and searching through collections. It will appear something like this: