How to Build an Interactive UGC Slider with Popups in Shopify

Do you want to build an Interactive UGC Slider with Popups in Shopify without a Shopify App?

If you’re looking to showcase customer content—like Instagram posts, videos, or photos—on your Shopify store, this tutorial walks you through how to build a dynamic section that displays a slider with popup support.

We’ll cover:

• Adding support for videos, image URLs, and Instagram embeds
• Using a Swiper slider
• Opening media in a popup with next/previous navigation

---

Step 1: Section Overview

We are building a section called IMMI in the Wild that loops through user-generated content (UGC). Each block can be one of the following:

• Instagram embed (iframe)
• Self-hosted video (video tag)
• Direct image URL
• Or fallback thumbnail

Each slide opens in a popup when clicked.

---

Step 2: Define the Section Schema

In your Shopify theme, create a new section file like this:

sections/immi-in-the-wild.liquid

At the bottom of the file, include the schema. This defines the fields available for each block (thumbnail, video URL, embed URL, etc.):

{
  "name": "IMMI in the Wild",
  "max_blocks": 10,
  "blocks": [
    {
      "type": "ugc_video",
      "name": "UGC Video",
      "settings": [
        {
          "type": "image_picker",
          "id": "thumbnail",
          "label": "Thumbnail Image"
        },
        {
          "type": "url",
          "id": "video_url",
          "label": "Self-hosted Video URL"
        },
        {
          "type": "url",
          "id": "embed_url",
          "label": "Instagram Embed URL"
        },
        {
          "type": "url",
          "id": "image_url",
          "label": "Direct Image URL"
        },
        {
          "type": "text",
          "id": "caption",
          "label": "Caption"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "IMMI in the Wild",
      "category": "Custom",
      "blocks": []
    }
  ]
}

This lets the merchant add a thumbnail and optionally a video, image URL, or Instagram URL per block.

---

Step 3: Slider HTML Layout

Now, inside the section, we loop through all blocks using Liquid.

We check which type of content is present:

• If Instagram embed is present, we mark it as an iframe.
• If a video URL is present, it’s a video.
• If image URL is present, it’s an image.
• Otherwise, we fallback to the uploaded thumbnail.

Each block is wrapped in a Swiper slider .swiper-slide.

If a caption is added, it’s shown at the bottom of the image. If it’s a video or image, we add a corner badge saying ▶ or IMG.

---

Step 4: Load Swiper (Slider Library)

At the bottom of the section, include Swiper’s CSS and JS via CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>

Then initialize Swiper in JavaScript using:

const swiper = new Swiper('.immi-slider', {
  slidesPerView: 1.2,
  spaceBetween: 20,
  loop: true,
  speed: 800,
  autoplay: {
    delay: 6000,
    disableOnInteraction: false,
    pauseOnMouseEnter: true,
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  },
  breakpoints: {
    640: { slidesPerView: 2 },
    768: { slidesPerView: 3 },
    1024: { slidesPerView: 4 }
  }
});

This gives a responsive, swipeable slider.

---

Step 5: Add Popup Logic

When a user clicks on a thumbnail, we open a popup showing the full content (video, iframe, or image).

We build a list of all blocks in a blocks[] array in JavaScript. When a thumbnail is clicked, we call triggerPopup() with the right content type and URL.

The popup dynamically injects HTML into the page if it doesn’t exist already, and then shows the content inside a styled overlay.

We also support next/previous buttons to navigate between slides within the popup.

The popup supports:

• Videos with <video> tag
• Instagram via <iframe>
• Images with <img>

The popup closes when you click outside it or press the close (×) button.

---

Step 6: Style the Slider and Popup

The section uses Tailwind CSS classes (but you can use your own CSS). Styles include:

• Rounded image corners
• Hover zoom effect on images
• Responsive layout
• Popup panel with fixed position and scroll support

You can also customize the overlay to match your brand colors or typography.

---

Final Result

You now have a completely interactive slider section that supports:

• Swipeable UGC content
• Instagram embeds
• Videos and images
• Fullscreen popup viewing with navigation

---

Bonus Ideas

Here are a few ways you can expand the section:

• Add lazy loading (loading="lazy" on images)
• Show share buttons in the popup
• Load Instagram thumbnails dynamically via the API
• Track popup opens for analytics