Each place an image can go in Checkmate has a width that keeps the image sharp and a shape that keeps it from being cut badly. Use these sizes when you prepare photos for your store. If a photo looks soft or cut off, compare it with this page first.
Each width is the largest file the theme loads for that place. A larger image looks the same, and a smaller one can look soft on high-resolution screens, such as phones and most laptops. A few places load the whole file you upload. For those, the width is twice the largest size the image shows on the page, which is what a high-resolution screen needs.
Where the shape is fixed, the theme cuts the image to fit. Most places keep the focal point you set on the image in the Shopify admin, and the center when there is none. Product cards always keep the center, so keep the product near the middle of its photo.
Backgrounds and large photos
Place
Width
Shape
Background image in any section's Background group, and in the Hero
3840 px
Any. The photo fills the section, and its edges are cut to fit. On a computer, a full screen Hero is as large as the screen below the header.
Mobile image in the Hero
1600 px
Any. It replaces the main image on screens narrower than 768 px.
Background image in the Hotspots section
3840 px
Set by Image ratio: Natural keeps the photo's own shape, Landscape is 16:9, Square is 1:1, Portrait is 4:5. With Product card beside image, the photo is cut to the height of the product card next to it.
Collection image, when Show collection image is on in the Collection section
3000 px
A wide band behind the collection title, 320 to 480 px tall, so much of the top and bottom is cut.
Image in the Password section
2000 px
Any. It fills half the screen on a computer.
Image block
1728 px with Text column, 3840 px with Page width or Full width
The photo's own shape.
Products and collections
Place
Width
Shape
Product photos, on the product page and in the Featured product section
1800 px
Set by Image ratio in the Media block or the Featured product section: Square (1:1) by default, Portrait (4:5), Landscape (16:9), or Natural, which keeps each photo's shape.
Product cards
1200 px, taken from the product photos
Cut from the center to Image ratio in Product card settings: Portrait (4:5) by default, Tall (3:4), Square (1:1) or Landscape (4:3). With Image fit set to Show whole image, nothing is cut.
Collection cards with the Circle shape
600 × 600 px
Square, shown as a circle.
Collection cards with the Tile shape
1200 px
Set by Image ratio in Collection card settings: Portrait (4:5), Square (1:1) or Landscape (16:9).
Collection cards in a mega menu with Collection cards
1200 px
4:5
Image in a mega menu's promo card
900 × 1125 px
4:5
A collection card uses the collection's image from your Shopify admin. A collection with no image shows its first product's photo.
Section images
Place
Width
Shape
Blog post image in the Blog posts section
1200 px
Set by Image ratio: Landscape (16:9) by default, Square or Portrait (4:5). With the List style, posts show as rows with a 3:2 image. With Compact list, a small square.
Blog post image at the top of the post
1600 px
Set by Image ratio in the Article section: Natural by default, Landscape (16:9), Square or Portrait (4:5).
Images in the Orbit section
640 × 640 px
Square, shown as a circle.
Images in the Photo wall section
800 × 1000 px
4:5
Profile photo in the Photo wall section
184 × 184 px
Square, shown as a circle.
Images in the Subscription section
400 × 400 px
Square, shown as a circle.
Images in the Stacking cards section
800 × 800 px
Square, shown as a circle.
Images in the Timeline section
1400 × 875 px
16:10
Images in the Comparison section
2400 px
Set by Image ratio: Landscape (16:9) by default, Square or Portrait (4:5).
Card images in the Highlights section
960 px
Set by Image ratio: Portrait (3:4) by default, or Square.
Logo and favicon
Place
Size
Shape
Logo image
At least three times your Logo height in height. An image 144 px tall stays sharp at the largest Logo height, 48 px.
Any. A wide logo shows wider at the same height.
Favicon
32 × 32 px
Square. The theme shows it at 32 × 32 px, so a larger image gains nothing.
Places that look slightly soft on sharp screens
In these places, the theme loads a smaller file than a high-resolution screen needs where the photo shows largest. The photo looks a little soft there on those screens, and a larger upload does not change it. The sizes below are for a computer with Page width set to M, as all three theme styles have it.
Product cards in the Photo and grid layout of the Featured collection section, after a customer clicks a color dot. A card there is up to about 360 px wide, so a high-resolution screen needs about 720 px, and the photo for the picked color loads at 600 px.
The collection image. It spans the screen, so a screen 1920 px wide at high resolution needs 3840 px, and the theme loads 3000 px.
The blog post image at the top of the post. It is as wide as the page, up to 1520 px, so a high-resolution screen needs about 3040 px, and the theme loads 1600 px.
Blog post images in the Blog posts section, for the large post of the Featured post and list and Featured post and grid styles and for posts in the List style. These show more than 600 px wide, and the theme loads 1200 px.
Photo wall images with 2 or 3 Columns. Each photo shows up to 665 px wide with 2 columns and 443 px with 3, and the theme loads 800 px.
Each place an image can go in Checkmate has a width that keeps the image sharp and a shape that keeps it from being cut badly. Use these sizes when you prepare photos for your store. If a photo looks soft or cut off, compare it with this page first.
Each width is the largest file the theme loads for that place. A larger image looks the same, and a smaller one can look soft on high-resolution screens, such as phones and most laptops. A few places load the whole file you upload. For those, the width is twice the largest size the image shows on the page, which is what a high-resolution screen needs.
Where the shape is fixed, the theme cuts the image to fit. Most places keep the focal point you set on the image in the Shopify admin, and the center when there is none. Product cards always keep the center, so keep the product near the middle of its photo.
Backgrounds and large photos
Place
Width
Shape
Background image in any section's Background group, and in the Hero
3840 px
Any. The photo fills the section, and its edges are cut to fit. On a computer, a full screen Hero is as large as the screen below the header.
Mobile image in the Hero
1600 px
Any. It replaces the main image on screens narrower than 768 px.
Background image in the Hotspots section
3840 px
Set by Image ratio: Natural keeps the photo's own shape, Landscape is 16:9, Square is 1:1, Portrait is 4:5. With Product card beside image, the photo is cut to the height of the product card next to it.
Collection image, when Show collection image is on in the Collection section
3000 px
A wide band behind the collection title, 320 to 480 px tall, so much of the top and bottom is cut.
Image in the Password section
2000 px
Any. It fills half the screen on a computer.
Image block
1728 px with Text column, 3840 px with Page width or Full width
The photo's own shape.
Products and collections
Place
Width
Shape
Product photos, on the product page and in the Featured product section
1800 px
Set by Image ratio in the Media block or the Featured product section: Square (1:1) by default, Portrait (4:5), Landscape (16:9), or Natural, which keeps each photo's shape.
Product cards
1200 px, taken from the product photos
Cut from the center to Image ratio in Product card settings: Portrait (4:5) by default, Tall (3:4), Square (1:1) or Landscape (4:3). With Image fit set to Show whole image, nothing is cut.
Collection cards with the Circle shape
600 × 600 px
Square, shown as a circle.
Collection cards with the Tile shape
1200 px
Set by Image ratio in Collection card settings: Portrait (4:5), Square (1:1) or Landscape (16:9).
Collection cards in a mega menu with Collection cards
1200 px
4:5
Image in a mega menu's promo card
900 × 1125 px
4:5
A collection card uses the collection's image from your Shopify admin. A collection with no image shows its first product's photo.
Section images
Place
Width
Shape
Blog post image in the Blog posts section
1200 px
Set by Image ratio: Landscape (16:9) by default, Square or Portrait (4:5). With the List style, posts show as rows with a 3:2 image. With Compact list, a small square.
Blog post image at the top of the post
1600 px
Set by Image ratio in the Article section: Natural by default, Landscape (16:9), Square or Portrait (4:5).
Images in the Orbit section
640 × 640 px
Square, shown as a circle.
Images in the Photo wall section
800 × 1000 px
4:5
Profile photo in the Photo wall section
184 × 184 px
Square, shown as a circle.
Images in the Subscription section
400 × 400 px
Square, shown as a circle.
Images in the Stacking cards section
800 × 800 px
Square, shown as a circle.
Images in the Timeline section
1400 × 875 px
16:10
Images in the Comparison section
2400 px
Set by Image ratio: Landscape (16:9) by default, Square or Portrait (4:5).
Card images in the Highlights section
960 px
Set by Image ratio: Portrait (3:4) by default, or Square.
Logo and favicon
Place
Size
Shape
Logo image
At least three times your Logo height in height. An image 144 px tall stays sharp at the largest Logo height, 48 px.
Any. A wide logo shows wider at the same height.
Favicon
32 × 32 px
Square. The theme shows it at 32 × 32 px, so a larger image gains nothing.
Places that look slightly soft on sharp screens
In these places, the theme loads a smaller file than a high-resolution screen needs where the photo shows largest. The photo looks a little soft there on those screens, and a larger upload does not change it. The sizes below are for a computer with Page width set to M, as all three theme styles have it.
Product cards in the Photo and grid layout of the Featured collection section, after a customer clicks a color dot. A card there is up to about 360 px wide, so a high-resolution screen needs about 720 px, and the photo for the picked color loads at 600 px.
The collection image. It spans the screen, so a screen 1920 px wide at high resolution needs 3840 px, and the theme loads 3000 px.
The blog post image at the top of the post. It is as wide as the page, up to 1520 px, so a high-resolution screen needs about 3040 px, and the theme loads 1600 px.
Blog post images in the Blog posts section, for the large post of the Featured post and list and Featured post and grid styles and for posts in the List style. These show more than 600 px wide, and the theme loads 1200 px.
Photo wall images with 2 or 3 Columns. Each photo shows up to 665 px wide with 2 columns and 443 px with 3, and the theme loads 800 px.
If an image still looks blurry or cut off, see My images look blurry or cropped.