Shopify + Galleria to create photo gallery

[Ryan42]

I started buildings sites for clients on Shopify this year and just recently had a client ask about adding an image gallery. It was only then that I realized...

"Shoot! Shopify doesn't have any built-in option for galleries"

I looked for plugins and didn't find any without a monthly payment. I can't imagine anyone paying monthly for the ability to have basic photo galleries on their site.

I searched some more and found some posts about the free Galleria plugin and integrating it with Shopify. There were no complete guides to doing it but I was able to figure it out. by piecing together different information.

I made this video to help people get this setup on their own without the hassle and it also shows my clients how to add pictures to a gallery. It's fairly easy to do but does involve a few steps for the initial setup.

Here's a link to the video: https://www.youtube.com/watch?v=Qb6CLUSbbNA

And here's the code that I mention in the video:

Code that gets added to theme.liquid: ( I have 2 lines of code in the video but this single line will work)

{{ 'galleria-1.4.2.min.js' | asset_url | script_tag }}

 Code for the page where you want to place the gallery:

<div class="galleria">
<img src="https://cdn.shopify.com/s/files/1/0620/3589/files/picture.jpg?603" /> 
MORE IMAGES GO HERE
</div>
<script>
Galleria.loadTheme('https://cdn.shopify.com/s/files/1/00/3589/t/6/assets/galleria.classic.min.js');
Galleria.run('.galleria');
</script>

The green/bold text above needs to change as I explain in the video. 

If you have problems with an error saying Fatal error: Could not extract a stage height from the CSS. Traced height: 0px. as several people have, just substitute the code below for the last line in the previous code snippet above. The 0.5625 can be changed to another number to change the aspect ratio to fit your images. It's a responsive height that will change depending on screen size.

Galleria.run('.galleria', {responsive:true,height:0.5625});

[Jason]

It looks like you're adding both the unminified and the minified version of the code. I've never used that js plugin but I'd guess only one is needed.

{{ 'galleria-1.4.2.js' | asset_url | script_tag }}
{{ 'galleria-1.4.2.min.js' | asset_url | script_tag }}

[Ryan42]

Yeah, the directions I found showed it that way. It doesn't make a difference, does it? Slower to load both I guess.

It works fine for me using just the min.js so I changed my code.

[Thrillera_Compa]

thanks alot for this. well appreciated. do u also have any idea on how to make a store homepage background an image slide. Please help me on this as i have tried several sources and have not recieved any info.

[Ryan42]

That's tricky to do well. The easiest way is to find a theme or plugin that provides this function. Or hire a Shopify Expert to custom code it for you. The trick with changing backgrounds is that you need to maintain contrast with the text content of the site. Your site already has some contrast issues if we're talking about the thrillera site.

[Shanteri_Shanbh]

Hello Ryan,

Thanks for the steps explained and video to create a gallery.

I followed the steps you have explained above and your youtube video. But unfortunately gallery I created is not coming up on the page.

Is there a possibility for you to check whats going wrong on my page?

http://www.sweetsurpriseflorist.in/pages/flower-decoration

https://sweet-surprise-florist.myshopify.com/admin/pages/19870617

I am just lost figuring out whats that missing? Could you plz help?

Thanks,

Shanteri Shanbhag

[Ryan42]

Try to substitute the last line of my initial post above. That seems to fix a few different problems I've seen. 

[Shanteri_Shanbh]

I did try this too. 

Galleria.run('.galleria', {responsive:true,height:0.5625});

I tried it once again, but no luck :(

[Ryan42]

Yeah, Shopify themes and Galleria don't always agree with one another unfortunately. There's not anything else I can suggest at this point bit if I find any other common issues and fixes, I'll post them here. Make sure you followed the directions exactly.

[Shanteri_Shanbh]

Issue is fixed now. There was a script in theme.liquid which was blocking this functionality. Moving the script out of theme.liquid resolved this issue. Gallery is not looking great on the page :)

Thanks so much for the tutorial :)

Thanks,

Shanteri Shanbhag