[IMP] ecommerce: update product/attribute page

task-3506952

X-original-commit: ccde05a721

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

@@ -147,27 +147,34 @@ Then, enter the name of the value in the :guilabel:`Value` column. Next, check t
 :guilabel:`Is custom value` column, if the value is custom (i.e. the customer gets to provide unique
 specifications that are specific to this particular value).
 
-.. note::
-   If the :guilabel:`Display Type` - :guilabel:`Color` option is selected, the option to add an HTML
-   color code will appear to the far-right of the value line, to make it easier for salespeople and
-   customers to know exactly what color option they're choosing.
+Colors
+~~~~~~
 
-   .. image:: variants/attribute-value-add-a-line.png
-      :align: center
-      :alt: Attribute values tab when add a line is clicked, showing the custom columns.
+Next to :guilabel:`Display Type`, select the :guilabel:`Color` option. Go to the
+:guilabel:`Attribute Values` tab to modify the value settings.
 
-   To choose a color, click the blank circle in the :guilabel:`Color` column, which reveals an HTML
-   color selector pop-up window.
+.. image:: variants/attribute-value-add-image.png
+   :alt: Add an image of the pattern to an attribute.
 
-   .. image:: variants/picking-a-color.png
-      :align: center
-      :alt: Selecting a color from the HTML color pop-up window that appears on attribute form.
+To choose a color, click the blank circle in the :guilabel:`Color` column, which reveals an HTML
+color selector pop-up window.
 
-   In this pop-up window, select a specific color by dragging the color slider to a particular hue,
-   and clicking on the color portion directly on the color gradient window.
+.. image:: variants/picking-a-color.png
+   :alt: Selecting a color from the HTML color pop-up window that appears on attribute form.
 
-   Or, choose a specific color by clicking the *dropper* icon, and selecting a desired color that's
-   currently clickable on the screen.
+In this pop-up window, select a specific color by dragging the color slider to a particular hue,
+and clicking on the color portion directly on the color gradient window.
+
+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-camera` :guilabel:`(camera)` icon,
+then click the :icon:`fa-pencil` :guilabel:`(pencil)` icon and select an image from your local
+drive. This pattern will appear as a color option on the ecommerce product page.
+
+.. image:: variants/ecommerce-pattern-option.png
+   :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

content/applications/websites/ecommerce/products.rst

@@ -68,8 +68,8 @@ Shop page
 =========
 
 To customize the layout of the main :guilabel:`Shop` page or modify its content, click
-:guilabel:`Edit`. Go to the :guilabel:`Blocks` tab to add
-:doc:`building blocks <../../websites/website/web_design/building_blocks>` or to the
+:guilabel:`Edit`. Go to the :guilabel:`Blocks` tab to add :doc:`building blocks
+<../../websites/website/web_design/building_blocks>` or to the
 :guilabel:`Customize` tab to change the page layout or add features:
 
 - :guilabel:`Layout`: Select :guilabel:`Grid` or :guilabel:`List`.
@@ -137,38 +137,42 @@ To customize the layout of the main :guilabel:`Shop` page or modify its content,
 
 .. _ecommerce/products/product-page:
 
-Product page
-============
+Product page customization
+==========================
 
-To access a product's page, go to the :guilabel:`Shop` and click on the product. Click
-:guilabel:`Edit` to :ref:`customize <ecommerce/products/customization>` the page or
-:ref:`edit its images <ecommerce/products/image-customization>`.
+.. _ecommerce/products/customization:
 
+Product information
+-------------------
 .. _ecommerce/products/product-form:
 
-To access the backend **product form**, click the :icon:`fa-cog` :guilabel:`Product` button in the
-top-right corner of the product page. Alternatively, navigate to :menuselection:`Website -->
+To add general information about a product, navigate to :menuselection:`Website -->
 eCommerce --> Products` and select the product. You can configure the product page from the form
 by adding :ref:`variants <ecommerce/products/product-variants>`, :ref:`digital documents
 <ecommerce/products/digital-files>`, or :ref:`translating <ecommerce/products/translation>` content.
 
+You can also add an ecommerce-specific product description to be displayed below
+the product name on the product's page. To do so, go to the :guilabel:`Sales`
+tab, scroll down to the :guilabel:`Ecommerce description` section, and add a description. Use Odoo's
+:doc:`rich-text editor <../../essentials/html_editor>` features to personalize the content.
+
 .. tip::
    Click the :guilabel:`Go to Website` smart button to return to the frontend product's page.
 
-.. _ecommerce/products/customization:
+Product presentation
+--------------------
 
-Customization
--------------
-
-To customize a product page, click :guilabel:`Edit`. Go to the :guilabel:`Blocks` tab to add
+To customize the product presentation on the website, go to the :guilabel:`Shop` and click on the
+product. Click :guilabel:`Edit` to :ref:`customize <ecommerce/products/customization>` the page,
+:ref:`edit its images <ecommerce/products/image-customization>` or 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.
-   - You can edit any text on your website simply by clicking on it while in :guilabel:`Edit` mode.
+   - 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 by clicking on it while in :guilabel:`Edit` mode.
 
-Go to the :guilabel:`Customize` tab to modify the page layout or add features:
+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
@@ -188,12 +192,12 @@ 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>`
-  vertically as a :guilabel:`Products List` or horizontally as selectable :guilabel:`Options` to
-  compose the variant yourself.
+- :guilabel:`Variants`: Show all possible product :ref:`variants
+  <ecommerce/products/product-variants>` vertically as a :guilabel:`Products List`
+  or horizontally as selectable :guilabel:`Options` to compose the variant yourself.
 
 - :guilabel:`Product Tags`: Toggle the switch to display the :guilabel:`Product Template Tags` on
   the product page and allow customers to filter products using those tags.
@@ -224,10 +228,18 @@ Go to the :guilabel:`Customize` tab to modify the page layout or add features:
 
 .. _ecommerce/products/image-customization:
 
-Image customization
--------------------
+Product images and videos
+-------------------------
 
-To customize the images available on the product page, go to the :guilabel:`Customize` tab:
+To add more media items, such as images and videos, navigate to the
+:ref:`product form <ecommerce/products/product-form>`, then go to the :guilabel:`Sales` tab
+and click :guilabel:`Add Media` under the :guilabel:`Ecommerce Media` section. In the
+:guilabel:`Select a media` pop-up window, go to the :guilabel:`Images` tab, select an image,
+click :guilabel:`Upload an image` or :guilabel:`Add URL`. Or navigate to the :guilabel:`Videos` tab,
+paste a video URL or embed code. Once done, click :guilabel:`Add`.
+
+To customize the images or videos, go to the ecommerce product page, click :guilabel:`Edit`
+and select the relevant media. 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
@@ -235,11 +247,12 @@ To customize the images available on the product page, go to the :guilabel:`Cust
   (: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.
@@ -259,8 +272,8 @@ To configure product variants for a product:
 #. Scroll down to the :guilabel:`Shop - Products` section and enable the
    :guilabel:`Product Variants` feature.
 #. Access the :ref:`product forms <ecommerce/products/product-form>` and go to the
-   :guilabel:`Attributes & Variants` tab, where you can add attributes and values, allowing customers
-   to configure and select product variants on the product page. For multiple attributes,
+   :guilabel:`Attributes & Variants` tab, where you can add attributes and values, allowing
+   customers to configure and select product variants on the product page. For multiple attributes,
    you can combine them to create specific variants.
 
 To display or hide an attribute on the :guilabel:`Shop` page and allow visitors to filter them,
@@ -288,7 +301,8 @@ Digital files
 
 You can link digital files like certificates, eBooks, or user manuals to the products. These
 documents are available :ref:`before payment <ecommerce-products-digital-files-before-payment>` on
-the product page or in the customer portal :ref:`after checkout <ecommerce-products-digital-files-after-payment>`.
+the product page or in the customer portal
+:ref:`after checkout <ecommerce-products-digital-files-after-payment>`.
 
 To link a digital file to a product, go to the :ref:`product form <ecommerce/products/product-form>`
 and click the :guilabel:`Documents` smart button. Then, click :guilabel:`Upload` to upload a file