Image size guidelines

This guide covers recommended image sizes for the Zest theme to help your store display correctly across all devices. Since Zest supports flexible aspect ratios per section, preparing images to match those settings will give you the best results.

---

#Recommended image sizes by sections

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

#1. Banner logo

Recommended image sizes:

#2. Before/after image slider

Image height options:

#3. Collage tabs

Recommended image sizes:

• Adapt to image: Keeps the original image ratio (Recommended size: 1174 x 929 px)
• Square (1:1): 1000 × 1000 px
• Portrait (3:4): 900 × 1200 px
• Landscape (4:3): 1200 × 900 px

#4. Gallery images

Recommended image size:

• Adapt to image: Keeps the original image ratio (may look inconsistent)
• Square (1:1) (Recommended): 900 × 900 px
• Portrait (3:4): 900 × 1200 px
• Landscape (4:3): 1200 × 900 px

#5. Image with text overlay

Recommended image sizes:

• Desktop image:

• Mobile image:

Banner height options:

How it works:

• Adapt to image: The section height is determined by the image’s aspect ratio. This helps preserve proportions and reduces unexpected 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.

#6. Image with text slider

Recommended image sizes:

• Desktop image: 1340 × 1340 px

• Mobile image: 1074 × 900 px

Image height options:

How it works:

• Adapt to first image: Preserving the original proportions of your first image slide. All other slides will follow the same aspect ratio as the first image.
• Small / Medium / Large: Applying fixed heights, so images may be cropped depending on their ratio.

#7. Layered images

Recommended image sizes:

• Adapt to first image: Keeps the original image ratio (may look inconsistent) (Recommended size: 862 x 929 px)
• Square (1:1): 900 × 900 px
• Portrait (3:4): 900 × 1200 px
• Landscape (4:3): 1200 × 900 px

#8. Multicolumn

Recommended image size: 827 × 827 px

Image width options:

How it works:

• Preset sizes (Extra small / Small / Medium / Large / Extra large) provide quick styling options for different design needs
• Custom image width allows precise control when you need specific sizing
• Full width of column is ideal for creating a more immersive, visual layou

#9. Slideshow

Recommended image sizes:

• Desktop image: 1920 × 900 px or 2880 × 1200 px

• Mobile image: 600 × 480 px or 780 × 1200 px

Slide height options:

How it works:

• Adapt to first image: Preserving the original proportions of your first image slide. All other slides will follow the same aspect ratio as the first image.
• Small / Medium / Large: Applying fixed heights, so images may be cropped depending on their ratio.

#10. Collection banner

Recommended image sizes:

• Desktop image:

  • 2680 × 480 px (for image position: Top, Bottom, or Use image as background)
  
  • 1240 × 480 px (for image position: Left or Right)
  

• Mobile image: 1080 × 540 px

Banner height options:

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.

#11. Collection list

Recommended image sizes:

• Adapt to image: Keeps the original image ratio (may look inconsistent)
• Square (1:1) (Recommended): 800 × 800 px
• Portrait (3:4): 800 × 1067 px
• Landscape (4:3): 1067 × 800 px

#12. Collection list slider

Recommended image sizes (Large image):

• Adapt to first image: Keeps the original image ratio (Recommended size: 880 x 929 px)
• Square (1:1): 900 × 900 px
• Portrait (3:4): 900 × 1200 px
• Landscape (4:3): 1200 × 900 px

#13. Collection tabs

Recommended image sizes:

• Adapt to first image: Keeps the original image ratio
• Square (1:1) (Recommended): 1240 × 1240 px
• Portrait (3:4): 1240 × 1653 px
• Landscape (4:3): 1653 × 1240 px

#14. Collections showcase

Recommended image sizes:

• Adapt to image: Keeps the original image ratio (Recommended size: 900 × 1184 px)
• Square (1:1): 1000 × 1000 px
• Portrait (3:4): 900 × 1200 px
• Landscape (4:3): 1200 × 900 px

#15. 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 the Blog posts section > Article card > 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 width and Featured image height settings in the blog post template (Blog post section > Featured image block).

Featured image height options:

#16. 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 Zest theme, such as Featured Collection, Favorite Collection, Product Recommendations, Product Tabs, Handpicked Products 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: Images are displayed in their original aspect ratio, without cropping or forcing them into a fixed shape.
• Square (1:1)
• Portrait (3:4)
• Landscape (4:3)

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 Zest theme, we recommend the following image sizes:

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

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 aspect ratios: Different aspect ratios in a single 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.