Advertisements

Shopify Gallery with Galleria – Step by Step

Shopify Gallery with Galleria – Step by Step



Shopify doesn’t provide an easy way to add a picture gallery the way most website builders do. And while there are Shopify Apps to create galleries, they are not free. I found the solution to this problem using the Galleria plugin and detail how to set it up in this video.

Visit my post in the Shopify forums to find the code snippets:
https://ecommerce.shopify.com/c/ecommerce-design/t/shopify-galleria-to-create-photo-gallery-225259

Full Shopify Walkthrough:


source

Advertisements

36 thoughts on “Shopify Gallery with Galleria – Step by Step

  1. stylishranchgirl

    This is a great tutorial and easy to follow. Thank you! My images just stack vertically. I just installed Parallax. I can't believe for $180 this theme doesn't come with galleries or sliders. Unreal. I hate to spend more money. Here is the code: <div class="galleria"><img src="//cdn.shopify.com/s/files/1/2731/1180/files/Dr._Lyle_large.jpg?v=1515973855" alt="" /><img src="//cdn.shopify.com/s/files/1/2731/1180/files/Dr._Lyle_large.jpg?v=1515973855" alt="" />MORE IMAGES GO HERE</div>
    <script>// <![CDATA[
    Galleria.loadTheme('https://cdn.shopify.com/s/files/1/2731/1180/t/3/assets/galleria.classic.min.js&#39😉;
    Galleria.run('.galleria');
    // ]]></script>

  2. Amanda Seguin

    Aloha! Some assistance would be great (: So I have already downloaded the first two in assets "galleria-1.5.7.js" & "galleria-1.5.7.min.js". I am stuck with the themes folder>classic >the remaining files because in your video it shows 6 files to be added to the assets. However, the recent version has 11 files. Which do I add and do I add them to the assets? So looking forward to your response. Thank you!

  3. Jason Faulkner

    Ryan, after some tweeking and playing I got the code to work. http://teamgearup.myshopify.com/pages/custom-gallery I have a question : How can I make the gallery auto play? I went to the Galleria forum in search. It does give me code to copy paste, in which I did. But it did not work. I had to use the Galleria.run('.galleria', {responsive:true,height:0.5625}); code to make the slide come alive. I had to reduce the number by 40% to make it work. From what I understand the code to auto play should go right before this code Galleria.run('.galleria', {responsive:true,height:0.5625}); any idea? thanks for the vid helped out allot.

  4. BanksPhotos

    Ryan, thank you for this awesome tutorial. I had no problems following your steps to get Galleria to work within my Shopify Supply template. However, I really need a video gallery rather than photos. According to the Galleria documentation it should be easy.

    http://galleria.io/docs/getting_started/quick_start (fourth code box from the top)

    I have tried many variations. Using a thumbnail, I get a play button but nothing will play. Without a thumbnail nothing happens.

    I must be missing something simple and hoping an experienced set of eyes will offer some insight.

    Thank you very much, Josh

  5. Talyn

    I get a blank white page with the address "data:," when I save a page with the galleria code in it. Has anyone else experienced this? If I remove the code and save it, it refreshes like normal.

  6. Danielle Miller

    Thanks so much for the tutorial! I am working on it, but it looks like maybe Shopify removed the forum post with the code? At least I don't seem to be able to find it. Any chance you can post that code in the description of the video? Thanks for this!

Leave a Comment

Your email address will not be published. Required fields are marked *

*
*