> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# Preparing Thumbnail Images

## Displaying theme thumbnail images

A complete Stencil theme includes screenshots to display the theme on cards that appear in two locations within a non-active MSF BigCommerce control panel:

* **Storefront** › **Themes**: Each individual card displays a composite which is an image that contains combination of screenshots of the theme's multiple variations.
* **Storefront** › **Themes Marketplace**: Each card displays one variation of your theme. The three variations of Cornerstone (Light, Warm, and Bold) are displayed across three separate cards.

![Desktop View of My Themes](/_fern-img/6c8fa8cf763a5c6d81ab2f9364ea458fee9df3cc1f06bcfb9e1cc981bd9ddad1.webp)![Desktop View of Themes Marketplace](/_fern-img/dd33d66a09235d8372c40bb2132f889c2aaca432bc8151f770b539f3a5ab4737.webp)![Mobile View of Themes Marketplace](/_fern-img/77aa9da80a8a210f97453feb3f481318d63d8b87157326be3ebb96abded53509.webp)

## General image requirements

All screenshots described below must meet the following specifications in order for the `stencil bundle` command to be able to process them:

* Must be saved to a supported image file type: .jpg, .jpeg, .png, or .gif.
* Must be stored in your [meta/](https://github.com/bigcommerce/cornerstone/tree/master/meta) subdirectory.
* Must be in **portrait aspect ratio**.

## Theme-wide composite image

The theme-wide composite image represents your theme in a non-active MSF BigCommerce control panel's **Storefront** › **Themes**, which shows merchants their currently available themes, including any custom uploaded themes.

This file will normally be a mosaic of screenshots from multiple variations within your theme. It must meet the following requirements, beyond the general specifications above:

* Resolution of 600 x 760 pixels (horizontal x vertical).
* File size smaller than 2 MB.
* Arbitrary filename prefix, referenced in your [config.json](https://github.com/bigcommerce/cornerstone/blob/master/config.json) file as the `meta` object's `composed_image` key value.

Here is an example of a compliant file type and location:

`meta/composed.png`

Here is how you would reference this file within [config.json](https://github.com/bigcommerce/cornerstone/blob/master/config.json).

```js showLineNumbers={false}
{
  // [...]
  "meta": {
    [...]
    "composed_image": "composed.png",
    // [...]
}
```

## Variations: desktop and mobile screenshots

Each variation within your theme must be represented by two additional screenshots if you want that variation to appear in a non-active MSF control panel's  **Storefront** › **Theme Marketplace**, which shows merchants the themes that are available for download.

### Desktop screenshot

The first screenshot, showing your theme on a desktop viewport, must meet the following requirements beyond the general specifications above:

* Resolution of 2048 x 2600 pixels.

* File size smaller than 5 MB

* Arbitrary filename prefix, referenced in your [config.json](https://github.com/bigcommerce/cornerstone/blob/master/config.json) file as the `variations` object's `desktop_screenshot` key value.

### Mobile screenshot

The second screenshot, showing your theme on a mobile viewport, must meet the following requirements beyond the general specifications above:

* Resolution of 304 x 540 pixels.

* File size smaller than 1 MB.

* Arbitrary filename prefix, referenced in your [config.json](https://github.com/bigcommerce/cornerstone/blob/master/config.json) file as the `variations` object's `mobile_screenshot` key value.

Below is an example showing two files of compliant types and location.

* `meta/desktop_bright.png`
* `meta/mobile_bright.png`

Here is how you would reference these files within [config.json](https://github.com/bigcommerce/cornerstone/blob/master/config.json), for a variation named `Bright`:

```js showLineNumbers={false}
// [...]
  "variations": [
    {
      "name": "Bright",
      "id": "bright",
      "meta": {
        "desktop_screenshot": "desktop_bright.png",
        "mobile_screenshot": "mobile_bright.jpg",
    // [...]
    }
  ]

```

## Resources

### Related articles

* [Naming Your Theme and Theme Variations](/developer/docs/storefront/stencil/themes/foundations/variations)
* [Checking a Theme's Size](/developer/docs/storefront/stencil/deployment/theme-size)
* [Bundling and Pushing a Theme](/developer/docs/storefront/stencil/deployment/upload)