Featured images

Featured images represent the product in most areas of your site, so use the image you want customers to see first. The image appears in:

• Store pages
• Product blocks
• Summary blocks
• Product details pages

By default, the first image listed in the product editor becomes its featured image. To set a different featured image, hover over an image, then click Set as thumbnail. Or click ••• to change the featured image.

Additional images

Additional images give customers a well-rounded view of your products. Use additional images to show detailed shots, different angles of your product, or staged photos.

Additional images appear on product details pages. In the product editor, all images after the first image are additional images. Click and drag images to change their order.

Variant images

On product details pages, variant images display in the gallery of additional images. Variant images show what each product variant looks like. For example, use variant images to show products in different sizes and colors. By default, the featured image displays until customers select a variant from the dropdown menu.

To add or change a variant image:

1. In the product editor, scroll to the variant section then click Edit all.
2. Click the image upload icon beside a variant.
3. Click + to upload an image, or select an image you've already uploaded.
4. Click Apply.

On version 7.0, image display depends on your template's store page type.

Featured images

The featured image represents the product in most areas of your site, including as the product thumbnail on the store page, so use an image you want most customers to see first. The image appears:

• On Classic or Unique store pages.
• As the first image on product details pages.
• In the Store page panel or Products panel.
• On Product blocks and Summary blocks.

To set the featured image, hover over an image in the product editor and click Set as thumbnail.

The first image in the product editor is the first image on the product details page, even if that's different from the featured image.

Additional images

Additional images give customers a well-rounded view of your products. Use additional images to show detailed shots, different angles of your product, or staged photos. Additional images appear :

• On Product details pages.
• On hover, the second image displays (Advanced store pages only).

All images after the first image are additional images. Click and drag images to change their order.

Variant images

On product details pages, variant images display in the gallery of additional images to show what each product variant looks like. For example, use variant images to show products in different sizes and colors. By default, the product featured image displays until customers select a variant from the dropdown menu.

To change a variant image:

1. In the Product editor, scroll to Inventory.
2. Under Variants, click Edit All.
3. Click the upload button next to the variant, select an image or upload an image.
4. Click Apply.
5. Click Back, and click Save.

Customize how product images appear using section styles and the Product Item tweaks in the Site styles panel.

Style product sections

To change how product featured images display in store sections, hover over the section and click the pencil icon.

You can change the spacing, columns, aspect ratio, and text alignment. You can also show or hide product prices. To change the colors, click Colors.

Tip: If your product images appear cropped, troubleshoot common cropping issues.

Style product details pages

To change the way products appear on the product details page:

1. Edit the page and click Edit design.
2. Open section styles, then click the layout dropdown menu.
3. Select a layout.
4. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

You can style elements like image aspect ratio, text alignment, and product gallery design. You can also change the focus of a cropped image after adding it using its focal point.

To achieve a cohesive design, these style changes apply to all products in your store. You can’t edit these settings for specific products.

Use the Site styles panel to customize how product images appear. The available layouts and style options depend on your template family's store page type.

Product image tweaks for Classic store pages

These are the image-specific tweaks for Classic store pages:

• Store pages: Use the Product Item Size, Product Image Auto Crop, and Product Background Color tweaks to style how product images display on the store page.
• Item pages: Use the Product Gallery Size and Product Gallery Auto Crop tweaks to set the image size and cropping for details pages.

Product image tweaks for Advanced store pages

These are the image-specific tweaks for Advanced store pages:

• Store pages: Use the Image Aspect Ratio tweak in the Products: Layout section to set the shape of the images on the store page. The images automatically crop to fit the shape.
• Item pages: Use the tweaks in the Products: Gallery section, such as Design, Aspect Ratio, Thumbnail Alignment, and Thumbnail Width, to style images on details pages.

Product image tweaks for Unique store pages

For help styling product images in these templates, visit their template guides:

• Galapagos
• Supply