gallery image section

Adding a Gallery Section for Shopify Website

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.

Please note that the code may not be compatible with any currently installed apps.

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!
Back to blog

5 comments

Could you add a title and some text over the images?

Matt

Hi @AMY RANESES,

There is a link option for this. Just go to the theme settings

Made4Uo

is it possible that the images are connected to links? different links for different images? thanks

Amy Raneses

Yes, we can add more than 11 photos, but we have to think of placement and the size of the image. You can drag and drop the images in the block so you can reposition it

Made4Uo

Can you share how to make it allow for more than 11 photos? And is it possible for the newest image added to be first in the grid. So the older photos move down the page? Thank you!

Aram Susong

Leave a comment