Product images

Product images let your customers know what your products look like. You can upload as many images per product, as you like. It is also possible to embed images (and videos) into product descriptions to provide even more details to your customers.

You can set the image size and orientation of product thumbnails in your store with the help of several preset design options in Ecwid Control Panel → Design.

Quality product images are a key driver of store engagement and sales. Upload at least a few images that show your product in detail from different angles. Read more about product photography.

Gallery image sizes

You can upload product images of any size up to 20 Mb. If you add large and heavy product images, they are automatically compressed, so your products load fast and fit well on both desktop and mobile.

We recommend using JPG, PNG and GIF images in RGB color mode for your products.

Product images look best in a gallery when images appear to be the same size: use a consistent aspect ratio (height-to-width ratio) and orientation for all the product images that you add in a product gallery. This way images display better side by side because they all display the same size.

difference of the images in the gallery

Show the various perspectives of the product such as front, side, underneath, close-up, etc., so customers can see what they are buying in detail.

You can showcase your product in motion using GIFs or adding a 360° product view.

Adding a product image

You can add an unlimited number of images to every product in your store. We recommend using JPG, PNG and GIF images in RGB color mode for your products.

When you add multiple images to a product, the first uploaded image is considered the main/featured product image on your individual product details page. You can set a new main image by dragging a different image to the first place. You can also sort the other images by dragging them. Customers will see images in this order in the storefront.

To add images to a product:

  1. Go to Ecwid control panel → Catalog → Products and choose a product to see its details page.
  2. In the Images section, either drag and drop images from your computer or click + Upload Images:

Upload Images

  1. Click Save, once your images are uploaded.

Once images have been added, customers can see them in your store. To change gallery layout appearance go to Design → Image Gallery thumbnails (for Instant site users: go to Website → Edit → Store → Product Page → Image gallery layout)

Show additional product images from the gallery when customers hover the mouse pointer over a Product Card. Go to Ecwid Control Panel → Design → Product Card details and layout → Scroll down to Additional product image and enable the option.

Adding an image to a product description

You can add an image to the product description to better showcase your product.

To add images to the product description:

  1. Go to Ecwid control panel → Catalog → Products and choose a product to see its details page.
  2. In the Description section, either drag and drop images from your computer or click Insert Image:

Insert Image

  1. Click Save, once your images are uploaded.

Adding an image to a product option/variation

If you sell products with options (such as color or size), you might want to add different images to different product options. You can do it by using product variations. You can add only one image to each variation. If you want to show more images of a variation, just add them to the main product gallery (or in a description).

Product variations are available on Business and Unlimited plans. Upgrade

To add an image to product variation:

  1. Go to your Ecwid Control Panel → Catalog → Products.
  2. Click on the product you want to edit.
  3. Open the Options tab, then click Variations:

Options tab

  1. Click + New variation.
  2. In the popup select the option you want to add an image to:

select the option

  1. Click Change under the current image.
  2. Select the image on your computer, then upload the image.
  3. Click OK.

That’s it! The image is added for the option. See the screencast:

See the screencast

If you have several options, repeat the steps above for all of them. In our example the product variations after adding images look like this:

example the product variations

See the screencast of how it looks in the storefront:

See the screencast

Adding product images in bulk

You can add main/featured product images to all products at once via CSV import. To upload additional gallery images in bulk use Bulk Gallery Upload app.

Protecting your images

There are some effective ways to protect against unauthorized image use. These methods will stop a lot of people, but there are always exceptions. If someone really wants to take a photo, then there are ways around most of the barriers you can put in the way.

Disabling right-click

'Right-clicking' images is a fast shortcut to find, copy, and/or download images. You can prevent average users from doing it by disabling the right click on your pages. With the ImageLock app, you can disable the right-click and drag & drop downloads without having to implement any Javascript code.

The app also allows you to set a custom action on right-click, e.g. show a custom menu, a tooltip or an alert window.

To set up ImageLock app:

  1. Go to Ecwid Control Panel → App Market.
  2. Find ImageLock, then click Install.
  3. Follow in-app instructions.
Plan availability: Venture, Business, Unlimited. Upgrade
App pricing: $5 per month, with a free trial.

Adding watermark

The most common image protection technique is to place a visual copyright watermark on the image. By adding your logo or a mark on top of your images you can deter people from copying them. And if they do, it’s free publicity for you!

visual copyright watermark

There are plenty of online services that you can use for watermarking your images, e.g.:

If you are acquainted with Adobe Photoshop, you can use it to watermark your images as explained in the guide.

Hiding product images

If for some reason you need to remove/hide images from your product page you can hide it using CSS. This option works out great if you have a lot of products and you don’t want to selectively remove from each one. This option is also very flexible as you can revert everything just by removing the CSS.

To hide product images:

  1. Go to your Ecwid Control Panel → Design.
  2. Scroll down to the Сreate Your CSS Theme block, then click Create Theme:

Сreate Your CSS Theme

  1. If this is your first custom CSS theme, click Add New CSS Theme.
  2. Add a theme name and paste this CSS code to the large white field:

html#ecwid_html body#ecwid_body .ec-size .ec-store .grid-product__image {
  display: none;
}
  1. Click Activate to enable the new theme.
  2. Save changes.

This CSS will hide the product images and the placeholder image (Ecwid shows a placeholder image for products that don’t have any featured image).

Was this article helpful?

Awesome! Thanks for your feedback!

Sorry about that! We are here to assist you by email or chat.

Contact support