The Image collage with text section helps captivate customers with layered imagery and text, designed to draw attention and highlight details about your brand.
🧰 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 🧰 Image collage with text.
Customize section settings
Click the Image collage with text section to open its settings.
Desktop layout
Select image
Display up to two images to make up a collage.
Desktop image height
Select an option from the Image height dropdown to control the height of the image. The options are Small, Medium, and Large
Desktop image placement
In desktop, the image(s) will be placed on the left side by default. However, you can select between Image first (left) or Image second (right) to change its position.
Layout
Choose between the Overlap and Offset layouts for your collage
Show image border
Toggle the on/off checkbox to display or remove the border around Image 1.
Desktop content position and Desktop content alignment can help control the position your content (text) block will take.
Mobile layout
Select image
If you would like to display a more mobile-friendly set of images, you can also upload your files in this setting, or leave it blank if you would like to use the same ones.
Mobile image height
Select an option from the Mobile image height dropdown to control the height of the image. The options are Small, Medium, and Large
Mobile image placement
For mobile, Image first places the image(s) on top of the section, while Image second places the image(s) below your content (text) block.
Mobile content alignment
Controls your content block's text alignment. You can choose between Left, Right, and Center.
Color
Control the section's color settings by adjusting the Text color and Background color.
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 different blocks: Heading, Text / Content, and Button.
Heading is used for the section's title and will usually appear above your Text block.
Text block is used to add the paragraph or sentence you'd like to display beside the video.
Button block can also be displayed if you would like to redirect the customers to a specific page.
Changelog
December 3rd, 2024
- Image collage with text added to Theme Sections.