Image Gallery Section for Shopify - No Apps or Subscription
💻 For the paid code and instructions, check the link: https://tinyurl.com/shopify-image-gal...
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. You can create as many as you want. I will tell in details on how to do that.
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
Happy viewing! Don't forget to subscribe (",)
0:00 intro
0:09 preview of the section
0:24 tutorial starts
8:33 naming grid areas and using template
10:20 assigning grid areas to the Shopify block using forloop.index
14:12 hover design
15:30 centering an image using position absolute
16:27 css jitter and fixing it
23:42 using clamp for responsive font-size
27:18 creating a css file and linking it to the section
Start for FREE with Shopify today! https://tinyurl.com/shopify-free-trial