Is there a way or app to create just a simple image and video gallery?

Store Design
, ,
1

Hi! I want to create a simple gallery, not for products, it’s for people who has them, we have several pics and videos but I can’t find a way to make a gallery to upload them, I don’t need something fancy, I just need that when you open the image, enlarges, and play the videos, that’s all.

My videos are not in YouTube, I have the video files or the link because are uploaded on Shopify as archives, same as images.

My theme (Publisher) does not have the opton to create a gallery.

Thanks!

2

Hey @Beelze6 ,

To create a simple gallery for your images and videos, follow these steps:

  1. Upload your images/videos to Shopify under Settings > Files and copy their URLs

  2. Create a new page in Shopify and switch to the HTML editor.

  3. Add the following code for a basic gallery:

Save the page and check the gallery on your store. For enlarging images on the same page, consider using a tool like Fancybox .

This should give you a simple gallery with clickable images and videos. Let me know if you need further assistance!

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

3

Hi @Beelze6 ,

To create a simple gallery in Shopify’s Publisher theme:

  1. Create a New Page Template:

    • Go to Online Store > Themes > Edit code.

    • Add a new template for “page” called gallery.

    • In page.gallery.liquid, add this structure:


  {% for media in page.media %}
    {% if media.media_type == 'image' %}
      

        
      

    {% elsif media.media_type == 'video' %}
      
        
      

    {% endif %}
  {% endfor %}
  • style with css add the css in theme.css.liquid:
.gallery-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gallery-item {
  width: 100%;
  max-width: 200px;
  position: relative;
  cursor: pointer;
}

.gallery-image {
  width: 100%;
  height: auto;
  transition: transform 0.2s ease;
}

.gallery-image:hover {
  transform: scale(1.1);
}

.gallery-video {
  width: 100%;
  height: auto;
  max-width: 300px;
}
​.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content img {
  max-width: 90%;
  max-height: 90%;
}

add the javascript:

document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.gallery-image').forEach(img => {
    img.addEventListener('click', () => {
      const modal = document.createElement('div');
      modal.classList.add('modal');
      modal.innerHTML = `
`;
      document.body.appendChild(modal);
      modal.addEventListener('click', () => modal.remove());
    });
  });
});
​

save and preview.

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

Thanks & Regards
Akshay Bhatt

4

Hi @Beelze6 ,

You can use builder apps for it, they will help you create unique sections for this.

I hope it helps!

5

Hey, tried many things, but this was the most comfortable, not the best solution, but I managed to do (kind of) what I needed.

Thanks!

6

Hi @Beelze6 ,

Thank you.

Can you also describe the section in detail or send me a demo of it? I will double check everything and guide you to add code for it

7

Hi @Beelze6

Yes, for that kind of setup you can use an app. Since your theme does not include a gallery section, a gallery app is the easiest way to show both images and Shopify-hosted video files in one place.

You can check Essential Grid Gallery App. It works well for simple image and video galleries, and visitors can open images larger and play videos directly. You also do not need YouTube links only, since Shopify-hosted media can be used too.

Thank you