Desktop vs Mobile picture sizes

Minnesotan
New Member
6 0 0

Hey guys,

When i use a slideshow, the pictures dimensions fit fine in the desktop view, but for mobile they are cut off the left and right sides. I have tried re sizing the pictures to being smaller but shopify just re sizes them bigger and makes them blurry and still cuts them off on the mobile view. Is there a specific dimension to be used?

Thanks in advance!

0 Likes
Alexa4
Shopify Staff
Shopify Staff
93 1 13

Hi there!

This is Alexa from the Shopify team.

The recommended size for your slideshow image will vary depending on your theme, however the most common recommended size is 1280 x 460px.

Currently most themes use hero slideshows meaning it automatically resizes your slideshow images to fit any screen that is being used to view your site. It does this while maintaining the aspect ratio of your image.

I'd recommend trying the 1280 x 460px size for your images in your slideshow, as well as these suggestions:

  • Don't use slides that have text in them, because there is the risk of having that text clipped on mobile phones.
  • The main centre of interest of the slide must be in the center, so that the most interesting part is shown on mobile phones.

I hope you found this helpful!

Best regards,

Alex | Customer Success Guru | Shopify

Alex | Customer Success Guru | Shopify
melissandjosh
New Member
1 0 2

Hello, 

 

Is there a magic ratio that will work well on both desktop and mobile? 

 

I realise that square ratios 1:1 looks really great on shopify when its on a mobile phone 
But the on the desktop the pictures look really bad. 

 

Hope to get help soon. 

 

Thank you

Andrew

LaurenceArabia
Tourist
10 0 6

Your answer is not very useful because the whole point of having a slide show is to advertise, so of course we need to account for text.

Finally knowing this and serving millions of customers, shopify does not have a clear path for resolution for this issue and in my opinion that is a really bad thing

 

0 Likes
FilipposD
Excursionist
29 1 7

Basically this is a decision each theme's developers need to make. If an image slider has to be fullscreen, by definition it's impossible to be displayed on desktop and mobile in the same way.

So the solutions are:

  1. Crop the images on mobile (left and right)
  2. Mess up the aspect ratio (never a good idea)
  3. Reduce the height of the slider to be non-fullscreen on mobile

Ideally, sliders should be avoided and any text should be in HTML instead of photoshopped in the images.

0 Likes
LaurenceArabia
Tourist
10 0 6

Basically this is a decision each theme's developers need to make. LD   shopify isnt a platform for developers.

If an image slider has to be fullscreen, by definition it's impossible to be displayed on desktop and mobile in the same way.

LD That is an issue

So the solutions are:

  1. Crop the images on mobile (left and right)
  2. Mess up the aspect ratio (never a good idea)
  3. Reduce the height of the slider to be non-fullscreen on mobile

Ideally, sliders should be avoided and any text should be in HTML instead of photoshopped in the images. 

LD This Could be a way, but doesnt help if you are creating content daily. Have you heard about responsive and adaptive design? That might be the way.

0 Likes
 
 
0 Likes
FilipposD
Excursionist
29 1 7

Shopify is not a platform developers, it's for merchants. In reality, Shopify has no sliders. When you opened the store, you chose a theme. And then you chose to add a slider section to your page. This theme and slider were developed by web developers, and they made choices to create something that fits as many cases as possible, not only a few. In fact, there are many different sliders and they almost always are popular libraries that you'll find used in thousands (if not millions) of sites outside of Shopify.

So daily content or not, developers expect the user of the theme to follow proper practices.

Responsive is a term used for design that adapts to screens and devices. If you have to scroll horizontally, then you don't have a responsive slider.

In any case, there are always solutions. But there are also limitations, and the way sliders work is limited by simple geometry (that's why the only possibilities are the 3 I mentioned - and #3 should be used for your case).

 

0 Likes