Compatibility: Compatible on most Shopify themes, from Debut to Dawn 2.0
If you want to make your Shopify website more visually engaging and highlight a collection of images, adding a gallery section can be an effective solution. While the new Shopify 2.0 Dawn theme has a built-in collage section, it's limited to just three items. In this tutorial, we'll show you how to create a more comprehensive gallery section with up to 11 pictures only.
However, if you want to showcase more images or have them spaced equally, you'll need to use a multiple image gallery.
Using CSS grid, we'll create a layout that allows you to easily reposition images and customize the grid to suit your needs. By naming each grid area according to the block index, you'll be able to move images around and experiment with different layouts in the Shopify theme editor.
Whether you want to showcase products, events, or any other visual content, a gallery section is a great way to capture your audience's attention and make your website more dynamic. Follow these step-by-step instructions to add a stunning gallery section to your Shopify website today.
In the video, we will cover the following:
- Creating a template for your gallery section
- Naming the grid-areas for easy placement in the theme editor
- Setting up the grid-areas using forloop.index to match the block placement
- Positioning images to the center using position absolute
- Fixing the CSS jitter for a smooth user experience
- Using font-size clamp() to ensure responsive font sizes
- Creating a separate CSS file and linking it to your section
It's worth noting that we've made several updates and added more customization options to the code since the video tutorial was recorded. As such, the code you'll see below may differ from what you'll see in the video. Please follow the written instructions instead.
You can also check the demo store for gallery image section with password, made4uo.
I created several image galleries that you might like, see the following:
What you are buying:
- Updated code that does not need to go over the video
- Clickable image option available
What makes our code better:
- We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
- We do not leave or add codes use to advertise for our website
- Our code is mobile friendly
Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.
To start:
1. Go to your Online store > Themes > Actions > Edit code
2. Go to Section folder, create a section, you can name it what ever you want
3. I first thought clickable image is impossible with hover. I was able to add an option to make the image clickable.
4. Make sure you click SAVE.
5. Your done! All left is customizing your gallery in theme editor. The section name is Custom Collage, when adding the section in your theme editor.
Updates: 08/30/22 Added an option to change the box shadow, text colors, and make the image clickable if link is provided. I also added a text that will show when the image is hovered.
That's it (",)
Copied!
7 comments
Hi @Mili,
The layout and grid is set up already with template areas. Changing the layout and grid size, might have to change the CSS codes as well. Please do not hesitate to contact us using “Chat with us” to better assist you
hello i recently bought this code but how to i change the layout and the overall grid size?
Could you add a title and some text over the images?
Hi @AMY RANESES,
There is a link option for this. Just go to the theme settings
is it possible that the images are connected to links? different links for different images? thanks