Shopify + Galleria to create photo gallery

New Member
2 0 0

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!

0 Likes
New Member
1 0 0

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!

0 Likes
Shopify Partner
24 0 2

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>

 

Shopify Partner, Helping 200 Small Businesses Get Affordable Websites
0 Likes
Shopify Partner
24 0 2

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.

Shopify Partner, Helping 200 Small Businesses Get Affordable Websites
0 Likes
New Member
2 0 0

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? 

0 Likes
Shopify Partner
24 0 2

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.

Shopify Partner, Helping 200 Small Businesses Get Affordable Websites
0 Likes
New Member
2 0 0

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!

0 Likes
Highlighted
Shopify Partner
24 0 2

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.

Shopify Partner, Helping 200 Small Businesses Get Affordable Websites
0 Likes
New Member
2 0 0

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!

0 Likes
New Member
3 0 0

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!

 

0 Likes