Shopify Instagram Story Section with Video Tutorial

Hey friends! Just created a new section based on my previous IG Story Style Section. This time I included a video pop up. We are going to use SwiperJS for the slider.

Step 1

Navigate to your theme code. Select the “theme.liquid” file. Add the following code snippets before the closing tag of the head of the document: </head>

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

This installs all of the necessary files for SwiperJS.

Step 2

Next you’re going to create a new section file in your theme. Go to the section folder and click new section.

You can name it whatever you’d like.

Step 3

🚨 Disclaimer: Some Shopify themes may have existing code that messes with the functionality of this section. If that is the case, don’t worry. 😮‍💨 Feel free to reach out and ask me any questions. Most times it’s a simple fix.

In the new file you created, replace the code with the following code snippet:

<style>

  .ig-story-section-ctr {
    padding: 15px 0px 10px 10px;
    display: flex;
    min-height: 125px;
    overflow-x: scroll;
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
  }
  .ig-story-section-ctr::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
  }
  .story-img {
    width: 60px;
    height: 60px;
    aspect-ratio: 1/1;
    object-fit: cover;
    margin-bottom: 10px;
    border-radius: 100px;
  }
  .story-collection-title {
    line-height: 15px;
    margin-block-start: 0;
    margin-block-end: 0;
    font-size: 12px;
  }
  .story-link {
    text-decoration: none;
    color: black;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    align-items: center;
    height: 55px;
    margin-right: 10px;
    max-width: 100px;
    text-align: center;
  }

  .video--modal {
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    width: 100vw;
    height: 100%;
    z-index: 10000;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: start;
    display: none;
  }

  .video--modal-exit {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 30px;
    color: white;
    padding-bottom: 40px;
  }

  .video--modal-exit img {
    width: 30px;
    height: auto;
  }

   .video--modal iframe {
    opacity: 100% !important;
  }

  .reviewSwiper {
    width: 90%;
    padding: 80px 20px;
  }

  .swiper-slide {
    width: 100%;
    height: 400px;
  }

  #shopify-section-{{ section.id }} > div.video--modal.mobile-only-section > div > div.swiper-button-prev {
    color: rgba(255, 255, 255, 0);
    top: var(--swiper-navigation-top-offset, 90%);
    left: var(--swiper-navigation-sides-offset, 120px);
  }

  #shopify-section-{{ section.id }} > div.video--modal.mobile-only-section > div > div.swiper-button-prev img {
    width: {{ section.settings.icon_size }}px;
    height: {{ section.settings.icon_size }}px;
  }

  #shopify-section-{{ section.id }} > div.video--modal.mobile-only-section > div > div.swiper-button-next {
    color: rgba(255, 255, 255, 0);
    top: var(--swiper-navigation-top-offset, 90%);
    right: var(--swiper-navigation-sides-offset, 120px);
  }

   #shopify-section-{{ section.id }} > div.video--modal.mobile-only-section > div > div.swiper-button-next img {
    width: {{ section.settings.icon_size }}px;
    height: {{ section.settings.icon_size }}px;
  }

  .swiper-button-next:after {
    display: none;
  }

  .swiper-button-prev:after {
    display: none;
  }

  @media only screen and (min-width: 500px) {
    /* For desktop: */
    .mobile-only-section {
      display: none;
    }
  }
</style>

<div class="mobile-only-section">
  <div class="ig-story-section-ctr">
    {% for block in section.blocks %}

        <div class="story-link">
          
          <img src="{{ block.settings.collection_img | img_url: 'small'}}" alt="Coffee Flag" loading="lazy" width="100" height="100" class="story-img">
          <p class="story-collection-title">{{ block.settings.collection_title }}</p>
          
        </div>

    {% endfor %}
  </div>

</div>




<div class="video--modal mobile-only-section">
  <div class="video--modal-exit">
     {% if section.settings.modal_close_icon != blank %}
         <img
         src="{{ section.settings.modal_close_icon | image_url: height: 1500 }}"
         alt="{{ section.settings.modal_close_icon.alt | escape }}"
         loading="lazy"
         width="{{ section.settings.modal_close_icon.width }}"
         height="{{ section.settings.modal_close_icon.height }}"
         class=""
         >
      {% else %}
                
    {% endif %}
  </div>
  <!-- Slider main container -->
<div class="reviewSwiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    {% for block in section.blocks %}
    <!-- PLACE EMBED HERE -->
  <div class="swiper-slide">
    {{ block.settings.embed_code }}
    SLIDE {{ forloop.index }}
  </div>
    {% endfor %}
  </div>
  

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev">
    
    {% if section.settings.modal_left_icon != blank %}
         <img
         src="{{ section.settings.modal_left_icon | image_url: height: 500 }}"
         alt="{{ section.settings.modal_left_icon.alt | escape }}"
         loading="lazy"
         width="{{ section.settings.modal_left_icon.width }}"
         height="{{ section.settings.modal_left_icon.height }}"
         >
      {% else %}
                
    {% endif %}
  </div>
  <div class="swiper-button-next">
    {% if section.settings.modal_right_icon != blank %}
         <img
         src="{{ section.settings.modal_right_icon | image_url: height: 500 }}"
         alt="{{ section.settings.modal_right_icon.alt | escape }}"
         loading="lazy"
         width="{{ section.settings.modal_right_icon.width }}"
         height="{{ section.settings.modal_right_icon.height }}"
         class=""
         >
      {% else %}
                
    {% endif %}
  </div>


</div>
  
</div>

<script>

  var storyLinks = document.querySelectorAll('.story-link');
  var videoModalExit = document.querySelector('.video--modal-exit');
  var videoModal = document.querySelector('.video--modal');

   storyLinks.forEach(function(storyLink, index) {
    storyLink.addEventListener('click', function(event) {
      videoModal.style.display = 'block'; // Show the video modal
      goToSlide(index);
    });
  });

  // Add click event listener to the video modal exit div
  videoModalExit.addEventListener('click', function(event) {
    videoModal.style.display = 'none'; // Hide the video modal
    storyLink.style.display = 'block'; // Show the story link
  });

  // Function to navigate to a specific slide in the Swiper slider
  function goToSlide(index) {
    swiper.slideTo(index); // Navigate to the specified slide
  }



  
  const swiper = new Swiper('.reviewSwiper', {
  // Optional parameters
  loop: true,
  slidesPerView: 1,
  spaceBetween: 10,

  

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  
});
</script>



{% schema %}
{
  "name": "Video Gallery",
    "settings": [
      {
        "type": "image_picker",
        "id": "modal_close_icon",
        "label": "Video Modal Close Icon"
      },
      {
        "type": "image_picker",
        "id": "modal_left_icon",
        "label": "Video Modal Left Icon"
      },
      {
        "type": "image_picker",
        "id": "modal_right_icon",
        "label": "Video Modal Right Icon"
      },
      {
        "type": "range",
        "id": "icon_size",
        "label": "Arrow Icon Size",
        "min": 10,
        "max": 100,
        "step": 5,
        "unit": "px",
        "default": 40
      }
    ],
      "blocks": [
        {
          "type": "story",
          "name": "Collection",
          "settings": [
            {
              "type": "url",
              "id": "collection_link",
              "label": "Collection Link"
            },
            {
              "type": "image_picker",
              "id": "collection_img",
              "label": "Collection Image"
            },
            {
              "type": "text",
              "id": "collection_title",
              "label": "Collection Title"
            },
            {
              "type": "liquid",
              "id": "embed_code",
              "label": "Embed Code"
            }
          ]
        }
      ],
        "presets": [
          {
            "name": "Video Gallery"
          }
        ]
}
{% endschema %}

Final Step

Add your new section to a template in the them customizer and test it out. If you have any issues, feel free to reach out.