Product photos and gallery

Upload photos to products, reorder them, choose the cover and give each color or variant its own photos. Crop, rotate, adjust the light and place photos on a square background with the editor in the panel. Photos are resized automatically while they upload.

Store owner
User with permission to edit products

What are product photos and the gallery?

Upload photos to products, reorder them, choose the cover and give each color or variant its own photos. Who can do this: Store owner; User with permission to edit products. Crop, rotate, adjust the light and place photos on a square background with the editor in the panel. Photos are resized automatically while they upload. The storefront makes smaller copies of every photo for each screen width; a visitor on a phone downloads the small copy.

Uploading photos

In the panel, open Products and click a product (a new product works too). In the Photos section below the product name, press 1 Upload photos and choose one or more photos. You can also drag photos from your computer onto this section or paste a copied image with Ctrl+V.

Supported types: JPEG, PNG, WebP, AVIF, GIF and iPhone photos (HEIC, when uploaded from Safari). A file can be up to 15 MB; a product can have up to 60 photos.
Automatic resizing: Large photos are resized in your browser while they upload (longest edge up to 2560 pixels) and compressed once more on the server. Photos a phone took sideways are turned the right way, and embedded information such as location is removed. The section header shows how much was saved.
From URL: Paste the address of an image on another website; the photo is downloaded and copied to your store's storage, so it stays visible even if the source site removes it.
Library: Reuse photos already uploaded to your store in other products without uploading them again. A photo uploaded twice is stored once.

Changes are saved with the window's Save button; if you choose Cancel, the gallery stays as it was. While uploads are running, Save waits.

The Photos section in the product window: three photos, the first with a Cover badge and two with color badges; below, the selected photo's alt text and the Show for which variant choice — With demo data.

Reordering and choosing the cover

Drag photos to reorder them; with the keyboard, select a photo and move it with Alt+←/→. 2 The first photo is the Cover: it appears in category lists, search and shares. To bring a photo to the front, select it and press Make cover. Double-click to enlarge a photo and use the arrows to move between photos.

Click a photo to open its details below: Alt text describes the photo to visually impaired visitors and search engines; if you leave it empty, the product name is used. A warning appears for photos smaller than 800 pixels. Select several photos with the box in their corner to remove them together or assign them to a variant.

Photos for each color or variant

If your product has variants (for example Color: Red, Warranty: 2 years), select a photo and tick the value under 3 Show for which variant? Red, chosen with one click, applies to every red variant: red with a 2-year and a 3-year warranty show the same photos, and a red variant you add later gets them too.

All variants: The photo is shown for every choice (a general photo; the default).
Advanced: Select several attributes together (Color: Red and Warranty: 3 years) or tick individual variants from the list.
Customer view: Choose a variant from the selector above the gallery; numbers show which photos a customer choosing that variant will see and in what order, and the photos they won't see fade. Photos you upload in this view are assigned to that color directly.

When a customer chooses a color in the storefront, the gallery switches to that color's photos: the color's own photos come first, followed by the general photos, and photos that belong to other colors are hidden. In themes that use photo swatches for colors, the swatch image is taken from these photos as well.

Product page in the storefront: Green is selected as the color, and the green headphones' photo is first in the gallery — With demo data.

Photo editor

Select the photo and press 4 Edit. The editor opens full screen; all processing happens in your browser.

Crop: 1 Choose an aspect ratio (free, original, 1:1, 4:5, 3:4, 2:3, 4:3, 16:9). 2 Resize the crop area with the corner and edge handles, or drag it from the middle; with a fixed ratio, dragging a corner keeps the ratio. When the crop area has focus, you can also move it with the arrow keys.
Rotate and flip: 3 Rotate 90° left or right, flip horizontally or vertically. Straighten corrects a tilted photo by up to ±45°; no empty corners are left.
Adjust: Brightness, contrast, saturation, warmth and sharpness. Auto enhance measures the light in the photo and suggests the values itself. Double-clicking a slider resets it.
Filters: Natural, Vivid, Bright, Warm, Cool, Matte, Dramatic, Black & white and Sepia; each is shown with a small preview of your photo.
Undo / redo: Ctrl+Z and Ctrl+Y. 4 Hold the Before / after button to see the original photo; Reset undoes all changes.

Photo editor: a 1:1 crop area with handles on the left; Aspect ratio, Rotate and flip and Straighten settings on the right — With demo data.

Square background and output size

On the Background tab, turn on 1 Place on a square background: the product is centered on a square background without being cropped. This is recommended for marketplaces and storefront grids. 2 Choose the background color (white, light gray, cream, black or a custom color) and the padding. Maximum edge is the limit for the saved photo (1600, 2048 or 2560 pixels); 3 the resulting size is shown at the bottom of the window.

The editor's Background tab: Place on a square background is on, white background selected, padding 6 percent, maximum edge 2048 pixels — With demo data.

Use Save to replace the photo with your edit, or Add as copy to keep the original and add the edit next to it. The photo's alt text and variant assignment carry over to the new photo.

TipThe storefront makes smaller copies of every photo for each screen width; a visitor on a phone downloads the small copy. So don't hesitate to upload large photos; at least 1200 pixels is recommended.

Photos from supplier feeds

If you change the gallery of a product that comes from a supplier feed or a marketplace, the photos keep your arrangement; later feed updates don't change the product's photos.