Create multi-column, full-width and mosaic-like grid on your homepage - using only one section
- Option for adding title, description and a button over images
- 9 text placement areas on single image and 6 text placement areas on each image when multiple images are used
- Overlay opacity, Image Height Adjustment and various settings included
- Plug and Play
Single Image
Mosaic - 3 Images
Mosaic - 5 Images
Getting Started
To add this section to your theme, follow the steps below:
1.) Copy the code provided to you when you download the section.
2.) Add a New Section by going to your Themes > Actions > Edit Code > Add a new section.
3.) Paste the code entirely and SAVE.
4.) Open Theme Editor by clicking on "Customize" button, add section and setup it up on your homepage.
* If you are not comfortable adding the code or don't want to modify the theme yourself, we can help you implement this section on your Shopify store for just 1 tweak.
Settings
Main Section Settings
Section Title
Add title to the section (optional)
Block Height
Specify height of the blocks. Mosaic blocks are adjusted to twice the height automatically.
Lazyload Images
If your theme already uses lazyload functionality, keep this "disabled". If the images appear blurred, set this option to "Active".
Border Radius (Images & Buttons)
Display curved edges of block images & link buttons
Header Font Size
Specify header font size displayed over images for both desktop and mobile
Text Font Size
Specify text font size displayed over images for both desktop and mobile
Specific block settings
Image
Add image to the block
Image Position
Specify which area of the image you would like to display in the blocks.
Heading
Add heading to the block (optional)
Text
Add title to the block (optional)
Text Color
Assign color of the text (Heading & Text above)
Button Text/Link
Add button text and link to the block (optional)
Button Color/Button Text Color
Assign color of the button and text (optional)
Make Image Clickable
If you are want to make the whole image clickable and not just button, select this option. Also, add button link which will be used as a link for the image
Image Overlay Opacity/Overlay Color
Assign overlay opacity if you want text to be more readable. You can choose the color for the overlay
Text Align
Align text (heading + text + button) to the left, center and right
Vertical Text Align
Align text (heading + text + button) top, middle or bottom
Horizontal Text Align + Content Width
This setting only applies for single full width image providing you the ability to position text to up to 9 position on the image.
Image Blocks
Add up to 5 blocks of images with different displays styles (Full Width, Multi Column Images, Collage/Mosiac Styles with 3 or 5 images)
Just Plug and Play
Enter your details below to get access to the code for Image Collage/Mosaic Section