[IMP] ecommerce: update product/attribute page

task-3506952

Author: lman-odoo

content/applications/sales/sales/products_prices/products/variants.rst

@@ -169,6 +169,23 @@ specifications that are specific to this particular value).
    Or, choose a specific color by clicking the *dropper* icon, and selecting a desired color that's
    currently clickable on the screen.
 
+   If you sell products with specific patterns, you can also add an image to display the pattern of the product.
+
+   To do so, click the :icon:`fa-pencil` :guilabel:`(pencil)` icon that appears when clicking the
+   :icon:`fa-camera` :guilabel:`(camera)` icon.
+
+   .. image:: variants/attribute-value-add-image.png
+      :align: center
+      :alt: Add an image of the pattern to an attribute.
+
+   On the resulting pop-up window, select an image from your local drive and upload it.
+
+   This pattern appears as a color option on the ecommerce product page.
+
+   .. image:: variants/ecommerce-pattern-option.png
+      :align: center
+      :alt: Pattern as color option on the ecommerce page.
+
 .. tip::
    Attributes can also be created directly from the product template by adding a new line and
    typing the name into the :guilabel:`Variants` tab.

content/applications/sales/sales/products_prices/products/variants/attribute-value-add-image.png

@@ -154,15 +154,23 @@ by adding :ref:`variants <ecommerce/products/product-variants>`, :ref:`digital d
 Customization
 -------------
 
-To customize a product page, click :guilabel:`Edit`. Go to the :guilabel:`Blocks` tab to add
-:doc:`building blocks <../../websites/website/web_design/building_blocks>`.
+To customize a product page, click :guilabel:`Edit` in the upper right corner of the page.
 
 .. tip::
-   - When dragging and dropping a building block on the product page, placing it above or below the
-     top or bottom blue lines makes it visible on all product pages.
-   - You can edit any text on your website simply by clicking on it while in :guilabel:`Edit` mode.
+   You can edit any text on your website by clicking on it.
 
-Go to the :guilabel:`Customize` tab to modify the page layout or add features:
+From here, you can add an additional, detailed product description especially for marketing purposes
+that will only be visible on your ecommerce product page. To do so, click the text field beneath
+the **sales description** located right under the product name. You can use the `/` command to add images,
+tables and other features.
+
+Use the :guilabel:`Blocks` tab to add :doc:`building blocks <../../websites/website/web_design/building_blocks>`.
+
+.. tip::
+   When dragging and dropping a building block on the product page, placing it above or below the top or bottom blue
+   lines makes it visible on all product pages.
+
+Use the :guilabel:`Customize` tab to modify the page layout or add features:
 
 - :guilabel:`Terms and Conditions`: Toggle the switch to display a link to your
   :doc:`terms and conditions <../../finance/accounting/customer_invoices/terms_conditions>` on the
@@ -182,7 +190,7 @@ Go to the :guilabel:`Customize` tab to modify the page layout or add features:
 - :guilabel:`Select Quantity`: Toggle the switch to allow customers to select the product quantity
   they want to purchase.
 
-- :guilabel:`Tax indication`: Toggle the switch to indicate if the price is
+- :guilabel:`Tax Indication`: Toggle the switch to indicate if the price is
   :ref:`VAT included or excluded <ecommerce-price-management-tax-display>`.
 
 - :guilabel:`Variants`: Show all possible product :ref:`variants <ecommerce/products/product-variants>`
@@ -218,22 +226,33 @@ Go to the :guilabel:`Customize` tab to modify the page layout or add features:
 
 .. _ecommerce/products/image-customization:
 
-Image customization
--------------------
+Product images and videos
+-------------------------
+
+You can add additional media items to provide visual resources (i. e. images and videos) and information on
+your product.
+
+Navigate to the :ref:`product form <ecommerce/products/product-form>`, then go to the :guilabel:`Sales` tab
+and click :guilabel:`Add a media` under the :guilabel:`Extra Product Media` section. In the resulting
+:guilabel:`Create Extra Product Media` pop-up window, enter the :guilabel:`Image Name`, and add a video URL
+or click the :icon:`fa-pencil` :guilabel:`(pencil)` icon that appears when the cursor hovers
+over the :icon:`fa-camera` :guilabel:`(camera)` icon to upload images from your local drive.
+
+The media resources will appear on the ecommerce product page where you can adapt their layout.
 
-To customize the images available on the product page, go to the :guilabel:`Customize` tab:
+To do so, go to the ecommerce product page, click :guilabel:`Edit` and select an image. In the :guilabel:`Customize`
+tab, use the following features:
 
 - :guilabel:`Images Width`: Changes the width of the product images displayed on the page.
 - :guilabel:`Layout`: The :guilabel:`Carousel` layout allows customers to navigate from one image to
   the next using the :icon:`fa-angle-left` (:guilabel:`left arrow`) or :icon:`fa-angle-right`
   (:guilabel:`right arrow`); whereas the :guilabel:`Grid` displays four images in a square layout.
 - :guilabel:`Image Zoom`: Select the zoom effect for product images: :guilabel:`Magnifier on hover`
   :guilabel:`Pop-up on Click`, :guilabel:`Both`, or :guilabel:`None`.
-- :guilabel:`Thumbnails`: Align thumbnails on the :icon:`fa-long-arrow-left` (:guilabel:`Left`) or
-   at the :icon:`fa-long-arrow-down` (:guilabel:`Bottom`).
+- :guilabel:`Thumbnails`: Align thumbnails on the :icon:`fa-long-arrow-left` (:guilabel:`Left`) or at
+  the :icon:`fa-long-arrow-down` (:guilabel:`Bottom`).
 - :guilabel:`Main Image`: Click :guilabel:`Replace` to change the product's main image.
-- :guilabel:`Extra Images`: :guilabel:`Add` extra images or videos (including via URL) or
-  :guilabel:`Remove all` product images.
+- :guilabel:`Extra Images`: :guilabel:`Add` more extra images or videos (including via URL) or :guilabel:`Remove all`.
 
 .. note::
    Images must be in PNG or JPG format and with a minimum size of 1024x1024 to trigger the zoom.