Skip to main content

Image sizes in Ceres

This chapter lists the recommended image sizes for category and item images for Ceres online stores. All images displayed on the homepage of the store are currently integrated via ShopBuilder widgets.
In order to ensure scalability of images on many different end devices and for various screen sizes, the image sizes are variable and adapt in height to the corresponding screen sizes. Therefore, the number of pixels in the width column is described as a margin, within which the height of the image is set to the described number of pixels. Therefore, a category image with a width of 500px has a height of 350px.

Images are always centered. Depending on the particular screen size, it is possible that images are cut off on the left or the right side.

1. Optimal sizes for category and item images

Tabelle 1. Image sizes for categories
Screen width Height

larger than 0px

300px

larger than 544px

350px

larger than 768px

400px

Tabelle 2. Image sizes for items
Screen width Height

larger than 0px

300px

larger than 494px

500px

larger than 534px

600px

larger than 655px

700px

2. Ideal image sizes for the ShopBuilder

There are 4 different aspect ratios for images in the Image box and Image carousel widgets. These ratios are dependent on whether the widget is integrated as a standalone or in a grid with 2, 3 or 4 columns as well as which layout setting is selected for the grid.

For image widgets that are integrated without a grid or in a 2 column grid with the layout setting 50%:50%, the ideal image aspect ratio of width to height is 3:1. If you change the layout settings, the aspect ratio changes to 2:1 (for 66.6% elements) and 1:1 (for 33.3% elements).

For image widgets in a 3 column grid with the layout setting 30%:30%:30%, the ideal image aspect ratio of width to height is 1.5:1. Depending on the layout settings, the aspect ratio changes according to the table below.

For image widgets in a 4 column grid, the ideal image aspect ratio of width to height is 1:1. The layout for this type of grid cannot be changed.

Tabelle 3. Ideal image sizes for ShopBuilder widgets
Number of grid columns Layout setting (%) Aspect ratio Example size

No grid

-

3:1

1200x400px

2

50%

3:1

1200x400px

2

66.6%

2:1

1200x600px

2

33.3%

1:1

1200x1200px

3

33.3%

1.5:1

1200x800px

3

50%

2:1

1200x600px

3

25%

1:1

1200x1200px

3

66.6% (stacked)

1.5:1

1200x800px

3

33.3% (stacked)

1.5:1

1200x800px

4

-

1:1

1200x1200px

To top