Image Gallery on desktop:
Image Gallery on mobile (as a slider):
It can also be made stacked instead of slider.
What it looks like in the Theme Customizer:
You can see a working example here.
Follow the instructions below to add this image gallery to your theme as a section that can be added to any page (if you have an Online Store 2.0 theme):
- In your Shopify dashboard, go to Online Store -> Themes. Then find the theme you want to add this gallery to and click Actions -> Edit Code.
- On the left-hand side, open Sections and click Add a new section.
- Select liquid and name it image-gallery. Then hit Done.
- Get the code by clicking on the button below, copy it and paste it into the image-gallery section you just created. Then save it.
- Click the three dots beside the theme name, on the top left, then click Customize Theme.
- You should now see a section called "Image Gallery" available to use. Enjoy!
PS: I packed everything in a single file for easy of use. If you are a developer, you may want to split the CSS, JS and HTML/Liquid into separate bits. Or not.