We are Underground support

Instagram feed images not showing due to API change

Today, January 12, 2018, the Shopify community woke up to an issue with all Instagram Feed images not showing.
This is due to an Instagram API change, for instructions on how to fix this please view these instructions

Making images the same size

Last Updated: Apr 24, 2017 02:53PM EDT
So you have your new Shopify store with your new theme but your images are all different sizes.
This results in product titles being thrown out of alignment!

This is a common issue.... In the long term and in the effort to give your customers the best possible shopping experience ideally you should look to correct the image sizes... Sometimes this takes money which you might not have.

In the short term there is a solution that will save you time, money and stress.

We can use a maximum height on images shown on collection pages ( multiple products ) to help keep them aligned, this is how:
  1. In your Shopify admin click on Themes > customise theme > edit HTML / CSS
  2. On the next page open: Assets > stylesheet.css.liquid
  3. Scroll to the bottom of the page and add this:

.product-index img { max-height: 320px; } 
4. Click save

Refresh the collection page view of your store to see what is going on with the alignment.
You may wish to return to the code that you just pasted in to increase or decrease this number until you start to see good alignment across the site.

What about Tablet and Mobile?

As you are limiting the size on these images here you are not quite out of the woods.
On a tablet display your product images will resize and you may encounter more issues with these... The same goes for mobile so a number of further alterations are needed.

At the bottom of stylesheet.css.liquid you have just placed this:

.product-index img { max-height: 320px; } 
Add this beneath it:

/* Target all Tablets */
@media screen and (min-width: 760px) and ( max-width:1024px ) {
.product-index img { max-height: 280px; } 

/* Target all Mobiles */
@media screen and ( max-width:760px ) {
.product-index img { max-height: 280px; } 

Click save when done.
Again you may want to test and tweak those numbers depending on how the products are showing on different devices.

Get help

Want to customize your theme?
Have questions not covered in our docs?
  • Ask a theme support question
  • Support Hours:
    9:30 - 17:30 EST
    Monday - Friday

seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found