# 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:

{% columns %}
{% column %}
[#id-1.-banner-logo](#id-1.-banner-logo "mention")

[#id-2.-before-after-image-slider](#id-2.-before-after-image-slider "mention")

[#id-3.-collage-tabs](#id-3.-collage-tabs "mention")

[#id-4.-gallery-images](#id-4.-gallery-images "mention")

[#id-5.-image-with-text-overlay](#id-5.-image-with-text-overlay "mention")

[#id-6.-image-with-text-slider](#id-6.-image-with-text-slider "mention")

[#id-7.-layered-images](#id-7.-layered-images "mention")

[#id-8.-multicolumn](#id-8.-multicolumn "mention")
{% endcolumn %}

{% column %}
[#id-9.-slideshow](#id-9.-slideshow "mention")

[#id-10.-collection-banner](#id-10.-collection-banner "mention")

[#id-11.-collection-list](#id-11.-collection-list "mention")

[#id-12.-collection-list-slider](#id-12.-collection-list-slider "mention")

[#id-13.-collection-tabs](#id-13.-collection-tabs "mention")

[#id-14.-collections-showcase](#id-14.-collections-showcase "mention")

[#id-15.-blog-post-featured-image](#id-15.-blog-post-featured-image "mention")

[#id-16.-product-images](#id-16.-product-images "mention")
{% endcolumn %}
{% endcolumns %}

### 1. Banner logo

**Recommended image sizes:**

{% tabs %}
{% tab title="First Tab" %}
3840 × 2000 px

<figure><img src="/files/8AnuA1YvwB7sFun3n9f4" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile image" %}
1170 × 2082 px

<figure><img src="/files/kcvQY7QvlbyoeSieadal" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="info" %}

* Using separate desktop and mobile images is strongly recommended to ensure optimal composition on different screen sizes.
* This section supports flexible image sizes and automatically adapts to the original image ratio.
  {% endhint %}

### 2. Before/after image slider

<figure><img src="/files/gHO5BvNzbH53xmbDkj3w" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Using separate desktop and mobile images is strongly recommended to ensure optimal composition on different screen sizes.
{% endhint %}

Image height options:

<table><thead><tr><th>Option</th><th width="183">Desktop height</th><th>Mobile height</th><th>Behavior</th></tr></thead><tbody><tr><td>Adapt to image</td><td>Auto</td><td>Auto</td><td>Height adapts to the first image ratio</td></tr><tr><td>Small</td><td>420px</td><td>290px</td><td>Cropped to fixed height</td></tr><tr><td>Medium</td><td>560px</td><td>360px</td><td>Cropped to fixed height</td></tr><tr><td>Large</td><td>720px</td><td>420px</td><td>Cropped to fixed height</td></tr></tbody></table>

{% hint style="success" %}
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.
  {% endhint %}

### 3. Collage tabs

<figure><img src="/files/qaghkK2nqqis1C6M2nLV" alt=""><figcaption></figcaption></figure>

**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

{% hint style="info" %}
When **Adapt to image** is enabled, image sizes will automatically adjust based on the original image proportions, which may lead to uneven layouts.
{% endhint %}

### 4. Gallery images

<figure><img src="/files/SRm167wr6nOsygmHltnu" alt=""><figcaption></figcaption></figure>

**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

{% hint style="info" %}
When **Adapt to image** is enabled, image sizes will automatically adjust based on the original image proportions, which may lead to uneven layouts.
{% endhint %}

### 5. Image with text overlay

**Recommended image sizes:**

* Desktop image:&#x20;

{% tabs %}
{% tab title="2880 × 1200 px" %}

<figure><img src="/files/xNttrg2yll2TZirdLvx8" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="2880 × 1300 px" %}

<figure><img src="/files/mTrrbaR8S5eXtLiq0DW6" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* Mobile image:&#x20;

{% tabs %}
{% tab title="780 × 1200 px" %}

<figure><img src="/files/U7ns8Uvp68FUSii1HcFM" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="748 × 1000 px" %}

<figure><img src="/files/lWDPtbQP8lK7MIh52XZX" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="info" %}

* Using separate desktop and mobile images is strongly recommended to ensure optimal composition on different screen sizes.
* For best results, use an image with a **2:3** aspect ratio. [Learn more](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)
  {% endhint %}

Banner height options:

| Option         | Desktop height | Mobile height | Behavior                                                    |
| -------------- | -------------- | ------------- | ----------------------------------------------------------- |
| Adapt to image | Auto           | Auto          | Follows the image’s original aspect ratio (no fixed height) |
| Small          | 420px          | 290px         | Cropped to fixed height                                     |
| Medium         | 560px          | 360px         | Cropped to fixed height                                     |
| Large          | 720px          | 420px         | Cropped to fixed height                                     |

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

<figure><img src="/files/XWRUKvLu7Vxw2IdfWhpK" alt=""><figcaption></figcaption></figure>

* Mobile image: 1074 × 900 px

<figure><img src="/files/BLgZCRwBjDz66B41lG0M" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Using separate desktop and mobile images is strongly recommended to ensure optimal composition on different screen sizes.
{% endhint %}

Image height options:

<table><thead><tr><th>Option</th><th width="183">Desktop height</th><th>Mobile height</th><th>Behavior</th></tr></thead><tbody><tr><td>Adapt to image</td><td>Auto</td><td>Auto</td><td>Height adapts to the first image ratio</td></tr><tr><td>Small</td><td>420px</td><td>280px</td><td>Cropped to fixed height</td></tr><tr><td>Medium</td><td>560px</td><td>340px</td><td>Cropped to fixed height</td></tr><tr><td>Large</td><td>720px</td><td>420px</td><td>Cropped to fixed height</td></tr></tbody></table>

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

<figure><img src="/files/a1lOmZ0gJyL22eeVL0TX" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
When **Adapt to image** is enabled, image sizes will automatically adjust to the original image proportions, which may result in uneven layouts.
{% endhint %}

### 8. Multicolumn

<figure><img src="/files/VUWtzYLKvKQoraDOJfUs" alt=""><figcaption></figcaption></figure>

**Recommended image size:** 827 × 827 px

{% hint style="info" %}
Using **square** images helps maintain a clean and consistent layout across all columns.
{% endhint %}

Image width options:

| Option               | Value               | Behavior                                                        |
| -------------------- | ------------------- | --------------------------------------------------------------- |
| Custom image width   | 20px - 200px        | Sets a fixed image width for precise control within each column |
| Extra small          | 28px                | Displays a very small image size within the column              |
| Small                | 44px                | Displays a compact image size within the column                 |
| Medium               | 60px                | Displays a balanced, default image size                         |
| Large                | 72px                | Displays a larger image for more visual emphasis                |
| Extra large          | 84px                | Displays the largest preset image size within the column        |
| Full width of column | 100% (column width) | Image fills the entire column width                             |

{% hint style="info" %}
All image width options do not affect the image's original aspect ratio. Images are scaled proportionally and will **not be cropped**.
{% endhint %}

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

<figure><img src="/files/nyIPLeFg4zgUHV5O2FI9" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/X6PYZvT7yyTCRXJKnK07" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
We strongly recommend uploading **separate images for desktop and mobile**. If the same image is used, it will be **center-cropped on mobile**, potentially cutting off important details.
{% endhint %}

Slide height options:

<table><thead><tr><th>Option</th><th width="183">Desktop height</th><th>Mobile height</th><th>Behavior</th></tr></thead><tbody><tr><td>Adapt to first image</td><td>Auto</td><td>Auto</td><td>Height adapts to the first image ratio</td></tr><tr><td>Small</td><td>420px</td><td>280px</td><td>Cropped to fixed height</td></tr><tr><td>Medium</td><td>560px</td><td>340px</td><td>Cropped to fixed height</td></tr><tr><td>Large</td><td>720px</td><td>420px</td><td>Cropped to fixed height</td></tr></tbody></table>

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)

  <figure><img src="/files/baLBLt4RcTqmtkVKJmlK" alt=""><figcaption></figcaption></figure>

  * 1240 × 480 px (for image position: Left or Right)

  <figure><img src="/files/znrs10cq6Or1CJJNpBpc" alt=""><figcaption></figcaption></figure>
* Mobile image: 1080 × 540 px&#x20;

<figure><img src="/files/iIt48Ohg1S2uURL4Pzbp" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Use images with the correct dimensions based on the selected image position.
{% endhint %}

Banner height options:

<table><thead><tr><th>Option</th><th width="183">Desktop height</th><th>Mobile height</th><th>Behavior</th></tr></thead><tbody><tr><td>Adapt to image</td><td>Auto</td><td>Auto</td><td>Follows the image’s original aspect ratio (no fixed height)</td></tr><tr><td>Small</td><td>248px</td><td>180px</td><td>Cropped to fixed height</td></tr><tr><td>Medium</td><td>320px</td><td>240px</td><td>Cropped to fixed height</td></tr><tr><td>Large</td><td>360px</td><td>320px</td><td>Cropped to fixed height</td></tr></tbody></table>

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

<figure><img src="/files/2P9lTdWXGTGVw0U90U0j" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
When **Adapt to image** is enabled, image sizes will automatically adjust based on the original image proportions, which may lead to uneven layouts.
{% endhint %}

### 12. Collection list slider

<figure><img src="/files/8jpAxJABaCvWmeMHYArn" alt=""><figcaption></figcaption></figure>

**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

{% hint style="info" %}
When **Adapt to image** is selected, the image ratio of all collection large images will follow the ratio of the **first collection block's large image**.
{% endhint %}

### 13. Collection tabs

<figure><img src="/files/0qPjtCruMFQVZ1NTOddp" alt=""><figcaption></figcaption></figure>

**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

{% hint style="info" %}
When **Adapt to first image** is selected, the image ratio of all collection images will follow the ratio of the **first collection block's image**.
{% endhint %}

### 14. Collections showcase

<figure><img src="/files/b8F9BsVRsBMWuXqOOzuV" alt=""><figcaption></figcaption></figure>

**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

{% hint style="info" %}
When **Adapt to image** is selected, the image ratio of all collection images will follow the ratio of the **first collection block's image**.
{% endhint %}

### 15. Blog post featured image

{% hint style="success" %}
To set the blog post featured image, go to **Online Store > Blog posts** in your Shopify admin. Then open the post and locate the **Featured image** field on the right-hand side to upload your image.
{% endhint %}

<figure><img src="/files/AE42bwfQGEmu3DQlWNuc" alt=""><figcaption></figcaption></figure>

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**.

<figure><img src="/files/GIoREosnihSEDkbUAZyQ" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
You can choose images with **square, portrait, or landscape ratios** to achieve the best visual result.

The recommended sizes are:

* **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

* You can also use **Adapt to image** to preserve the original image ratio.
  {% endhint %}

* **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**).

<figure><img src="/files/T7m83Ov6Al9yPigJGI3k" alt=""><figcaption></figcaption></figure>

Featured image height options:

<table><thead><tr><th>Option</th><th width="183">Desktop height</th><th>Mobile height</th><th>Behavior</th></tr></thead><tbody><tr><td>Adapt to image</td><td>Auto</td><td>Auto</td><td>Follows the image’s original aspect ratio (no fixed height)</td></tr><tr><td>Small</td><td>270px</td><td>110px</td><td>Cropped to fixed height</td></tr><tr><td>Medium</td><td>550px</td><td>220px</td><td>Cropped to fixed height</td></tr><tr><td>Large</td><td>750px</td><td>220px</td><td>Cropped to fixed height</td></tr></tbody></table>

{% hint style="info" %}
For best results, use an image with a **16:9** aspect ratio. [Learn more](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)
{% endhint %}

### 16. Product images

From the **Products** tab in your Shopify admin, you can easily add new products along with their images.&#x20;

<figure><img src="/files/FnaGXczECYWqaQKNt5fz" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/vpefp0QwzcBrKon398f6" alt=""><figcaption></figcaption></figure>

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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/zest-theme/faqs/generic/image-size-guidelines.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.