Compatibility: Compatible on most Shopify themes, from Debut to Dawn 2.0.
With the new Shopify 2.0, Dawn theme has this collage section but it is only limited to three items. In this tutorial, we are going to create a section with collage of 11 pictures. If you want to have equally space, more than 11 pictures gallery, you can use the code here.
We are going to use grid and use the grid-area to reposition images using the theme editor. We will be naming our grid area so it corresponds to the block index and will be able to reposition images easily to a different grid-area.
In this tutorial, we are going to talk about the following:
- making a template for your collage
- naming grid-areas
- setting up the grid-area to match the placement of the blocks in the theme editor, using forloop.index
- using position absolute to position image to the center
- fixing the css jitter
- using the font size clamp() to have a responsive font
- creating a .css file and link the file to your section
NOTE: I made several updates and added several options that make it easy to personalized the section. With that being said, the code below will be different from the video.
What you are buying:
- Update 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.
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.
Do not forget to subscribe in my YouTube channel (",)
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.