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, however the collection’s image takes up half that space. 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 1000px in width (ideally more) so that it can cover the needs of the largest of desktop monitors and resolutions.

Blog posts

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

Collection lists, Banners, Featured banners 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 1420px in width is recommended for one column layouts if available.
• Grid & Slider: A minimum of 740px in width is generally recommended regardless of layout.

Note that the Featured banners section supports a large image as the background. This image should have at least 1580px in width for optimal appearance.

Newsletter and Countdown sections

For optimal appearance images of at least 1000px in width should be used in these 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 (ideally more), while the mobile image recommendation still remains at 750px.