The Image gallery section makes it possible for you to add a nice banner/ image gallery section anywhere within your theme. The image gallery section has 3 different layouts!
To activate this section you first have to add the section to your page. This can be done in a few small steps.
1) Click on 'add section' which can be found in your left sidebar
2) Scroll down, or search for 'Image gallery', then click on 'Image gallery'
3) Done, your Image gallery section is added.
General settings
The general settings contains the settings for the styling and layout of theImage gallery' section.
Simply click on the 'section' to open the settings.
On the right sidebar, the following settings will show
Layout:
Configure the layout of the Image gallery. You can choose from collage, mirrored collage and columns. Just play with this setting and see what works the best for your store.
Number of columns:
This setting will only apply if the layout is set on columns. Basicly this will determine how many columns there will be.
For example if you've set 5 images, but 2 columns. The layout will be like this:
Set the number to columns on 5, it will show them all side by side:
Banner height:
This setting will determine the height of the banners.
Width:
Here you can decide if you want to show this section full-width or boxed width.
Space between banners:
You can create fun layouts by playing around with this setting. The default is 16px.
Show zoom effect on hover on banner images:
You can choose to enable a zoom effect for the banner images. This effect will be shown when you hover over the banner with your mouse.
Show move animation on hover on banners:
You can choose to enable a move animation for the banners. This effect will be shown when you hover over the banner with your mouse and causes the banner to move up a little. Note that the move animation will be disabled when 'space between banners' is set to less than 10, because in that case there is not enough space for the animation to show flawlessly.
Show content on hover on banner images
You can choose to enable this animation for the banners. Enabling this setting will mean that the content of the banners will be hidden by default, and it will show when you hover over the banner. When you do so, all other banners will show an overlay so the highlighted banner will really stand out.
Color scheme on hover on banner images
When you have the option 'show content on hover on banner images' enabled, you can use the color scheme picker to choose what color the overlay should be. The overlay will show with an opacity of 70%.
Mobile Layout
Layout:
Choose the layout for the banners on mobile, would you like the image to show in rows or in a slider?
Banner width:
This setting only applies when the layout mobile setting is set on 'In rows'.
On the mobile version, would you like the images to stretch over the full width of the page or a boxed with.
The boxed with has whitespace at the left and the right of the image.
Banner height:
This setting will determine the height of the banners on mobile
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.
How to configure the Image banners and change the images & text?
By default, there are 3 images/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:
The section says it all, its an image gallery after all. Set your images here, for example a nice banner for a sale.
Video:
Instead of an image, you can also choose to show an inline video. This will override the image setting.
Image/video overlay opacity:
Want to show a colored overlay over the image/video? Set the opacity here.
This comes in handy when you use text over the banner image/video to make it easier to read.
100% = full color
0% = no overlay
Color scheme:
Select the color scheme for the overlay + text colors. You can select the color pallets here.
Button color scheme:
Select the color scheme for the button colors. You can select the color pallets here.
Image position:
Set the position of the image, what we mean by that is how the image will behave.
For example: The image is too big for the field, do you want the image to align in the center, set it to center center.
Content position:
Set the position of the content within the image (text + button)
Heading size:
Select the size of the heading from a range of small to extra large. When you choose for "Extra large", the size of the description will also be a bit larger than normal. The heading size you choose here is only applied to desktop view, you can customize the mobile heading size globally in the general theme settings under "Typography".
Heading:
Fill in the title of your banner. Don't want to show a title? Simply leave the field empty!
Description:
In the text field you can fill in more text to reinforce the title of your banner. For this example we're going to use: 'The sale end on the 15th of June!'.
Button label:
This text will show on the button, for example: 'View products'
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.
2. How to remove an image banner?
Don't want to use 3 banners? But you want to use 2? You can always remove the banners one by one to fit in your needs.
To remove the blocks you simply click on the block you want to remove in your sidebar on the left of your screen.
After you clicked the block, on the right of your screen the sidebar will open.
On the bottom left of this sidebar, the following button 'Remove block' shows.
Simply click on this button and your banner/image will be deleted.
3. How to add a new/more image banners?
Do you want to use more images? That's possible, no worries!
To add blocks you simply click on the 'Add Image banner' button in your sidebar on the left of your screen.
After you clicked on 'Add Image banner', a new block will be added. You can edit the block like explained in step 1.
