Multiple Shopify Images Gallery Page

Multiple Shopify Images Gallery Page

Log in or Sign up to ensure access to purchased code across multiple devices.

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: Compatible on most Shopify themes, from Debut to Dawn (All Shopify 2.0 FREE themes

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 more than 100 pictures. You can also use GIF images. I have created another collage with set gallery position here

NOTE: Video below might differ to the actual appearance. Please check the demo store here. Password: made4uo

I created several image galleries that you might like, see the following:

 What you are buying:

  • A section for your own collage
  • Assign how many columns you want for desktop view, tablet view, and mobile view
  • Choose the image ratio from landscape, portrait, and square
  • Assign the text color, image text color, and the box shadow color
  • Collage title will show when the image is clicked
  • Able to single click to zoom the image to the middle instead of hover
  • Able to double click the image prior to zooming to open the link (if link is provided)
  • Click the zoomed image to close

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. In the newly created section, replace the existing code with the code below

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.

That is it (",)


Back to blog

Leave a comment