6. Fashionopolism Theme: Understanding Image Sizes and Ratios

Fashionopolism is well adapted to a diverse range of image sizes, each store may vary but as a guide, the following image sizes will render good results for most users. In this article, we will go through the different images throughout the theme with suggested sizes/ratios.

Slideshow

Our themes let you create a slideshow of images on your homepage. You can set the rotation frequency, and provide text over the slideshow image that links to a page in your store. Slideshow images should always be landscape orientation (wider than they are tall). The height of the slideshow on your site is completely dictated by the height of the tallest image you use. 

To avoid the extra white space below an image you must make all your slideshow images the same ratio (or size).

If you set your Slideshow to enable full-width, then use images that are 1920px wide.

If the Slideshow is not set to full-width than use images that are 1200px wide.

We suggest the following resolutions…

Full-width - 1920px x 900px   Not Full-width - 1200px x 800px 

Image Gallery

The size of images used for the image gallery depends on the setup that you are using, there are numerous options within the theme, here are some suggested sizes. 

  • If you are showing images in identical blocks in a grid 3 or 4 per row we recommend working with 600px wide x any height (keep each image the same size).
  • If you are showing just one image at full-screen we recommend that you use 1920px wide image to ensure you have a high-quality image. The height of this section will depend on the height of the image that you use.

If you are looking for a more advanced configuration as shown on our Secret Sale demo follow the directions below…

For this example, we show 4 images within one Image Gallery section.

  • Image 1 = 33% width  (Image used is: 438px wide x 583px tall)
  • Image 2 = 33% width (Image used is: 438px wide x 291px tall)
  • Image 3 = 33% width (Image used is: 438px wide x 291px tall)
  • Image 4 = 66% width (Image used is 904px wide x 272px tall)

Experimenting is the best way to choose the layout. If you are looking for a quick method to creating images for your shop and want to test some resolutions we recommend using https://unsplash.it/

Shopify also includes a powerful library of free images at your disposal which can be found under the select an image by clicking the Explore Free Images button

Product Images

To ensure a high quality of product images across the site and to ensure that the zoom function on your product pages can display at a satisfactory level we suggest using the following sizes for product images…

We highly recommend keeping your image sizes uniform, as the page scales up or down for different devices being used in order to keep the same aspect ratio and appear the same size consistently through out your site we recommend the following sizes.

  • 650px x 1000px (for horizontal images)
  • 1000px x 650px (for vertical images)
  • 1000px x 1000px (for square images)

Banner Images

Banner images are designed to span the full width of the user's browser window. We suggest using a 1920px wide x 400 or 500px tall for the banner images.

Text Columns With Images

For the Text Column with images, to get the best quality out of these image

  • 1 image - 1600 x 900px (W x H)
  • 2 images - 900px x 600px (W x H)
  • 3 images or more - 600px x 400px (W x H)

Cropping Images:

If you need help cropping your images check out our tutorial here.