Read this first!
It is important to keep a number of things in mind when using images. When you take the following into account, you make optimal use of your images
1) Make sure there is no text in your image. This prevents your text from being cut off and your image from becoming less beautiful. The banners in our themes include options to add text.
2) Make sure the object is centered in the image or stick to the specified dimensions of the image. Trying to use a square image in a banner that is rectangular will cut off a lot of your image. If you stick to the dimensions (i.e. square or rectangular) of the images as we have described them below, your image will always come out beautifully.
In the example below, an original image that is rectangular and used in a square banner.
Logo
Department v3 has 2 logo settings. Namely squareand rectangle. You also have the choice to choose an SVG image or a PNG image.
We recommend choosing an SVG (Scalable Vector Graphic). This works better on mobile and is much sharper than, for example, a PNG image. Ask your designer to provide an SVG logo. If you have Adobe Illustrator at your disposal, read this article on how to make an SVG logo. If you really can’t figure it out, please contact us.
Size doesn’t matter for SVG logos . As long as the dimensions are rectangular. So for example 200×60 pixels. Or square, for example 300×300 pixels. The advantage of SVG images is that they always scale well and remain sharp.
Desktop PNG logo:
For PNG logos you use 400×120 pixels when you choose a rectangular logo. Or 300×300 pixels if you opt for a square logo.
Mobile PNG logos:
For rectangular logos, use 280×120 pixels. If you choose a square logo, use 300×300 pixels as the size.
Banners in banner block
The following images refer to the banners in the banner block.
The banner images in Department v3 can be set in 2 ways.
Normal image: Use an image of 250×250 pixels.
Background image : Use an image of 430×270 pixels.
Banners in hero block
The following images refer to the banners in the hero block.
You can also choose to display the image as a normal image or as a background image for the banners in this block. Depending on how many banners you want to display in this block, the dimensions are as follows:
Basically you can use any size for these images. The theme will always scale the image to the available space. However, some clipping may occur. So your images can be cropped to fit. Usually that goes well, if it is not completely to your liking, use the dimensions below.
normal image:
- 3 Banners: Maximum image size is 200×160 pixels.
- 2 Banners: Maximum image size is 200×250 pixels.
- 1 Banner: Maximum image size is 200×500 pixels.
Background image:
- 3 Banners: Maximum image size is 430×160 pixels.
- 2 Banners: Maximum image size is 430×250 pixels.
- 1 Banner: Maximum image size is 430×500 pixels.
Popular and Newest products banner
You can also choose to display the image as a normal image or as a background image for the banners in this block.
The height of this image depends on the height of the product tiles on the right. However, a good size is 540×500 pixels . If your product tiles are a bit lower, make the banner a bit less high.
Spotlight
You can set the spotlight image in 2 ways. Both have a different size. You can also upload a different image per device.
Fullwidth
- Mobile : 428×370 pixels
- Tablet : 810×370 pixels
- Desktop : 2500×560 pixels
normal:
- Mobile : 428×370 pixels
- Tablet : 810×370 pixels
- Desktop : 600×500 pixels
Other
The correct dimensions for the other images:
- Customer service image: 180×340 pixels
- Store image: 300×280 pixels
- Category images:
- With space around it: 120×120 pixels
- Without space around it: 240×120 pixels
- Burn images: 120×100 pixels