How can I create a page template for a portfolio page, with 3 full-width columns, images of different sizes, and clickable images? I would like a template so that I can create individual gallery pages for each series.
I do art and photography and would like to use Shopify as my portfolio and storefront. But Shopify has VERY limited functionality for creating portfolio image galleries without coding, especially for multiple image sizes (vertical and horizontal). I have been trying to figure out how to make an image gallery for weeks. I’ve tried apps and plugins. I tried learning how to code one even though I know nothing about coding. I’ve tried just about everything and I’m about to give up. Thanks
Hi @XanMorrigan , will you like this one? If you have some other design, please share it I will make a code template for you. there is one need to give up.
1 Like
Hello @Ashan ,
Thank you very much for the encouragement. Something similar to what you’re showing here but a little simpler. Here’s a good example: https://www.irenerudnykphotography.com/ But her images aren’t clickable, and most of her images are the same vertical orientation. So similar to Irene Rudnyk but with different image sizes and clickable images. Thanks for responding.
What action will be done when someone clicks on an image?
1 Like
It will link to a full-sized version of the image. Thank you.
on the same page or external page
1 Like
I would prefer on an external page 
can you send some outline design of gallery? I think there will be extra white spaces as you want different width and height images.
1 Like
Hello, what do you mean outline design of the gallery? Thanks
I had to walk away from it for a bit! I was so frustrated. 
Something like this. Three columns with vertical and horizontal pictures evenly spaced.
Sorry for the late reply.
here is the demo of the section made for you. please give feedback about improvements so I can update and send it to you.
https://cameras-for-every-location.myshopify.com/
preview password: anc
1 Like
Hey that looks beautiful! Can you remove the shadow around the image? Thanks!
Removed. Also, do you want to keep the hover effect?
1 Like
Yes, the hover effect is nice! I like it.
will you allow me to add this gallery to your store or you will handle it with care?
1 Like
I would love to learn how to add it myself because I will need multiple gallery pages. So I need to be able to re-create new galleries - hopefully from a template. Plus, this is a common problem with Shopify so it might be helpful for other people to see how to do it too. Can you walk me through it? I understand the basics. Some code will go into a new template liquid. Some code will probably be CSS assets for style. Some code with go in the theme liquid. Right?
1 Like
Not much of that as you think. Just one file and you are good to go.
Go to the theme editor and in the sections folder click on "Add a new section ". Give it a fancy name and click “Done”.
Now a new file will be created. delete the default code that is automatically added into it and copy the new code from google docs and paste it into the file and click save.
https://docs.google.com/document/d/1vfJSEk4tVh4Gc7n97aTL3icdF0CiPh3A72whfbis_Is/edit?usp=sharing
Now go to the theme customizer and go to the page or template where you want to add that galley.
From the left side section container click on "Add Section" and search for “image gallery 3 column”.
1 Like
Sir, you are a genius and a hero. MVP of the year is Ashan folks. I hope more people can find this post if they need help with the same problem. I’m sorry for not specifying earlier. But the grid looks a little strange on mobile is it possible to make the mobile device layout a single column? Here’s a screenshot.
But! Here is the link to the preliminary gallery https://storiesofevermore.com/pages/asuka I haven’t added the clickable image pages yet. It looks beautiful.
I have update the file plz copy new code there.
1 Like
