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

{% columns fullWidth="false" %}
{% column %}
[#id-1.-image-with-texts](#id-1.-image-with-texts "mention")

[#id-2.-slideshow](#id-2.-slideshow "mention")

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

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

[#id-5.-collage-tabs-favorite-products-collections-slider-image-gallery-lookbook-cards-lookbook-slider-me](#id-5.-collage-tabs-favorite-products-collections-slider-image-gallery-lookbook-cards-lookbook-slider-me "mention")

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

​​​[#id-7.-image-with-text-overlay](#id-7.-image-with-text-overlay "mention")
{% endcolumn %}

{% column %}
[#id-8.-testimonials-layout-1](#id-8.-testimonials-layout-1 "mention")

[#id-9.-testimonials-layout-2](#id-9.-testimonials-layout-2 "mention")

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

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

[#id-12.-featured-products-tab](#id-12.-featured-products-tab "mention")

[#id-13.-scrolling-promotion](#id-13.-scrolling-promotion "mention")

[#id-14.-multicolumn](#id-14.-multicolumn "mention")

[#id-15.-product-images](#id-15.-product-images "mention")

{% endcolumn %}
{% endcolumns %}

### 1. Image with texts

**Recommended image sizes:**

* Desktop image: 1058 × 1058px

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FwhJVvHiK0V3jy1eyoqN7%2Fimage.png?alt=media&#x26;token=dd9dec1c-62fc-4605-bf4f-fdd3643ec8e4" alt=""><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="175"></th><th width="160"></th><th width="165"></th><th></th></tr></thead><tbody><tr><td>Option</td><td>Desktop height</td><td>Mobile height</td><td>Behavior</td></tr><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>450px</td><td>337.5px</td><td>Cropped to fixed height</td></tr><tr><td>Extra small</td><td>300px</td><td>225px</td><td>Cropped to fixed height</td></tr><tr><td>Medium</td><td>550px</td><td>412.5px</td><td>Cropped to fixed height</td></tr><tr><td>Extra medium</td><td>650px</td><td>487.5px</td><td>Cropped to fixed height</td></tr><tr><td>Large</td><td>800px</td><td>600px</td><td>Cropped to fixed height</td></tr></tbody></table>

{% hint style="info" %}
The image height should match the content of the text block. You can use different image ratios, such as landscape orientation, and enable the **Adapt to image** height option to ensure the image is fully displayed.
{% endhint %}

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

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Ffp9L2fMjrPqrkZR3nrpI%2Fimage.png?alt=media&#x26;token=3a153364-b6ec-4b15-8d9b-447d2cbff17d" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FbikAAHpAM4doL9Qqk3PZ%2Fimage.png?alt=media&#x26;token=b047c098-fba2-422d-a931-6e7304095e89" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% 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**, which may cut off important details.
{% endhint %}

**Image height options:**

| <p><br>Option</p>    | Desktop height | Mobile height | Behavior                               |
| -------------------- | -------------- | ------------- | -------------------------------------- |
| Adapt to first image | Auto           | Auto          | Height adapts to the first image ratio |
| Small                | 540px          | 280px         | Cropped to fixed height                |
| Medium               | 620px          | 340px         | Cropped to fixed height                |
| Large                | 720px          | 420px         | Cropped to fixed height                |

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

{% 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 image**.\
\
We recommend using consistent sizing across all cards to achieve the best visual appearance.
{% endhint %}

### 3. Before/after image slider

**Recommended image sizes:**

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

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FTuLgBxdZ08kaNLxdoVrV%2Fimage.png?alt=media&#x26;token=8ad04563-b67e-4f15-8728-4711065edb87" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F4yF5sSLR99pzdTvvDGUl%2Fimage.png?alt=media&#x26;token=15140131-1942-47d6-8bef-25edb28aae80" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% 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**, which may cut off important details.
{% endhint %}

Image height options:

<table><thead><tr><th width="173">Size</th><th width="160">Desktop height</th><th width="167">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 aspect ratio of first image block</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>

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&#x20;

**Recommended image sizes:**

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

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F7G4MDBaW3SIrXAsbIV7U%2Fimage.png?alt=media&#x26;token=69512a33-9a65-43c3-866b-3380b173b5eb" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FHl8D0LbtRIpO1G7qP1FV%2Fimage.png?alt=media&#x26;token=e9e20c8f-e1f2-4a7b-ba0c-2c2928230775" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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)

{% 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. \
\
We recommend using consistent sizing across all cards to achieve the best visual appearance.
{% endhint %}

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Fx25mLeZEABNSED7yjxGJ%2Fimage.png?alt=media&#x26;token=ba49b6e1-6520-4d7c-9860-adfd633f8b4b" alt=""><figcaption></figcaption></figure>

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)

{% hint style="info" %}
In this section, you can only choose the image ratio for images. We recommend using consistent sizing across all cards to achieve the best visual appearance.
{% endhint %}

### 6. Highlight text with image

**Recommended image sizes:** 603 × 329px

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F89ip1nhWyDd9K3B4LKsD%2Fimage.png?alt=media&#x26;token=5251cca3-0ca5-4b0c-a96e-9ba0f0a91244" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Setting the width is straightforward. You just need to choose an appropriate width to ensure it looks balanced and aligns well with the surrounding text.
{% endhint %}

### 7. Image with text overlay

**Recommended image sizes:**

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

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Fgjks2uvbefb1hkHA5BJF%2Fimage.png?alt=media&#x26;token=380b87fa-ceb7-4bdf-89af-fb84afddd4a8" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FLd7x0FD7CpxdM9sgIBaE%2Fimage.png?alt=media&#x26;token=642729e2-1208-4675-9deb-27cf90f9d6e4" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

Image height options:

<table><thead><tr><th width="173">Size</th><th width="160">Desktop height</th><th width="167">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 aspect ratio of first image block</td></tr><tr><td>Small</td><td>400px</td><td>300px</td><td>Cropped to fixed height</td></tr><tr><td>Extra small</td><td>350px</td><td></td><td>Cropped to fixed height</td></tr><tr><td>Medium</td><td>550px</td><td>400px</td><td>Cropped to fixed height</td></tr><tr><td>Extra medium</td><td>650px</td><td></td><td>Cropped to fixed height</td></tr><tr><td>Large</td><td>700px</td><td>500px</td><td>Cropped to fixed height</td></tr><tr><td>Extra large</td><td>750px</td><td>600px</td><td>Cropped to fixed height</td></tr></tbody></table>

{% 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**, which may cut off important details.
{% endhint %}

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Fr8SdIORFVqkfy58nxgbF%2Fimage.png?alt=media&#x26;token=162ab6e2-8971-49f6-9cc4-ed08b521763a" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
We recommend setting all images across slides to the same dimensions. This ensures a consistent display and delivers the highest-quality visual presentation.
{% endhint %}

### 9. Testimonials - Layout 2&#x20;

**Recommended image sizes:** 540 × 720px

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FPIucgDe8NK5Rrnxku7AZ%2Fimage.png?alt=media&#x26;token=64e96600-2e01-46dd-b82d-74dbeb7d5c06" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
We recommend setting all images across slides to the same dimensions. This ensures a consistent display and delivers the highest-quality visual presentation.
{% endhint %}

### 10. 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="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F88MWTIZ6pejuvCUbYcSN%2Fimage.png?alt=media&#x26;token=8c4f3f2a-4d6e-446b-9031-f76729998a49" alt=""><figcaption></figcaption></figure>

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

* **Post’s thumbnail image (Blog listing page):**&#x20;

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FUNoTi7LLB8QpgE3Nwu2w%2Fimage.png?alt=media&#x26;token=27f6cd69-d1b3-4b31-9c15-a54de5553ee0" 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 2000px

* **Portrait (3:4)**: at least 2000 × 2667px

* **Landscape (4:3)**: at least 2400 x 1800px

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

* **Post’s featured image banner (Blog post page):**&#x20;

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FlKRJbz0M1BwP3EYgdkZS%2Fimage.png?alt=media&#x26;token=79aa1cb0-b235-4b42-8990-3bc8adc31425" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="173">Size</th><th width="160">Desktop height</th><th width="167">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 aspect ratio of first image block</td></tr><tr><td>Small</td><td>450px</td><td>337.5px</td><td>Cropped to fixed height</td></tr><tr><td>Extra small</td><td>300px</td><td>225px</td><td>Cropped to fixed height</td></tr><tr><td>Medium</td><td>550px</td><td>400px</td><td>Cropped to fixed height</td></tr><tr><td>Extra medium</td><td>650px</td><td>487.5px</td><td>Cropped to fixed height</td></tr><tr><td>Large</td><td>800px</td><td>600px</td><td>Cropped to fixed height</td></tr></tbody></table>

### 11. **Collection banner**

**Recommended image sizes:**

* Desktop image:

  * 2820 × 600px (for image position: Top, Bottom, or Use image as background)

  <figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FGxHH59zuPiFIogNFd3zu%2Fimage.png?alt=media&#x26;token=22a132ce-b0f5-4d22-998c-7bc0c4c60456" alt=""><figcaption></figcaption></figure>

  * 1410 × 600px (for image position: Left or Right)

  <figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F5qYenklmVLULVtjhZLQc%2Fimage.png?alt=media&#x26;token=4f1fb2a9-413d-42d3-bda8-276e913d5bbd" alt=""><figcaption></figcaption></figure>
* Mobile image: 686 × 400px

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F1Y8KQvtXm4zt1JzOXoWL%2Fimage.png?alt=media&#x26;token=a82524b4-df8e-4831-809a-686aa5270d47" alt=""><figcaption></figcaption></figure>

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

{% tabs %}
{% tab title="Desktop height options" %}

| Option         | Height | Behavior                                                    |
| -------------- | ------ | ----------------------------------------------------------- |
| Adapt to image | Auto   | Follows the image’s original aspect ratio (no fixed height) |
| Extra small    | 300px  | Cropped to fixed height                                     |
| Small          | 450px  | Cropped to fixed height                                     |
| Medium         | 550px  | Cropped to fixed height                                     |
| Extra medium   | 650px  | Cropped to fixed height                                     |
| Large          | 800px  | Cropped to fixed height                                     |
| {% endtab %}   |        |                                                             |

{% tab title="Mobile height options" %}

<table><thead><tr><th width="249">Option</th><th valign="middle">Height</th><th></th></tr></thead><tbody><tr><td>Auto</td><td valign="middle">Extra small: 220 px<br>Small: 337.5 px<br>Medium: 412.5 px<br>Extra medium: 487.5 px<br>Large: 600 px</td><td>Inherits the desktop height setting (including ratio or fixed height)</td></tr><tr><td>Adapt to image</td><td valign="middle">Auto</td><td>Uses the mobile image’s own aspect ratio (independent from desktop)</td></tr></tbody></table>
{% endtab %}
{% endtabs %}

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FY5qofrFFhxJvQZAaBSO1%2Fimage.png?alt=media&#x26;token=a2d0e4f0-1bcd-4909-9f4d-11654ae123dc" 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.

We recommend using consistent sizing across all cards to achieve the best visual appearance.
{% endhint %}

### 13. **Scrolling promotion**

**Recommended image sizes:**&#x20;

* **Image**: 160 × 160px

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FB5tPrABK2aVaHWnVljsO%2Fimage.png?alt=media&#x26;token=32b204c6-592f-4e64-b068-eee3e20eda70" alt=""><figcaption></figcaption></figure>

* **Collection**: 840 × 1120px

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F4icdb1qugEbJcyPqKMLH%2Fimage.png?alt=media&#x26;token=f733aa1a-06c9-4955-bf0d-d5be3e503bb8" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
When **Custom width** is enabled, adjust desktop and mobile widths to keep images balanced and responsive. Use consistent aspect ratios across images to avoid uneven layouts.
{% endhint %}

### 14. **Multicolumn**

**Recommended image sizes:**&#x20;

* **Image**: 300 × 164px

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FMIgL5UwrAritQuKGi8aB%2Fimage.png?alt=media&#x26;token=3e5a0d04-b3f2-4cd7-81e1-e9923d504824" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FL13jFKy0coF0whmUX3yU%2Fimage.png?alt=media&#x26;token=53eb707c-b5ab-4a35-ade5-c7fc80f95e00" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="173">Size</th><th width="160">Desktop width</th><th width="167">Mobile width</th><th>Behavior</th></tr></thead><tbody><tr><td>Full width of column</td><td>Auto</td><td>Auto</td><td>Filled to fix the width of the column</td></tr><tr><td>Small</td><td>40px</td><td>40px</td><td>Cropped to fixed width</td></tr><tr><td>Medium</td><td>56px</td><td>40px</td><td>Cropped to fixed width</td></tr><tr><td>Large</td><td>72px</td><td>48px</td><td>Cropped to fixed width</td></tr><tr><td>Extra Large</td><td>150px</td><td>120px</td><td>Cropped to fixed width</td></tr></tbody></table>

{% hint style="info" %}
When **Image width** is set, choose a consistent size (Small–Full width) across blocks to keep alignment clean. Use similar image ratios to maintain a balanced layout.
{% endhint %}

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F2W5f3yl9cAteSHQkpjY8%2Fimage.png?alt=media&#x26;token=2b812590-0bbc-476e-a359-58b42a15b91c" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Fr2XOP8dmZYKCa0ZuDXvz%2Fimage.png?alt=media&#x26;token=b4c12e73-7e6f-4282-916e-3f7aecd51a6c" alt=""><figcaption></figcaption></figure>

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.


---

# 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/sleek-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.