Image size recommendations

This guide provides recommendations for image sizes across the theme and its sections for optimal appearance.

Always have in mind: As a general rule that the theme is designed to display all images in their optimal size for any given viewport width and pixel density (desktop, tablet, mobile); you don’t have to worry about cropping or resizing images.

Logo

You can choose the logo size (width) from its settings. You’ll notice that there’s a “custom width” setting in the Header section under the logo where you can set what the width of the logo should be. We recommend you upload an image twice the size of that width, i.e. if you choose 150px, the image you should upload as your logo should be 300px. This is to make sure that your logo continues to render crisp on screens with high pixel density.

Product images

Arguably the most important part of your shop is how you display products. The theme displays product images in various locations:

• Main product listing (collections), in different sizes depending on the layout (3, 4 columns, etc).
• Main product page (which includes thumbnails, main images, and full size zoomed-in images).
• Product blocks (such as featured collection, etc).
• Mini cart drawer.
• Cart page.
• Product recommendations.

The product images are cropped by the theme in the dimensions that each location requires, the recommendation is that they should be as large and as crisp as possible (something around 1920px in width would be optimal) so that when enlarged in the media viewer your shoppers can view every last detail.

Collections template

The collection template features a hero section with minimum dimensions of 1420x180px. The height of the section adapts based on the content (i.e. the collection’s title and description), so you might need to provide a taller image depending on the length of the description, however the width should be at minimum 1420px.

Blog posts

For the blog post featured image a minimum width of 850px is recommended. This size will also cover the blog posts section.

Collection list & Banner sections

These two blocks share layout so their image requirements are identical. They feature three different layouts (Grid, Slider, and Mosaic) with varying image requirements:

• All layouts: A minimum of 1420px in width is recommended for one column layouts.
• Grid & Slider: A minimum of 650px in width is generally recommended regardless of layout (except for one column).
• Mosaic: A minimum of 800px in width will cover all the mosaic layouts.

Brands & Simple collection list section

For optimal appearance images of at least 650px in width should be used in the Brands and Simple collection list sections.

Slideshow section

The blocks of the Slideshow section have two image options (desktop and an optional mobile fallback).

The recommended minimum width for the desktop image is 1420px. The recommended minimum width for the optional mobile image is 750px.

If you make the Slideshow section full width from its respective setting then the desktop image should be at least 1920px in width, while the mobile image recommendation still remains at 750px.

Promotion blocks section

The Promotion blocks section is special in that the images uploaded on each promotion block do not cover the entire block’s area. The size of the image uploaded can be anything and the image will adapt, however it’s highly recommended that any image used has a transparent background for optimal visual appearance.