We've added a nice way to add multiple images within one banner, so you dont need photoshop or any image editor to create a fun banner within shopify itself!
Here's a quick sneak peek:
How to add this section:
To add an multiple images with text section to your store;
Click on 'add section' which can be found in your left sidebar.
Scroll down, or search for 'Multiple images with text', then click on 'Multiple images with text'.
Done, your Multiple images with text section is added.
General Settings:
The general section contain the settings for layout and spacing. To open the general settings click on the section:
Multiple images with text
Width:
Set the width of the section.
First banner width:
Set the width of the first banner, therefor you can make the second banner larger or smaller, depending on your needs.
Height:
Control the height of the section from Small, medium and Large. If you want a custom height check the custom minimal height box and adjust the range slider to increase the height.
Show zoom effect on hover on banner:
Check this option to have a zoom effect/animation on hover. Not applicable when 'Space between banners' is less than 10px.
Image overlay opacity
Set the overlay opacity of the image. This way you can have a color overlay on your image to make your text more readable. The overlay color will be determined by your color scheme.
Color scheme:
Select the color scheme of the section
Button color scheme:
Select the color scheme for the button.
Content position:
Set the position of the content within the section.
Headings
Heading settings:
The social media bar has these headings: Primary and secondary in each setting you will see options to fill your desired headings and customize the font size for headings and choose the right font that works for you.
Text
Description:
Fill in the text of the section, this will be the subtext in the image.
Button
Button label:
This text will show on the button, for example: 'View all'
Link:
Enter a link for the button, for example to your products sale page.
Show link instead of button:
Check this box if you don't want a button to show, but only a clickable text.
Shop the look feature
With the "Shop the Look" feature, you can tag each banner within the section, linking it directly to the corresponding products in your Shopify store. Customers can simply hover click on the cart icon to view more details, including products variants, their prices, and the option to add them to their cart. This streamlined process eliminates the need for customers to manually search for each item separately, providing a seamless and efficient shopping experience.
Enable Shop the look feature:
The setting says it all, check this box if you want to enable the shop the look feature!
Products:
You can select up to 12 products to show in the shop the look box.
Color scheme 'add to cart button':
You can change the add to cart icon color using the option.
Position:
And position it from left to right.
Custom text styling
Enable custom text styling:
Custom text styling allows you to overwrite the standard typography settings. This way you can customize al your banners in a great and unique way! Enable the option and let your creativity go!
Spacing
Bottom spacing desktop/mobile: That way you will get the amount of whitespace below the element you want. The default for desktop is 50px and the default for mobile is 30px.
Control the stacking order of sections:
Increase or decrease the z-index value to control the visual layering of sections, ensuring the desired display arrangement when using negative spacing.
When we increase the z-index, the section will overlap:
How to customize the image banner?
By default, there are 2 image banners added, you can edit them, remove them or add more.
1. Editing the image banners:
To edit the blocks you simply click on the block you want to edit in your sidebar on the left of your screen.
After you clicked the block, on the right of your screen the following sidebar will open.
Image banner
Image:
Set your images here, for example your most populair post on facebook!
Video:
Instead of an image, you can also choose to show an inline video. This will override the image setting.
Mobile image:
Set the image for mobile, this setting is optional but great if your image looks good on desktop, but is cut off in mobile.
I hope this documentation is useful to you. If you have any questions feel free to click on the chat icon and send us a message.