All of our Out of the Sandbox themes allow for an Instagram Feed to be displayed on your home page! Here are some FAQs that come in with the various Instagram API updates.
In This Article
- UPDATED: How to fix your Instagram feed's broken image links (2018)
- Generating an Access Token (June 1st, 2016)
- Why aren't my Instagram images all squares anymore?
- Why aren't my Instagram slideshow posts showing up?
How to fix your Instagram feed's broken image links
Instagram has updated their API on January 11th, 2018, which has caused the Instagram feeds to no longer display properly in our themes.
In order to get your Instagram feed back up and running, you will need to update to the newest version of your theme!
Generating an Access Token
As of June 1st, 2016, Instagram now requires the use of an Instagram Access Token. We have added support for this new Instagram token in Parallax 2.4, Responsive 5.1, Mobilia 4.3, and Retina 3.2. To display an Instagram feed on your home page, you can generate an Instagram Access Token here »
If you have an older version of one of our themes, the Instagram API has been updated and the feed may no longer be displaying. To resolve this issue, you could either generate a custom Instagram widget for your home page or upgrade to the latest version of your theme.
If you choose not to upgrade and would rather add a custom Instagram widget, you could take a look through the Shopify App Store.
Why aren't my Instagram images all squares anymore?
In recent versions of our themes: Turbo 2.1.5+, Parallax 3.3.1+, Retina 4.2.2+, Mobilia 5.2.1+, Responsive 6.2.1+ an Instagram feed fix has been added to display square images. For information on updating your theme click here.
Previously, Instagram feed images would appear in squares no matter what size the original image was posted in.
However, Instagram has phased out support for cropping images to squares.
This means that Instagram feeds will now display images in squares, portrait and landscape images — whatever the original image was uploaded as.
While our themes will attempt to maintain the grid layout for your Instagram feed, sometimes it is not possible to due to the size and orientation of the images posted to your Instagram feed.
Please note this also affects video clips that are not a consistent size.
At this time, the best solution to this is to always post images in the same size and orientation, such as all square.
We have discovered that, in some cases, these fixes may work. However, please note that these may not work in all cases. If you find one does not work for you, simply remove it from your styles file.
If none of these fixes work, you may need to resort to posting images of consistent sizes.
A possible fix is to add this code to the end of styles.scss.liquid.
#instafeed {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
If you find this does not work, you can try this instead:
@media only screen and (min-width: 769px){
#instafeed img, #instafeed video {
display: inline;
object-fit: cover;
height: 20vw;
width: 100%;
margin-bottom: 0;
}
}
You may need to adjust the "20vw" value above. In some cases, "15w" may work instead.
Unfortunately, the above two solutions may not work in very old versions of Internet Explorer. In that case, you may need to try this code.
Please note, however, that this code is more advanced and requires specific fine tuning, so we recommend using the above solutions instead.
#instafeed .columns { height: 500px !important; line-height: 500px !important; }
#instafeed .columns img, #instafeed .columns video { vertical-align: middle !important; }
@media only screen and (max-width: 767px) {
#instafeed .columns { height: auto !important; line-height: 100% !important; }
#instafeed .columns img, #instafeed .columns video { vertical-align: top !important; }
}
@media only screen and (min-width: 960px) {
#instafeed .columns { height: 400px !important; line-height: 400px !important; }
#instafeed .columns img, #instafeed .columns video { vertical-align: middle !important; }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
#instafeed .columns { height: 300px !important; line-height: 300px !important; }
#instafeed .columns img, #instafeed .columns video { vertical-align: middle !important; }
}
For this to work, you need to adjust the two bold values in each line to be the same value as the other on that line.
In general, the values should get lower as you go down the code.
The values used should be equal to the tallest image you anticipate being displayed. The exact value you need to use will vary based the exact images being shown and the number of images showing, so you may need to experiment a bit. You may also find that, if you post an image later that is significantly different in size than your others, you may need to readjust this code.
You may also find that, if you post an image later that is significantly different in size than your others, you may need to readjust this code.
The code with the values of 400px and 300px above are used for smaller screens and tablets. To preview how these affect your layout, try making your browser window narrower (in Turbo, you may need to refresh the page after resizing your window).
Please note that on mobile devices, images become stacked so the multi-column grid layout does not get applied.
Why aren't my Instagram slideshow posts showing up?
Is your storefront features an Instagram feed and you've created slideshow posts via the Instagram app on your mobile device, you will notice those posts do not appear in your feed and, in some cases, may result in an "empty space" appearing in your Instagram feed.
Slideshow posts are a feature that allows a single Instagram post to have multiple images.
At this time, Instagram does not support including slideshow posts in the feeds provided to third party apps, including our Instagram feeds.
If you are seeing a blank space in your Instagram feed, please be sure you are using the most recent version of our theme by following these upgrade steps or using our Theme Updater app.
In the most recent versions of our themes, the Instagram feed will "skip" any slideshow posts while still showing the correct number of total images or videos you've indicated in your theme settings.
Unfortunately, at this time, there is no way to include slideshow posts in your feed. To ensure all of your posts appear in your Shopify store's feed, you'll need to avoid using the slideshow feature.
If you use slideshow posts heavily, however, a good workaround is to post a single image version of your slideshow. You could either use the first or most eye-catching image from your slideshow or use a photo collage app to create a "tiled" mosaic version that combines all of the images in the slideshow into a single image.