Update to fix the Instagram Section for District—premium Shopify theme http://help.stylehatch.com/article/332-update-to-fix-the-instagram-section-for-district

instagram-patch.liquid

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
  (function ($) {
    var $instagramSection = $('.instagram-collection');
    var loadImages = function($container, data, imageCount){
      for (var i = 0; i < imageCount; i++) {
        var images = data.data[i].images,
            // Thumbnail
            thumbnail = images.thumbnail.url,
            thumbnailWidth = images.thumbnail.width,
            // Low Resolution
            low_resolution = images.low_resolution.url,
            low_resolutionWidth = images.low_resolution.width,
            // Standard Resolution
            standard_resolution = images.standard_resolution.url,
            standard_resolutionWidth = images.standard_resolution.width;
        if(window.lazySizes){
          var $image = $container.find('.box-' + i + ' .card__image');
          $image.replaceWith('<div class="card__image lazyload"></div>');
          var $shotImage = $container.find('.box-' + i + ' .card__image');
          $shotImage.css({ 'background-size': 'cover' });
          $shotImage.attr('data-sizes', 'auto');
          $shotImage.attr('data-bgset', thumbnail + ' ' + thumbnailWidth + 'w, ' +
                                        low_resolution + ' ' + low_resolutionWidth + 'w, ' +
                                        standard_resolution + ' ' + standard_resolutionWidth + 'w');
        }
        if(!window.lazySizes) {
          var $image = $container.find('.box:eq(' + i + ') figure img');
          var $a = $container.find('.box:eq(' + i + ') figure a');
          $a.css({
            'padding-top': '100%',
            'position': 'relative',
            'overflow': 'hidden',
            'display': 'block'
          });
          $image.replaceWith('<div class="card__image lazyload"></div>');
          var $shotImage = $container.find('.box:eq(' + i + ') .card__image');
          $shotImage.css({
            'background-size': 'cover',
            'background-image': 'url(' + standard_resolution + ')',
            'background-position': 'center',
            'display': 'block',
            'position': 'absolute',
            'top': '0',
            'left': '0',
            'width': '100%',
            'height': '100%'
          });
        }
      }
    }
    $instagramSection.each(function(i){
      var $container = $(this);
      // sections
      if(window.storeWithExpiration){
        var accessToken = $container.data('instagram-access-token'),
            imageCount = $container.data('image-count');
            
        var checkImages = setInterval(function(i){
          if($container.find('img').length > 0 && storeWithExpiration.get(accessToken) !== null){
            clearInterval(checkImages);
            var data = storeWithExpiration.get(accessToken);
            if(imageCount > data.data.length) {
              imageCount = data.data.length;
            }
            loadImages($container, data, imageCount);
          }
        }, 100);
      }
      // pre-sections
      if(!window.storeWithExpiration){
        var accessToken = $container.data('iat'),
            imageCount = '18';
        var apiURL = 'https://api.instagram.com/v1/users/self/media/recent/?access_token=' + accessToken + '&count=20';
        $container.find('.box').hide();
        $.ajax({
          url: apiURL,
          dataType: "jsonp",
          timeout: 5000,
          success: function(data) {
            if(imageCount > data.data.length){
              imageCount = data.data.length;
            }
            var checkImages = setInterval(function(i){
              if($container.find('img').length !== 0){
                clearInterval(checkImages);
                loadImages($container, data, imageCount);
                $container.find('.box').show();
              }
            }, 100);
          }
        });
      }
    });
  })(jQuery);
});
</script>

On January 11, 2018, Instagram made changes to how they structure their image URLs. Now each valid size, thumbnail, low resolution and standard resolution, have unique identifiers as a part of the URLs. The issue has been officially fixed with District 2.4.1, but the following steps will allow you to easily fix District without a full update. If you need help fixing your shop, reach out to us at http://help.stylehatch.com/contact

http://help.stylehatch.com/article/332-update-to-fix-the-instagram-section-for-district

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. Under Snippets, click the link Add a new snippet.
4. Name your new snippet instagram-patch.
   
5. In your new snippet file, paste this code hosted on GitHub.
6. Click Save.
7. Under Layout, locate the file theme.liquid, and click it to open it in the code editor.
8. Near the end of the file, right before the closing </body> tag, paste the following code:

{% include 'instagram-patch' %}

9. Click Save.