What are the recommended image sizes for the Slider section?

The recommended width for the images is at least 1920px to cover all screen sizes. 

There are six options for the height:

  • Full screen height (100% height)
  • Image height
  • 750px
  • 650px
  • 550px
  • 450px

The trick to making the images look good is to assume that the content will be cropped on the top and bottom to fit all screen sizes. The essential visual elements should be in the center. Here is a good example: 

This slider uses the full-screen option for the images. Notice that the subject or the key in the image is the smiley girl. So, when it comes to the mobile, where the images are cropped from both sides (left and right), the girl is still in the center smiling!

With your images, it's tricky to have them fit in the center of the screen. The Palo Alto theme uses background images so the image can span the vertical height of the screen.

Image position

Also, the Palo Alto theme comes up with an extremely helpful tool which you will find inside each slide block and called "Image position". With this tool, you will be able to eliminate cropping further as it allows you to place the image in 5 different places (Top, Right, Left, Center, Bottom) inside the slide. In this way, you can try the different options according to your image's subject until you find the ideal style for your page!

As long as you understand how the images fit in multiple devices/screens you will be able to make awesome designs and very appealing shops!