Image size guidelines

We know how important it is for your store to look polished and consistent. This guide provides recommended image sizes and best practices tailored specifically for the Sleek theme, based on its layout system, section settings, and responsive behavior.

Sleek relies heavily on aspect ratio settings and height controls, so image preparation should align with those options.

#Recommended image sizes for different sections & blocks

On the Sleek theme, we recommend you apply the particular image sizes to different sections as follows:

#1. Image with texts

Recommended image sizes:

• Desktop image: 1058 × 1058px

• Adapt to image: Preserving the original proportions of your first image block. All other tabs will follow the same aspect ratio as the first image block.
• Fixed height options: Selecting a predefined height (e.g., Small, Medium, Large) ensures consistent section height but may crop images depending on their original ratio.

#2. Slideshow

Recommended image sizes:

• Desktop image: 1920 x 900px
• Mobile image: 600 x 480px

Image height options:

How it works:

• Adapt to image: The height of the before/after images will automatically adjust based on the aspect ratio of the first image block.
• Fixed height options: Using fixed height options (Small, Medium, Large), images may be cropped depending on their original proportions.

#3. Before/after image slider

Recommended image sizes:

• Desktop image: 2340 × 1200px
• Mobile image: 686 × 562px

Image height options:

How it works:

• Adapt to image: The height of the before/after images will automatically adjust based on the aspect ratio of the first image block.
• Fixed height options: Using fixed height options (Small, Medium, Large), images may be cropped depending on their original proportions.

#4. Card images

Recommended image sizes:

• Desktop image: 2110 × 1140px
• Mobile image: 515 × 900px

Recommended image sizes:

• Square (1:1) (Recommended): 1000 × 1000px
• Portrait (3:4): 1000 × 1333px
• Landscape (4:3): 1333 × 1000px
• Adapt to image: keeps original ratio (may look inconsistent)

#5. Collage tabs / Favorite products / Collections slider / Image gallery / Lookbook cards / Lookbook slider / Media with collection

Recommended image sizes:

• Square (1:1) (Recommended): 1000 × 1000px
• Portrait (3:4): 1000 × 1333px
• Landscape (4:3): 1333 × 1000px
• Adapt to image: keeps original ratio (may look inconsistent)

#6. Highlight text with image

Recommended image sizes: 603 × 329px

#7. Image with text overlay

Recommended image sizes:

• Desktop image: 3360 × 1500px
• Mobile image: 750 × 1200px

Image height options:

How it works:

• Adapt to image: The height of the before/after images will automatically adjust based on the aspect ratio of the first image block.
• Fixed height options: Using fixed height options (Small, Medium, Large), images may be cropped depending on their original proportions.

#8. Testimonials - Layout 1

Recommended image sizes: 800 × 600px

#9. Testimonials - Layout 2

Recommended image sizes: 540 × 720px

#10. Blog post featured image

On your website, the blog post featured image is displayed in two places:

• Post’s thumbnail image (Blog listing page):

Displayed in blog cards. The appearance depends on Theme settings > Blog cards > Image ratio.

• Post’s featured image banner (Blog post page):

Displayed as the main image at the top of the article. This is controlled by the Image height setting in the blog post template.

#11. Collection banner

Recommended image sizes:

• Desktop image:

  • 2820 × 600px (for image position: Top, Bottom, or Use image as background)
  
  • 1410 × 600px (for image position: Left or Right)
  

• Mobile image: 686 × 400px

How it works:

• Adapt to image: The section height is determined by the image’s aspect ratio, preserving its original proportions and minimizing cropping.
• Fixed height options: Selecting a predefined height (e.g., Small, Medium, Large) ensures consistent section height but may crop images depending on their original ratio.

#12. Featured products tab

Recommended image sizes:

• Adapt to image: keeps original ratio (Recommended size: 900 x 1200px)
• Square (1:1): 1000 × 1000px
• Portrait (3:4): 1000 × 1333px
• Landscape (4:3): 1333 × 1000px

#13. Scrolling promotion

Recommended image sizes:

• Image: 160 × 160px

• Collection: 840 × 1120px

#14. Multicolumn

Recommended image sizes:

• Image: 300 × 164px

• Image(Full width of column): 840 × 840px

#15. Product images

From the Products tab in your Shopify admin, you can easily add new products along with their images. These products will automatically appear across product-related sections in your Sleek theme, such as Featured Collection, Featured product, Products showcase, Product Bundles, and Recently Viewed Products...

Within Theme settings or individual section settings, you can also control how product images are displayed. Available image ratio options include:

• Adapt to image
• Square
• Portrait
• Landscape

These settings allow you to present your product images in the format that best fits your store’s design.

For optimal display quality on the Sleek theme, we recommend the following image sizes:

• Square (1:1): at least 2000 x 2000px
• Portrait (3:4): at least 2000 × 2667px
• Landscape (4:3): at least 2400 x 1800px

These are general recommendations to ensure your images look sharp and consistent across all sections.

#Best practices

To ensure a clean, consistent, and professional storefront, we recommend following these guidelines:

• Maintain consistency: Use the same image dimensions and aspect ratio within each section for a uniform layout.
• “Adapt to first image”: When enabled, the first image defines the layout ratio. Ensure it has the correct proportions.
• Prepare images properly: Design images based on the selected ratio settings to avoid unexpected cropping.
• Desktop & mobile images: Upload separate versions when possible for better control across screen sizes.
• High-resolution images: Use images at approximately 2× the recommended size for sharp display on high-density screens.
• Avoid mixing ratios: Different aspect ratios in one section can create uneven layouts.
• Safe viewing area: Keep key content (text, focal points) centered to prevent cropping.
• Slides & galleries: Keep image sizes and ratios consistent for visual balance.