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

[Beelze6]

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!

[rajweb]

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:

<div class="gallery-item">
  <a href="{{ 'image1.jpg' | asset_url }}" target="_blank">
    <img src="{{ 'image1.jpg' | asset_url }}" alt="Image 1">
  </a>
</div>

<div class="gallery-item">
  <video controls>
    <source src="{{ 'video1.mp4' | asset_url }}" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

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

[akshay_bhatt]

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:

<div class="gallery-container">
  {% for media in page.media %}
    {% if media.media_type == 'image' %}
      <div class="gallery-item">
        <img src="{{ media.src }}" alt="Gallery Image" class="gallery-image" />
      </div>
    {% elsif media.media_type == 'video' %}
      <div class="gallery-item">
        <video class="gallery-video" controls>
          <source src="{{ media.src }}" type="video/mp4">
          Your browser does not support the video tag.
        </video>
      </div>
    {% endif %}
  {% endfor %}
</div>

• 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 = `<div class="modal-content"><img src="${img.src}" /></div>`;
      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

[namphan · Accepted solution]

Hi @Beelze6,

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

I hope it helps!

[Beelze6]

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!

[namphan]

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