We are Underground support

Making images the same size

Last Updated: Aug 25, 2016 09:04PM EDT

Looking to access your theme's code or language options with Shopify's new theme editor layout?

In your Shopify admin click on Online store > Themes
Next to the theme that you want to edit click on the Menu button which is a small square with 3 blue dots
This will open a submenu of options which includes: Edit HTMl / CSS and Edit Language

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

Note We can not offer individual theme modifications, however are happy to advise on the best Shopify resources and finding developers to work on your theme.
Want to customize your theme?
Have questions not covered in our docs?
retail@undergroundmedia.co.uk
http://assets1.desk.com/
false
undergrndmedia
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete