Showcase your brand with an eye-catching mosaic of images and text using the Mosaic section, perfect for highlighting collections, promotions, and announcements.
š§° How to install the section in your theme
- OpenĀ Theme Updater & BackupsĀ in yourĀ AppsĀ admin
- Open Theme sections
- Click Install below the section. You can also click Preview to see the section in a demo storefront
Ā
- On the right side of the page, use the Choose theme dropdown to select the theme you want to enhance with the new section
- Click Install
Add the section to a template
Click Customize to open the theme editor for the selected theme.
Open the template (e.g. home page, default product) and click (+) Add section in the sidebar.
Scroll down to the bottom of your default sections list and select š§° Mosaic.
Customize section settings
Click theĀ Mosaic section to customize general settings for the section.
Desktop layout
Desktop section heightĀ
Choose betweenĀ Small, Medium,Ā orĀ Large height. The height cannot be specified in the settings.Ā
Content alignment
This setting helps control the position your content (text) will take. The options are:Ā
- Top left
- Top center
- Top right
- Middle left
- Middle center
- Middle right
- Bottom left
- Bottom center
- Bottom right
Corner radius
Use the slider to determine your mosaic blocks' corner radius. A higher px value means rounder corners, while setting it to 0px would display edges.Ā
Remove space between blocks
Enable the toggle to remove the spaces between each mosaic blockĀ
Mobile layout
Available layout options for mobile includeĀ Stacked andĀ Slider
Mobile image height
Choose betweenĀ Small, Medium,Ā orĀ Large height.
Select colors
Choose colors for the section'sĀ Background color.
Animation
Use the toggle to enable or disable the animations in the section
Adjust spacing
Use the Top padding and Bottom padding sliders to increase or decrease the padding of the section.
Use the Top margin and Bottom margin sliders to increase or decrease the margins of the section.
Customize blocks
Add blocks under the section by clicking (+) Add block
By default, the section should already include three Mosaic blocks.Ā
Each block contains an extensive amount of settings as well:Ā
Adding an image
You can add anĀ ImageĀ (works for both desktop and mobile)Ā and a Mobile imageĀ on each block.
Heading
This serves as the title of each block and you can adjust its size through the availableĀ Heading sizeĀ andĀ Mobile heading sizeĀ slidersĀ
Text
You can display a short description on each block by adding your text here. Like theĀ Heading, you can adjust the sizes by controlling it through theĀ Text sizeĀ andĀ Mobile text sizeĀ slidersĀ
Color
Changes the text color in each blockĀ
Image overlayĀ
To make the text more visible, consider adding an image color overlay. This adds a color filter on your image and its strength can be adjusted by using theĀ Image overlay opacity.Ā
Button
Display a button on each block by adjusting the available settings.
Add the button label on theĀ LabelĀ field and paste the link you'd like the customers to be routed to in theĀ LinkĀ field.Ā
Button style
Available styles include FillĀ andĀ Outline. Fill would add a solid background color for the button, while Outline has a transparent background.Ā
Button color
Adjust the button'sĀ Background colorĀ andĀ Text color.Ā Background color only applies to theĀ FillĀ style, but it works as the color setting for the button borders inĀ OutlineĀ style.Ā
Changelog
December 3rd, 2024
- Mosaic added to Theme Sections.