Additional product images (Image gallery)

Last updated

Each product can have one main image and any number of additional detailed images. The thumbnails of the detailed images are shown below the right panel below "Add to cart" button on the product page. Here's a great article that explains why product images are important and gives examples of good practices that will help to increase sales: http://baymard.com/blog/ux-product-image-categories

How to upload additional images

Modifications

How to remove the image name below the detailed image

Apply this CSS code: 

div.ecwid-gallery-imageDescription { 
display:none;
}

How to show the image name above the image instead of below it?

By default Ecwid shows an image name below the image. If you want to move it above the image, apply this CSS code: 

div.ecwid-gallery-imageDescription-bottom { 
display:none; 
} 

div.ecwid-gallery-imageDescription-top {
display:block !important; 
}

FAQ

Can I upload YouTube videos or flash movies to the gallery?

It isn't possible to do that yet, unfortunately. However you can insert them to product descriptions and they will work there just fine.
​ 

Does the gallery show the images in original size?

When a customer opens a product page, he/she sees the thumbnails of all additional images. When any thumbnail is clicked, Ecwid shows a popup with a bigger image. All images are automatically resized to fit the size of the customer`s browser window which allows to see the whole image without the need to scroll the page.

If the customer clicks a re-sized image, the image will be displayed in a new browser tab in its original size. If the image already fits the browser window it will not be resized. 

How to change the black background?

When you open an image from the gallery you will see it against a black background. If you want to change the color of the background, please use the code below:

.pswp__item {
background: red;
} 

You can change the color in the code to any you like. This code should be added to your active CSS theme in your Ecwid Control Panel > Settings > Design > CSS themes. Remember to save the changes.

 

Was this article helpful?
1 out of 1 found this helpful
Questions?
Get help
  • Presales Chat

    Need help choosing the right Ecwid plan? Our Sales team has the answer you’re looking for.

  • Forums

    Join the Ecwid community. Discuss support topics and store ideas with other Ecwid users.

  • Contact us

    Still have questions about Ecwid? Let us know! We will be glad to help you with your Ecwid store.

  • Status Monitor

    Get real time status updates on Ecwid services here, 24/7