Adding an Instagram feed

Up until March 2020, our Split theme had an Instagram section in it. Because of some changes in Instagram's API, themes can no longer offer working Instagram feed sections, and as from March 31st, 2020, all of these feeds will stop working.

You can read more about these changes here: https://help.shopify.com/en/manual/using-themes/instagram-feed-changes

From the apps that we've tested, we found that there is one app which blends well with our theme: https://apps.shopify.com/instafeed.

We like that this app has a free plan for basic usage. However, since the design is a bit different to what he previously had in our theme, we've come up with a code snippet that changes the app's design a bit, to fit better in Split's design boundaries. 

To add the code, you'll have to edit the theme files, choose /assets/theme.css file (or in older theme versions: assets/css_main.scss.liquid) and at the very end of the file, paste the following snippet:

#insta-feed {
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    padding-top: 0 !important;
    margin-top: -1px !important;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
#insta-feed > h2 {
    margin: 0;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0 !important;
}
#insta-feed > a:not(.instafeed-lightbox) {
    position: relative;
    border-left: 1px solid #e9e9e9 !important;
    border-top: 1px solid #e9e9e9 !important;
    margin-top: -1px;
    z-index: 9;
}
#insta-feed > h2,
#insta-feed > a:not(.instafeed-lightbox) {
    width: 25%;
    height: 50vh !important;
    min-height: 0 !important;
}
@media screen and (max-width: 768px), screen and (max-width: 1024px) and (orientation: portrait) {
  #insta-feed > h2,
  #insta-feed > a:not(.instafeed-lightbox) {
    width: 50%;
    height: 50vh !important;
    min-height: 0 !important;
  }
}
#insta-feed > a:not(.instafeed-lightbox) .instafeed-container {
    width: 100% !important;
    padding: 0 !important;
    height: 100% !important;
}
#insta-feed > a:not(.instafeed-lightbox) .instafeed-container div, 
#insta-feed > a:not(.instafeed-lightbox) .instafeed-container img {
    width: 100% !important;
    height: 100% !important;
}
#insta-feed > a:not(.instafeed-lightbox) .instafeed-container div {
    padding: 30px;
}
@media screen and (max-width: 480px){
  #insta-feed > h2 {
    font-size: 1.2rem;
  }
  #insta-feed > h2, 
  #insta-feed > a:not(.instafeed-lightbox) {
    height: 30vh !important; 
  }
}

Then you'll just have to configure the app (connect it to your account).

This is how the end result should look like: 

If you are using the title box (as in our screenshot) and you have an extra image on the third row that you want to hide, please use this CSS code at the end of the assets/css_main.scss.liquid file:

#insta-feed a:nth-last-child(2) {
   display: none !important;
}
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.