Shopify + Galleria to create photo gallery

[Roy_Mendrin]

Thanks Ryan this was very useful! I'm looking to add multiple galleries to one page, basically a gallery for each of my clients installations/projects. I copied and pasted the entire code but instead of the images appearing in a gallery like they did with the first one, they just appeared below each other. Is there a way to add multiple galleries to one page? Thanks!

[Amanda13]

Also, I'm trying to add text above the gallery but it isnt letting me. I want to put a title above the gallery to name each installation. Can you help? Thanks!

[Ryan42]

Hi Roy,

I found the answer to this question on another forum. I was able to get it to work using the code below:

<div class="gallery1">IMAGES HERE</div>
<div class="gallery2">IMAGES HERE</div>
<script>// <![CDATA[
Galleria.loadTheme('https://cdn.shopify.com/s/files/1/0620/3589/t/6/assets/galleria.classic.min.js');
 $(".gallery1").galleria({
        width: 300,
        height: 300
    });
    $(".gallery2").galleria({
        width: 300,
        height: 300
    });
// ]]></script>

[Ryan42]

Amanda, you probably need to switch to HTML by clicking the brackets "Show HTML" in the upper right of the editor. Then you can type text before the first <div> on the page. That may be easier than trying to type text in the visual editor.

[Roy_Mendrin]

Thanks. I noticed the galleries show up really small when doing it that way. How do I change the size of the gallery and the images within the gallery? 

[Ryan42]

Look at the code. I think you'll figure it out ;) You gotta get into the code a bit with Galleria. It's free, but it's not a plug-and-play installation.

[Kadri_Siff]

I have followed the instructions in the tutorial, managed to get images on the Gallery template page; changed the snippet into Galleria.run('.galleria', {responsive:true,height:0.5625}); but when I view the website there are no images.

What can I try to fix it?

Thank you!

[Ryan42]

Hard to say for sure. Make sure you've done all the code correctly. Sometimes Galleria doesn't work with certain themes. I've seen it before.

[Kadri_Siff]

Hi Ryan, I managed to get the gallery working nicely - I tried copying a different URL to Galleria load theme at the very end and that worked.

The images in the gallery appear very small, although when I insert them, they are really quite large. Is there a simple way how to make the photos appear larger in Galleria slides?

Thank you!

[michelle23]

Hi. I used your code above to add multiple galleries to one page and it works great!

<div class="gallery1">IMAGES HERE</div>
<div class="gallery2">IMAGES HERE</div>
<script>// <![CDATA[
Galleria.loadTheme('https://cdn.shopify.com/s/files/1/0620/3589/t/6/assets/galleria.classic.min.js');
 $(".gallery1").galleria({
        width: 300,
        height: 300
    });
    $(".gallery2").galleria({
        width: 300,
        height: 300
    });
// ]]></script>

I'm trying to figure how to further configure it and where to insert the configuer code.  I want to make my galleries responsive. 

I tried putting this code just below the load theme function...

Galleria.configure({
    responsive: true
});

but it doesnt work.  Could you please help? 

Thanks so much!