diff --git a/content/applications/websites/ecommerce/managing_products/multi_images.rst b/content/applications/websites/ecommerce/managing_products/multi_images.rst index 10f36abf5..520ca92cb 100644 --- a/content/applications/websites/ecommerce/managing_products/multi_images.rst +++ b/content/applications/websites/ecommerce/managing_products/multi_images.rst @@ -1,19 +1,23 @@ -========================================= -How to display several images per product -========================================= +=========================== +Multiple 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. +When you register several images for a product, only the first image is shown on the main products +page. By clicking on the product, visitors can see additional images with the carousel view. -.. image:: multi_images/multi_images01.png - :align: center +.. image:: multi_images/carousel-view.png + :alt: Showing the carousel view. -* Check *Several images per product* in :menuselection:`Website Admin --> Configuration --> Settings`. +Adding multiple images to a product +----------------------------------- -* Open a product detail form and upload images from *Images* tab. Hit *Create* in Edit mode to get the upload wizard. +#. Go to :menuselection:`Website --> Products`, and select a product. +#. Go to the :guilabel:`Sales` tab, click :guilabel:`Edit`, and :guilabel:`Add a media`. +#. Click the pencil icon to add an image, then click :guilabel:`Save & New` to add additional ones. +#. Click :guilabel:`Save & Close` when you are done. -.. image:: multi_images/multi_images02.png - :align: center +.. image:: multi_images/multi-images.png + :alt: Creating extra product media. .. note:: - Such extra image are common to all the product variants (if any). + Such extra images are common to all the product variants (if any). diff --git a/content/applications/websites/ecommerce/managing_products/multi_images/carousel-view.png b/content/applications/websites/ecommerce/managing_products/multi_images/carousel-view.png new file mode 100644 index 000000000..8346f0a87 Binary files /dev/null and b/content/applications/websites/ecommerce/managing_products/multi_images/carousel-view.png differ diff --git a/content/applications/websites/ecommerce/managing_products/multi_images/multi-images.png b/content/applications/websites/ecommerce/managing_products/multi_images/multi-images.png new file mode 100644 index 000000000..a75a6b4ce Binary files /dev/null and b/content/applications/websites/ecommerce/managing_products/multi_images/multi-images.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 deleted file mode 100644 index 89eb8820a..000000000 Binary files a/content/applications/websites/ecommerce/managing_products/multi_images/multi_images01.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/managing_products/multi_images/multi_images02.png b/content/applications/websites/ecommerce/managing_products/multi_images/multi_images02.png deleted file mode 100644 index 9ccb8e094..000000000 Binary files a/content/applications/websites/ecommerce/managing_products/multi_images/multi_images02.png and /dev/null differ