diff --git a/content/applications/websites/ecommerce/managing_products/media/multi_images01.png b/content/applications/websites/ecommerce/managing_products/media/multi_images01.png deleted file mode 100644 index 89eb8820a..000000000 Binary files a/content/applications/websites/ecommerce/managing_products/media/multi_images01.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/managing_products/media/multi_images02.png b/content/applications/websites/ecommerce/managing_products/media/multi_images02.png deleted file mode 100644 index 9ccb8e094..000000000 Binary files a/content/applications/websites/ecommerce/managing_products/media/multi_images02.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/managing_products/multi_images.rst b/content/applications/websites/ecommerce/managing_products/multi_images.rst index d717f3c19..3c4d1aaea 100644 --- a/content/applications/websites/ecommerce/managing_products/multi_images.rst +++ b/content/applications/websites/ecommerce/managing_products/multi_images.rst @@ -1,19 +1,32 @@ -========================================= -How to display several images per product -========================================= +================================== +Display several images per product +================================== -By default your product web page displays the main image of your product only. -If you like to show your products under several angles, you can turn the image into a carrousel. +By default, your product page only displays the main image of your product. +If you'd like to show multiple images of your product, you can turn the images into a carousel. -.. image:: ./media/multi_images01.png +.. image:: multi_images/multi_images01.png :align: center + :alt: ecommerce several image carousel -* Check *Several images per product* in :menuselection:`Website Admin --> Configuration --> Settings`. +* Open a product template form and click the *eCommerce* tab. +* Then click *Add A Media* in the *Extra Product Media* section. -* Open a product detail form and upload images from *Images* tab. Hit *Create* in Edit mode to get the upload wizard. - -.. image:: ./media/multi_images02.png +.. image:: multi_images/ecommerce-add-media.png :align: center + :alt: ecommerce add media section + +* A pop-up will appear, in which you can add a title and upload additional media. + +.. image:: multi_images/product-media-popup.png + :align: center + :alt: ecommerce product media pop-up + +* Any additional media will be displayed as the default product photo on the product page. + +.. image:: multi_images/product-carousel.png + :align: center + :alt: ecommerce product image carousel .. note:: - Such extra image are common to all the product variants (if any). + Additional images are commonly used on products with a number of variants. diff --git a/content/applications/websites/ecommerce/managing_products/multi_images/ecommerce-add-media.png b/content/applications/websites/ecommerce/managing_products/multi_images/ecommerce-add-media.png new file mode 100644 index 000000000..d10e3354c Binary files /dev/null and b/content/applications/websites/ecommerce/managing_products/multi_images/ecommerce-add-media.png differ diff --git a/content/applications/websites/ecommerce/managing_products/multi_images/multi_images01.png b/content/applications/websites/ecommerce/managing_products/multi_images/multi_images01.png new file mode 100644 index 000000000..36ce6894a Binary files /dev/null and b/content/applications/websites/ecommerce/managing_products/multi_images/multi_images01.png differ diff --git a/content/applications/websites/ecommerce/managing_products/multi_images/product-carousel.png b/content/applications/websites/ecommerce/managing_products/multi_images/product-carousel.png new file mode 100644 index 000000000..bb2f109f2 Binary files /dev/null and b/content/applications/websites/ecommerce/managing_products/multi_images/product-carousel.png differ diff --git a/content/applications/websites/ecommerce/managing_products/multi_images/product-media-popup.png b/content/applications/websites/ecommerce/managing_products/multi_images/product-media-popup.png new file mode 100644 index 000000000..8ea1bc696 Binary files /dev/null and b/content/applications/websites/ecommerce/managing_products/multi_images/product-media-popup.png differ