# Image size guidelines

We understand how important it is for your store to maintain a polished and consistent appearance. This guide outlines recommended image sizes and best practices tailored specifically for the Pebble theme, taking into account its layout system, section configurations, and responsive behavior.

As Pebble relies heavily on aspect ratio settings and height controls, it’s essential to prepare your images in alignment with these parameters to ensure optimal display across all devices.

## Recommended image sizes for different sections & blocks

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

{% columns %}
{% column %}
[#id-1.-slideshow-minimal-slideshow-centered](#id-1.-slideshow-minimal-slideshow-centered "mention")

[#id-2.-hero-banner-hero-banner-with-marquee](#id-2.-hero-banner-hero-banner-with-marquee "mention")

[#id-3.-image-cards-carousel](#id-3.-image-cards-carousel "mention")

[#id-4.-collection-links](#id-4.-collection-links "mention")

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

[#id-6.-shop-the-look](#id-6.-shop-the-look "mention")

[#id-7.-scrolling-cards-scrolling-cards-layered](#id-7.-scrolling-cards-scrolling-cards-layered "mention")
{% endcolumn %}

{% column %}
[#id-8.-countdown-timer](#id-8.-countdown-timer "mention")

[#id-9.-faq-image-faq-banner](#id-9.-faq-image-faq-banner "mention")

[#id-10.-store-locators](#id-10.-store-locators "mention")

[#id-11.-comparison-galerry](#id-11.-comparison-galerry "mention")

[#id-12.-video-cards-flex-carousel](#id-12.-video-cards-flex-carousel "mention")

[#id-13.-testimonial-parallax](#id-13.-testimonial-parallax "mention")

[#id-14.-comparison-table](#id-14.-comparison-table "mention")

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

### 1. Slideshow: Minimal / Slideshow: Centered

For these sections, the Pebble theme provides flexible height options and supports separate images for desktop and mobile to ensure the best visual presentation across devices.

#### Recommended image sizes:

* **Desktop image:** 1920 × 900 px or 2680 × 1120 px

{% tabs %}
{% tab title="Slideshow: Minimal" %}

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

{% tab title="Slideshow: Centered" %}

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

* **Mobile image:** 600 × 480 px or 686 × 940 px

{% tabs %}
{% tab title="Slideshow: Minimal" %}

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

{% tab title="Slideshow: Centered" %}

<figure><img src="/files/pQt5yfjSRW7o8b3AjAra" 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 %}

#### Slide height options:

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

| Option               | Desktop height | Mobile height | Behavior                               |
| -------------------- | -------------- | ------------- | -------------------------------------- |
| Adapt to first image | Auto           | Auto          | Height adapts to the first image ratio |
| Small                | 570px          | 420px         | Cropped to fixed height                |
| Medium               | 660px          | 520px         | Cropped to fixed height                |
| Large                | 750px          | 620px         | Cropped to fixed height                |

### 2. Hero banner / Hero banner: With marquee

**Recommended image sizes:**

* **Desktop image:** 2680 × 1060 px

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

* **Mobile image:** 600 × 848 px

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

{% hint style="info" %}
We recommend uploading **separate images for desktop and mobile** to ensure the best composition and **avoid unwanted cropping** on smaller screens.
{% endhint %}

Image height options:

| Option               | Desktop height | Mobile height | Behavior                               |
| -------------------- | -------------- | ------------- | -------------------------------------- |
| Adapt to first image | Auto           | Auto          | Height adapts to the first image ratio |
| Small                | 350px          | 300px         | Cropped to fixed height                |
| Medium               | 450px          | 340px         | Cropped to fixed height                |
| Large                | 520px          | 480px         | Cropped to fixed height                |

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

### 3. Image cards: Carousel

**Recommended image sizes:**

* **Auto:** keeps original ratio (Recommended size: 1020 × 1369 px)
* **Square (1/1):** 1200 × 1200 px
* **Portrait (4/5):** 1200 × 1500 px
* **Portrait (3/4):** 1200 x 1600 px
* **Landscape (16/9):** 1600 × 900 px
* **Landscape (4/3):** 1600 × 1200 px
* **Landscape (21/9):** 1600 × 686 px

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

{% hint style="info" %}
When **Auto** 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 %}

### 4. Collection links

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

**Recommended image sizes:**

* **Square (1/1):** 1200 × 1200 px
* **Portrait (4/5):** 1200 × 1500 px
* **Portrait (3/4):** 1200 x 1600 px
* **Landscape (16/9):** 1600 × 900 px
* **Landscape (4/3):** 1600 × 1200 px

{% hint style="info" %}
The image ratio in this section is set to **adapt to the first slide item’s image**. This means all other slides will follow the same aspect ratio as the first image.
{% endhint %}

### 5. 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/12dqn9xZVONlgejHs4kM" 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 **Theme settings > Blog cards >Aspect ratio**.

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

* **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 ratio** setting in the blog post template.

<figure><img src="/files/D6tW2GguEfuZZYhJKNIa" 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 (4/5):** at least 2400 × 3000 px
* **Portrait (3/4)**: at least 2000 × 2667 px
* **Landscape (16/9):** at least 2400 × 1800 px
* **Landscape (4/3)**: at least 2400 x 1800 px
* You can also use **Adapt to image** to preserve the original image ratio.
  {% endhint %}

### 6. Shop the look

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

**Recommended image sizes:**

{% tabs %}
{% tab title="Banner block" %}

* **Auto:** keeps original ratio (Recommended size: 2000 x 2000 px)
* **Square (1/1):** 2000 x 2000 px
* **Portrait (4/5):** 1800 × 2250 px
* **Portrait (3/4):** 1800 × 2400 px
* **Landscape (16/9):** 1920 × 1080 px
* **Landscape (4/3):** 1600 × 1200 px
* **Landscape (21/9):** 1920 × 823 px
  {% endtab %}

{% tab title="Image block" %}

* **Auto:** keeps original ratio (Recommended size: 1710 × 1980 px)
* **Square (1/1):** 1500 × 1500 px
* **Portrait (4/5):** 1800 × 2250 px
* **Portrait (3/4):** 1800 × 2400 px
* **Landscape (16/9):** 1920 × 1080 px
* **Landscape (4/3):** 2048 × 1536 px
* **Landscape (21/9):** 2560 × 1080 px
  {% endtab %}
  {% endtabs %}

{% hint style="info" %}
When **Auto** 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 %}

### 7. Scrolling cards / Scrolling cards: Layered

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

**Recommended image sizes:**

* **Auto:** keeps original ratio (Recommended size: 1560 × 1920 px)
* **Square (1/1):** 1500 x 1500 px
* **Portrait (4/5):** 1500 × 1875 px
* **Portrait (3/4):** 1536 × 2048 px
* **Landscape (16/9):** 1920 × 1080 px
* **Landscape (4/3):** 2048 × 1536 px
* **Landscape (21/9):** 1920 × 823 px

{% hint style="info" %}
When **Auto** 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 %}

### 8. Countdown timer

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

* Desktop image: 940 × 1300 px or 940 x 665 px
* Mobile image: 1000 x 1000 px

<figure><img src="/files/4oe1H3fmqw6udW5CSnY9" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
This section supports flexible image sizes and automatically adapts to the original image ratio.
{% endhint %}

### 9. FAQ: Image / FAQ: Banner

**Recommended image sizes:**

* **Desktop image:**

{% tabs %}
{% tab title="1280 × 2048 px" %}

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

{% tab title="1440 × 1416 px" %}

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

* **Mobile image:**&#x20;

{% tabs %}
{% tab title="1372 × 1372 px" %}

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

{% tab title="1125 x 860 px" %}

<figure><img src="/files/eEbt0hxCYbQ8z39sissb" 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 %}

### 10. Store locators

**Recommended image sizes:**

* **Auto:** keeps original ratio (Recommended size: 800 x 1000 px)
* **Square (1/1):** 1500 x 1500 px
* **Portrait (4/5):** 1500 × 1875 px
* **Portrait (3/4):** 1536 × 2048 px
* **Landscape (16/9):** 1920 × 1080 px
* **Landscape (4/3):** 2048 × 1536 px
* **Landscape (21/9):** 1920 × 823 px

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

{% hint style="info" %}
When **Auto** 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 %}

### 11. Comparison galerry

<figure><img src="/files/ERO3pTCp76O7m9eVk8la" 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 %}

**Recommended image sizes:**

* **Auto:** keeps original ratio (Recommended size: 1600 × 1380 px)
* **Square (1/1):** 1500 x 1500 px
* **Portrait (4/5):** 1500 × 1875 px
* **Portrait (3/4):** 1536 × 2048 px
* **Landscape (16/9):** 1920 × 1080 px
* **Landscape (4/3):** 2048 × 1536 px
* **Landscape (21/9):** 1920 × 823 px

{% hint style="info" %}
When **Auto** is enabled, the height of the before/after images will automatically adjust based on the aspect ratio of the first image block.\
\
We recommend using consistent sizing across all cards to achieve the best visual appearance.
{% endhint %}

### 12. Video cards: Flex carousel

<figure><img src="/files/3Ol4svXzj2gi4uc87IcT" alt=""><figcaption></figcaption></figure>

**Recommended image sizes:**

* **Cover image:**&#x20;
  * **Auto:** keeps original ratio (Recommended size: 880 × 1180 px)
  * **Square (1/1):** 1200 × 1200 px
  * **Portrait (4/5):** 1200 × 1500 px
  * **Portrait (3/4):** 1200 x 1600 px
  * **Landscape (16/9):** 1600 × 900 px
  * **Landscape (4/3):** 1600 × 1200 px
  * **Landscape (21/9):** 1920 × 823 px
* **Information image:** 500 x 500px

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

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

### 13. Testimonial: Parallax

**Recommended image sizes:** 1000 x 1000 px

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

{% hint style="info" %}
This section supports flexible image sizes and automatically adapts to the original image ratio.
{% endhint %}

### 14. Comparison table

**Recommended image sizes:**

* **Desktop image:** 2880 × 1380 px

<figure><img src="/files/1yAQSANxKS8tiUO4ckjw" alt=""><figcaption></figcaption></figure>

* **Mobile image:** 750 × 1675 px

<figure><img src="/files/4kwrgX2PiipsyRuyFEO2" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
This section supports flexible image sizes and automatically adapts to the original image ratio.
{% 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 Pebble theme, such as *Featured Collection, Multiple Product Bundles, Favorite Products, Product Bundles, Bundle Selection,* and *Recently Viewed Products.*

<figure><img src="/files/RtmR0hhTC6evF7YpNwit" 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:

* **Inherit**
* **Auto**
* **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="/files/7yq9WnuuHNYKC0sNJbqG" alt=""><figcaption></figcaption></figure>

For optimal display quality on the Pebble 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 <a href="#best-practices" id="best-practices"></a>

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/pebble-theme/faqs/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.