If you're like me, you don't mind paying a monthly subscription fee for Shopify apps that constantly provide value. But I don't like paying for a monthly fee for an app that becomes a static element. I'd rather pay a one-time fee for something like that.
So, I recently had a client that wanted to add some galleries to their landing pages. I looked at the available apps and didn't think it was worth paying a monthly fee for them. Instead, I found a free, open-source solution. It takes a little more technical capability to get it set up.
Here's the first gallery I created with it. It has a thumbnail scroll bar along the bottom. And clicking on the main photo brings up a full-screen modal view of the photos.
The solution I used is Galleria, which you can find at http://galleria.io. To get started, download the code files from their site. Here are the contents of the ZIP file I downloaded. I'm writing this on 5 May 17 and Galleria's current version is 1.5.6. So, the files you download may have a later version number.
The next step is to add the appropriate Galleria files to your Shopify theme. The files you need are the minified javascript file, so galleria-1.5.6.min.js in the case above and the appropriate files from the theme you prefer (more on themes in a bit). These files get added to the assets folder in your theme. In this example, I'm using the Classic theme that comes with the Galleria download. The files in the /themes/classic folder are. And the highlighted ones are the one I added to my theme.
Here's an explanation of the theme files you want to add to your theme's asset folder:
- All image files. Anything ending in .gif, .jpg or .png. These files are used for the animations on load or change. And for grahpics for navigation and such.
- Any CSS or JS files. In this case you DO NOT want to use the minified versions (the ones with .min in filename) as you may be editting these files.
The next step is to add a call to the Galleria javascript in theme.liquid within your theme. The call should be between the head tags. Here's what it looks like in theme.liquid. Notice it is before the closing head tag </head>.
Now, the Galleria functionality is available on every page in your Shopify store. To enable it, you'll need to add the appropriate code to either the theme file or the HTML section of the page.
When I add it to a template, I do that by creating a snippet that contains all the code the gallery needs and including that snippet in the template file. In this case here, I'm going to create a file called gallery-liquor.liquid and add it to the Snippets folder in my theme.
Here's how I include a reference to the snippet file in the template file. You'll want to place the include where you want to the gallery to be rendered.
And here's the contents of the Gallery-Liquor.liquid file:
The lines after Galleria.configure are many of the settings available in Galleria that control how the photo gallery works.
I hope this enough to get you started. There's a lot of power in Galleria, so I encourage you to explore the themes and the settings available.