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, 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 that is fullwidth. 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 1920px in width (ideally 2048px) so that it can cover the largest of desktop monitors.

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, Featured collections sections

These blocks share layout so their image requirements are the same. They all feature two different layouts (Grid, Slider) with varying image requirements:

• All layouts: A minimum of 1540px in width is recommended for one column layouts and the “Row” layout of the Banner section.
• Grid & Slider: A minimum of 740px in width is generally recommended regardless of layout (except for one column).

Brands, Simple collection list, Tabbed collection lists sections

For optimal appearance images of at least 650px in width should be used in these sections.

Slideshow and Call to action sections

The blocks of the “Slideshow” section and the “Call to action” section itself have two image options (desktop and an optional mobile fallback).

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

If you make the Slideshow or Call to action sections full width from their respective setting, then the desktop image should be at least 1920px in width, while the mobile image recommendation still remains at 750px.