[IMP] ecommerce: products page updated

closes odoo/documentation#11165

Taskid: 4056328
X-original-commit: 1c5bf1337e
Signed-off-by: Audrey Vandromme (auva) <auva@odoo.com>
Signed-off-by: Donatienne Pirlot (dopi) <dopi@odoo.com>

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

@@ -28,7 +28,7 @@ within the Odoo *Sales* application.
    other similar records in Odoo.
 
 .. seealso::
-   :doc:`/applications/websites/ecommerce/products/variants`
+   :ref:`ecommerce/products/product-variants`
 
 Configuration
 =============

content/applications/websites/ecommerce/checkout_payment_shipping/checkout.rst

@@ -89,9 +89,6 @@ The button can be found next to the :guilabel:`Add to Cart` button on the produc
    :align: center
    :alt: Buy now (express checkout) button
 
-.. seealso::
-   :ref:`Product page design: additional functions <ecommerce-functions>`
-
 .. _checkout-sign:
 
 Guest and signed-in checkout

content/applications/websites/ecommerce/products.rst

@@ -4,275 +4,404 @@
 Products
 ========
 
-Odoo allows you to create, import, and manage your products' pages all within the **Website** app.
+**Odoo eCommerce** allows you to :ref:`add products <ecommerce/products/add-products>` and manage
+your :ref:`product pages <ecommerce/products/product-page>` directly from the Website app. It also
+allows you to add :ref:`product variants <ecommerce/products/product-variants>` and
+:ref:`digital files <ecommerce/products/digital-files>`,
+:ref:`translating <ecommerce/products/translation>` the product page content,
+:ref:`managing stock <ecommerce/products/stock-management>`, and enabling
+:ref:`product comparisons <ecommerce/products/product-comparison>`.
 
-Add products to the catalog
-===========================
+.. _ecommerce/products/add-products:
 
-To add a product to your catalog, you can either do it in:
+Add products
+============
 
-- From anywhere on your website, click :menuselection:`+ New --> Product`. Enter the name of your
-  product, and :guilabel:`Save`;
-- :menuselection:`Website --> eCommerce --> Products --> Create`;
-- or by :ref:`importing data <import-data>` using XLSX or CSV files. To do so, go to
-  :menuselection:`Website --> eCommerce --> Products`. Click on :guilabel:`Favorites` and
-  :ref:`Import records <import-data>`.
+.. _ecommerce/products/create-products:
 
-.. seealso::
-   - :doc:`products/catalog`
-   - :doc:`../../sales/sales/products_prices/products/import`
-   - :doc:`Product-related documentation <../../sales/sales>`
+Create products
+---------------
 
-Publish
--------
-
-Upon creation, products are defaulted as :guilabel:`Unpublished` in your eCommerce catalog. To make
-a product visible to visitors, go to :menuselection:`Website --> Site --> Homepage`, click on your
-**main shop** page, select the product, and enable it as :guilabel:`Published` in the top-right
-corner.
+To create a product from the frontend, click :guilabel:`+ New` in the top-right corner, then
+:guilabel:`Product`. Enter the :guilabel:`Product Name`, :guilabel:`Sales Price`, the default
+:guilabel:`Customer Taxes` for local transactions, and :guilabel:`Save`. You can then update the
+product's details, add an image, and :ref:`customize <ecommerce/products/customization>` the product
+page. When you :guilabel:`Save`, the product page is automatically published.
 
 .. tip::
-   To publish **large batches** of products, the most convenient fashion is to go to
-   :menuselection:`Website --> eCommerce --> Products`. Here, remove the :guilabel:`Published`
-   filter by clicking on the :guilabel:`x` right to it, and then select the :guilabel:`List` view.
-   Next, click the :guilabel:`dropdown toggle` button (located right below the :guilabel:`List`
-   button) and enable :guilabel:`Is published`. Click the :guilabel:`Is Published` column to
-   re-order it either by **published** or **unpublished** products. Finally, select the products to
-   publish by ticking their box on the extreme-right, and tick any box of the selected products in
-   the :guilabel:`Is Published` column to publish them all.
+   - You can also create a product from the backend by going to
+     :menuselection:`Website --> eCommerce --> Products` and clicking :guilabel:`New`.
+   - Products created from the frontend are automatically :ref:`published <website/un-publish-page>`,
+     while products created from the backend are not. To publish a product, click the
+     :guilabel:`Go to Website` smart button to access the product page, then toggle the switch from
+     :guilabel:`Unpublished` to :guilabel:`Published`.
 
-.. image:: products/products-buttons.png
-   :align: center
-   :alt: List and dropdown toggle buttons
+.. _ecommerce/products/import-products:
 
-Product page design
-===================
+Import products
+---------------
 
-Once a product is created, you can access its **product page** through the :guilabel:`Shop` page by
-clicking on the product, and then clicking :guilabel:`Edit`. Here, you can change the page's
-**additional functions**, **layout**, **add content**, etc. Note that **enabled functions** apply to
-*all* product pages.
+To :ref:`import product data <import-data>` using XLSX or CSV files, go to
+:menuselection:`Website --> eCommerce --> Products`, click the :icon:`fa-cog` (:guilabel:`gear`)
+icon, then :ref:`Import records <import-data>`.
 
-.. _ecommerce-functions:
+.. tip::
+   To publish **large batches** of products, follow these steps:
 
-Additional functions
---------------------
+   #. Go to :menuselection:`Website --> eCommerce --> Products`.
+   #. Remove the :guilabel:`Published` filter and switch to the :guilabel:`List` view.
+   #. Click the :icon:`fa-sliders` (:guilabel:`dropdown toggle`) icon and enable
+      :guilabel:`Is published`.
+   #. Click the :guilabel:`Is Published` column to re-order it by **published** or **unpublished**
+      products.
+   #. Select the products to publish by ticking their box.
+   #. In the :guilabel:`Is Published` column, tick the box for any of the selected products, then
+      :guilabel:`Confirm` to publish them.
 
-In the **website builder** window, click :guilabel:`Customize` to enable additional functions:
+.. _ecommerce/products/shop-page:
 
-- :guilabel:`Customers: Rating` allows customers to submit :ref:`product reviews <product-reviews>`;
-  :guilabel:`Share` adds social media and email icon buttons to share the product via those
-  channels;
-- :guilabel:`Select Quantity`: if enabled, allows to choose the quantity added to cart;
-- :guilabel:`Tax Indication`: notifies if the price is **VAT included** or **excluded**;
-- :guilabel:`Variants`: shows all possible
-  :doc:`variants </applications/sales/sales/products_prices/products/variants>` of the product as a
-  :guilabel:`Products List`; :guilabel:`Options` as selectable options to compose the variant
-  yourself;
-- :guilabel:`Cart`: :guilabel:`Buy Now` adds a :ref:`checkout button <cart/buy-now>` taking the
-  customer directly to the checkout page; :guilabel:`Wishlist` allows to add the product to a
-  wishlist;
-- :guilabel:`Specification`: allows you to select where the :guilabel:`Specifications` section is
-  displayed. This option displays a list of all variant attributes and values of a product, but only
-  works for products *with* variants.
+Shop page
+=========
 
-.. note::
-   - To allow **wishlists**, the option must be enabled in :menuselection:`Website --> Configuration
-     --> Settings --> Shop - Products`;
-   - To access the :guilabel:`Variants` options, the :doc:`Product Variants
-     <../../sales/sales/products_prices/products/variants>` option must first be enabled under
-     :menuselection:`Website --> Configuration --> Settings --> Shop - Products`.
+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:`Customize` tab to change the page layout or add features:
 
-Layout
-------
+- :guilabel:`Layout`: Select :guilabel:`Grid` or :guilabel:`List`.
 
-Within the same :guilabel:`Customize` tab as the :ref:`functions <ecommerce-functions>`, the layout
-configuration can be changed according to your needs.
+   - :guilabel:`Size`: Set the number of products displayed per page and line.
+   - :guilabel:`Style`: Select :guilabel:`Default`, :guilabel:`Cards`, :guilabel:`Thumbnails`, or
+     :guilabel:`Grid`.
+   - :guilabel:`Image Size`: Choose the aspect ratio for the product images:
+     :guilabel:`Landscape (4/3)`, :guilabel:`Default (1/1)`, :guilabel:`Portrait (4/5)`, or
+     :guilabel:`Vertical (2/3)`. You can also adjust the display by changing the :guilabel:`Fill`
+     options to best fit your design preferences.
 
-- :guilabel:`Images Width`: changes the width of the product images displayed on the page;
-- :guilabel:`Layout`: the :guilabel:`Carousel` layout displays a large, main image with smaller ones
-  underneath; whereas the :guilabel:`Grid` displays four images in a square layout (see pictures
-  below);
-- :guilabel:`Image Zoom`: choose which image zooms are available, either
-  :guilabel:`Pop-up on Click`, when hovering over the image (:guilabel:`Magnifier on hover`), on
-  :guilabel:`Both`, or :guilabel:`None`;
-- :guilabel:`Thumbnails`: decide how the thumbnails should be aligned, either **vertically**
-  (:guilabel:`Left`), or **horizontally** (:guilabel:`Right`);
-- :guilabel:`Main Image`: click :guilabel:`Replace` to change the product's main image;
-- :guilabel:`Extra Images`: click :guilabel:`Add` or :guilabel:`Remove all` to add or remove extra
-  product images. You can also add images and videos via **URL**.
+- :guilabel:`Search Bar`: Toggle the switch to display a search bar at the top of the products
+   page.
 
-.. note::
-   Images must either be in PNG or JPG format. To trigger the zoom, the image has to be bigger than
-   1024x1024.
+- :guilabel:`Prod. Desc.`: Toggle the switch to display the product description below the product's
+  name.
 
-.. image:: products/products-layout.png
-   :align: center
-   :alt: Product images layout
+- :guilabel:`Categories`: display product categories on the :guilabel:`Left`, on the
+  :guilabel:`Top`, or both. If :guilabel:`Left` is selected, you can enable
+  :guilabel:`Collapse Categories` to make the category menu collapsible.
 
-Add content
------------
+- :guilabel:`Datepicker`: Toggle the switch to display a date range calendar to check the
+  availability of rental products over a specific period. The
+  :doc:`Rental app <../../sales/rental>` must be installed to use this feature.
 
-You can use **building blocks** (:menuselection:`Edit --> Blocks`) to add content to your product
-page. These blocks can be used to add extra text and picture galleries, features such as
-:guilabel:`Call to Actions`, :guilabel:`Comparisons`, etc.
+- :guilabel:`Attributes`: Show product attributes on the :guilabel:`Left` and/or display a
+  :icon:`fa-sliders` (:guilabel:`dropdown toggle`) icon at the :guilabel:`Top` allowing customers to
+  filter products based on their attributes.
 
-Depending on *where* you drop the **building block**, it may be available either on the product page
-*only*, or on the *whole* website. **Building blocks** dropped at the very top or very bottom of the
-page are available on the *whole* website, where **building blocks** put underneath the product
-description are only displayed on the *product* page *(see image below)*.
+  - :guilabel:`Price Filter`: Toggle the switch to display a :guilabel:`Price Range` bar, which
+    allows customers to filter products according to a specific price range by dragging adjustable
+    handles.
+  - :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 by going to the
+    :guilabel:`Tags` section in the left column.
 
-.. image:: products/products-blocks.png
-   :align: center
-   :alt: Building blocks on product page
+- :guilabel:`Top Bar`: Select :guilabel:`Sort By` to display a dropdown list in the top bar for
+  sorting products and/or :guilabel:`Layout` to allow customers to switch to the grid or list view
+  using the related icons.
 
-Download link
+- :guilabel:`Default Sort`: Choose how products are sorted by default: :guilabel:`Featured`,
+  :guilabel:`Newest Arrivals`, :guilabel:`Name (A-Z)`, :guilabel:`Price - Low to High`, or
+  :guilabel:`Price - High to Low`.
+
+- :guilabel:`Buttons`:
+
+  - Select the :icon:`fa-shopping-cart` (:guilabel:`Shopping cart`) option to display an
+    :icon:`fa-shopping-cart` (:guilabel:`Add to cart`) icon on each product's image, which takes the
+    customer to the checkout page.
+
+  - Select the :icon:`fa-heart-o` (:guilabel:`Wishlist`) option to display an
+    :icon:`fa-shopping-cart` (:guilabel:`Add to wishlist`) icon on each product's image allowing
+    logged-in customers to save products to a wishlist.
+
+  - Select the :icon:`fa-exchange` (:guilabel:`Compare`) option to display the :icon:`fa-exchange`
+    (:guilabel:`Compare`) icon on each product's image allowing customers to :ref:`compare products
+    <ecommerce/products/product-comparison>` based on their attributes.
+
+.. tip::
+   To feature a product, go to the :ref:`product form <ecommerce/products/product-form>` and click
+   the :icon:`fa-star-o` (:guilabel:`Favorite`) icon next to the product's name.
+
+.. _ecommerce/products/product-page:
+
+Product page
+============
+
+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/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 -->
+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.
+
+.. tip::
+   Click the :guilabel:`Go to Website` smart button to return to the frontend product's page.
+
+.. _ecommerce/products/customization:
+
+Customization
 -------------
 
-To add a downloadable file (ex.: user's manual, notice of use, etc.) on the product page, drag and
-drop a :guilabel:`Text` block from :menuselection:`Edit --> Blocks` on the page. Once placed, click
-within the :guilabel:`Text` block, and under the :guilabel:`Inline Text` section, select either
-:menuselection:`Insert Media --> Documents` or :guilabel:`Insert or edit link` and enter the URL in
-the :guilabel:`Your URL` field.
+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>`.
+
+.. 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.
+
+Go to 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
+  product page.
+
+- :guilabel:`Customers`:
+
+   - :guilabel:`Rating`: Allow logged-in portal users to submit product reviews by clicking the
+     stars below the product's name and sharing their experience in the :guilabel:`Customer Reviews`
+     section at the bottom. Reviews are visible from the product page using the :icon:`fa-plus`
+     (:guilabel:`plus`) icon next to the :guilabel:`Customer Reviews` heading or from the product
+     form's chatter. To restrict visibility to internal employees, toggle the :guilabel:`Public`
+     switch next to the review comment.
+   - :guilabel:`Share`: Add social media and email icon buttons allowing customers to share the
+     product through those channels.
+
+- :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
+  :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:`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.
+
+- :guilabel:`Cart`:
+
+   - :guilabel:`Buy Now`: Add a :icon:`fa-bolt` :guilabel:`Buy Now` option to take the customer to
+     the checkout page.
+   - :guilabel:`Wishlist`: Add an :icon:`fa-heart-o` :guilabel:`Add to wishlist` option allowing
+     logged-in customers to save products in a wishlist.
+   - :guilabel:`Compare`: Add a :icon:`fa-exchange` :guilabel:`Compare` option, allowing customers
+     to :ref:`compare products <ecommerce/products/product-comparison>` based on their attributes.
+
+- :guilabel:`Specification`: Select :guilabel:`Bottom of Page` to display a detailed list of the
+  attributes and their values available for the product. This option only works for products with
+  :ref:`variants <ecommerce/products/product-variants>` if the
+  :ref:`Product comparison tool <ecommerce/products/product-comparison>` is enabled in the Website
+  :guilabel:`Settings`.
 
 .. note::
-   The difference with :ref:`digital files <ecommerce-digital-file>` is that digital files can only
-   be downloaded *after* checkout.
+   - :guilabel:`Variants`, :icon:`fa-heart-o` :guilabel:`Wishlist`, and :icon:`fa-exchange`
+     :guilabel:`Compare` options must be enabled by going to
+     :menuselection:`Website --> Configuration --> Settings`, in the :guilabel:`Shop - Products`
+     section.
+   - Enabled functions apply to all product pages.
+   - Products with single values for their attributes do not generate variants but are still
+     displayed in the :guilabel:`Product Specifications`.
 
-.. image:: products/products-media.png
-   :align: center
-   :alt: Media and link buttons
+.. _ecommerce/products/image-customization:
 
-.. _ecommerce-digital-file:
+Image customization
+-------------------
 
-Digital files
--------------
+To customize the images available on the product page, go to the :guilabel:`Customize` tab:
 
-Should your product be sold with a certificate, manual user, or any other relevant document, it is
-possible to add a download link for customers at the end of the checkout. To do that, first enable
-:guilabel:`Digital Content` under :menuselection:`Website --> Configuration --> Settings --> Shop -
-Checkout Process`. Then, on the **product's template**, click on :menuselection:`More --> Digital
-Files` and :guilabel:`Create` a new file.
-
-.. image:: products/products-digital-files.png
-   :align: center
-   :alt: Digital Files menu
-
-For the configuration:
-
-- :guilabel:`Name`: the name of your file;
-- :guilabel:`Type:` select if it is either a **file** or a **URL**. Accordingly, you either have a
-  :guilabel:`File Content (base64)` field to upload your file, or a :guilabel:`URL` field to enter
-  your URL.
-- :guilabel:`Website`: the website on which that file is *available*. If you want it available for
-  *all* websites, leave it empty.
-
-The file is then available after checkout in the :guilabel:`Sales Orders` section, found on the
-customer's portal.
-
-Product configuration
-=====================
-
-Multiple languages
-------------------
-
-If multiple languages are available on your website and you wish to have the product's information
-translated, it is necessary to encode this translated information in the **product's template**.
-Fields with multiple languages available are identifiable by their abbreviation language (ex.
-:abbr:`EN (English)`) next to their field.
-
-.. image:: products/products-field-translation.png
-   :align: center
-   :alt: Field translation
-
-The **eCommerce-related** fields to translate are:
-
-- :guilabel:`Product name`;
-- :guilabel:`Out-of-Stock Message` (under the :guilabel:`Sales` tab);
-- :guilabel:`Sales Description` (under the :guilabel:`Sales` tab);
+- :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:`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.
 
 .. note::
-   Having untranslated content on a web page may be detrimental to the user experience and
-   :doc:`SEO <../../websites/website/pages/seo>`.
+   Images must be in PNG or JPG format and with a minimum size of 1024x1024 to trigger the zoom.
+
+.. _ecommerce/products/product-variants:
+
+Product variants
+================
+
+:doc:`Product variants <../../sales/sales/products_prices/products/variants>` are different versions
+of the same product, such as various colors or materials, with potential differences in price and
+availability.
+
+To configure product variants for a product:
+
+#. Go to :menuselection:`Website --> Configuration --> Settings`.
+#. 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,
+   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,
+go to :menuselection:`Website --> eCommerce --> Attributes`, click on the attribute, and select
+:guilabel:`Visible` or :guilabel:`Hidden` in the :guilabel:`eCommerce Filter Visibility` field.
+
+.. tip::
+   - To display the product attributes on :ref:`the main Shop page <ecommerce/products/shop-page>`,
+     set the :guilabel:`Attributes` feature to :guilabel:`Left` using the website editor.
+   - To group attributes under the same section when
+     :ref:`comparing products <ecommerce/products/product-comparison>`, go to the
+     :guilabel:`eCommerce Category` field and either select an :doc:`existing category or create a
+     new one <../../websites/ecommerce/products>`.
+
 .. note::
-   To check the language(s) of your website, go to :menuselection:`Website --> Configuration -->
-   Settings --> Website Info section`.
+   Two attribute values are needed to make the filter visible.
 
 .. seealso::
-   - :doc:`../../websites/website/pages/seo`
+   :doc:`Product variants <../../sales/sales/products_prices/products/variants>`
+
+.. _ecommerce/products/digital-files:
+
+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>`.
+
+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
+directly, or for additional options, click :guilabel:`New`, then :guilabel:`Upload your file`.
+
+.. tip::
+   - You can link a URL instead of a digital file. To do so, click :guilabel:`New`, go to the
+     :guilabel:`Type` field, and select :guilabel:`URL`.
+   - To edit an existing file, click the :icon:`fa-ellipsis-v` (:guilabel:`dropdown menu`) in the
+     top-right corner of the document card and click :guilabel:`Edit`.
+
+.. _ecommerce-products-digital-files-before-payment:
+
+Digital files available before payment
+--------------------------------------
+
+To make the file available on the product page (before payment), leave the :guilabel:`Visibility`
+field blank and toggle the :guilabel:`Show on product page` switch.
+
+.. image:: products/digital-files.png
+   :alt: digital file available before payment on the  product page
+
+.. _ecommerce-products-digital-files-after-payment:
+
+Digital files available after payment
+-------------------------------------
+
+To make the file available (after payment), set the :guilabel:`Visibility` field to
+:guilabel:`Confirmed order` and turn off the :guilabel:`Show on product page` switch.
+
+.. _ecommerce/products/translation:
+
+Translation
+===========
+
+If multiple languages are available on your website, you can translate a product's information
+directly on the :ref:`product form <ecommerce/products/product-form>`. Fields that support multiple
+languages are identifiable by their abbreviation language (e.g., EN) next to their field.
+
+The eCommerce-related fields to translate are:
+
+- :guilabel:`Product name`.
+- :guilabel:`Out-of-Stock Message` (under the :guilabel:`Sales` tab).
+- :guilabel:`Sales Description` (under the :guilabel:`Sales` tab).
+
+.. note::
+   - Having untranslated content on a web page may be detrimental to the user experience and
+     :doc:`SEO <../../websites/website/pages/seo>`. You can use the
+     :doc:`Translate <../website/configuration/translate>` feature to translate the page's content.
+   - To check the language(s) of your website, go to :menuselection:`Website --> Configuration -->
+     Settings` and go to the :guilabel:`Website Info` section.
+
+.. _ecommerce/products/website-availability:
 
 Website availability
 --------------------
 
-A product can be set available on either *one* or *all* websites, but it is not possible to select
-*some* websites and not others. To define a product's availability, go to :menuselection:`Website
---> eCommerce --> Products`, select your product, and in the :guilabel:`Sales` tab, click the
-:guilabel:`Website` you wish the product to be available on. Leave the field empty for the products
-to be available on *all* websites.
+To set the product's website availability, navigate to the :ref:`product form
+<ecommerce/products/product-form>`, go to the :guilabel:`Sales` tab, and in the
+:guilabel:`eCommerce shop` section, select the :guilabel:`Website` you wish the product to be
+available on. Leave the field blank to make the product available on *all* websites.
+
+.. note::
+   You can make a product available on either *one* website or *all* websites, but selecting only
+   *some* websites is not possible.
+
+.. _ecommerce/products/stock-management:
 
 Stock management
 ================
 
-Under the :menuselection:`Website --> Configuration --> Settings --> Shop - Products`, you can
-enable and configure inventory management options.
+To enable and configure inventory management options, go to :menuselection:`Website -->
+Configuration --> Settings`, scroll down to the :guilabel:`Shop - Products` section and the
+:guilabel:`Inventory Defaults` sub-section.
 
 .. important::
-   To display the stock level on the product page, the :guilabel:`Product Type` on the **product's
-   form** must be set to :guilabel:`Storable` (only available when the **Inventory** app is
-   installed).
+   - The **Inventory** app must be installed to see the inventory management options.
+   - To display the stock level on the product page, the :guilabel:`Product Type` field must be set
+     to :guilabel:`Storable` in the :ref:`product form <ecommerce/products/product-form>`.
 
 Inventory
 ---------
 
-In the :guilabel:`Inventory Defaults` sub-section, you can select the eCommerce selling strategy of
-products:
+In the :guilabel:`Inventory Defaults` sub-section, fill in those fields:
 
-- :guilabel:`Warehouse`: if you have multiple warehouses, you can define the warehouse associated to
-  your website. If you have multiple websites, you can select a different one per website;
-- :guilabel:`Out-of-Stock (Continue Selling)`: enabling it allows customers to continue placing
-  orders even when the product is **out-of-stock**.
-  Leave it  unchecked to **prevent orders**;
-- :guilabel:`Show Available Qty`: enabling it displays the available quantity left under a specified
-  threshold on the product page. The available quantity is calculated based on the 'On hand'
+- :doc:`Warehouse <../../inventory_and_mrp/inventory/warehouses_storage/inventory_management/warehouses>`.
+- :guilabel:`Out-of-Stock`: Enable :guilabel:`Continue Selling` to allow customers to place orders
+  even when the product is **out of stock**. Leave the box unchecked to **prevent orders**.
+- :guilabel:`Show Available Qty`: Displays the available quantity left under a specified threshold
+  on the product page. The available quantity is calculated based on the :guilabel:`On hand`
   quantity minus the quantity already reserved for outgoing transfers.
 
-.. seealso::
-   :ref:`Allow only selected customers to buy <cart/prevent-sale>`
-
-Selling as kit
---------------
-
-If you are selling non-prepackaged kits (i.e., the kits are made of individual products), we
-recommend you read the related documentation to keep track of your stock.
-
-.. seealso::
-   :doc:`../../inventory_and_mrp/manufacturing/advanced_configuration/kit_shipping`
+.. _ecommerce/products/product-comparison:
 
 Product comparison
 ==================
 
-You can enable a **product comparison tool** for your eCommerce by going to
-:menuselection:`Website --> Configuration --> Settings --> Shop - Products`, and ticking
-:guilabel:`Product Comparison Tool`. This tool allows to save products' **specifications** and
-compare them against each other on a single page.
+To allow website visitors to compare products based on their attributes, go to
+:menuselection:`Website --> Configuration --> Settings`, scroll down to the
+:guilabel:`Shop - Products` section, and enable :guilabel:`Product Comparison Tool`.
 
-On the product page, scroll down to the :guilabel:`Specifications` section and click
-:guilabel:`Compare`. Repeat the same process for all products you wish to compare. Then, click the
-:guilabel:`Compare` button of the pop-up window at the bottom of the page to reach the comparison
-summary.
-
-.. note::
-   The :guilabel:`Product Comparison Tool` can only be used if :doc:`attributes <products/variants>`
-   are set on the **product's template**.
+The :icon:`fa-exchange` (:guilabel:`Compare`) icon is now available on each product card on the main
+shop page when customers hover their mouse over it. To compare products, customers can click the
+:icon:`fa-exchange` (:guilabel:`Compare`) option on the products they want to compare, then click
+:icon:`fa-exchange` :guilabel:`Compare` in the pop-up window at the bottom of the page to reach the
+comparison summary.
 
 .. image:: products/products-compare.png
-   :align: center
    :alt: Product comparison window
 
+.. note::
+   - The :guilabel:`Product Comparison Tool` is only available for products with
+     :ref:`attributes <ecommerce/products/product-variants>`.
+   - Selecting the :icon:`fa-exchange` (:guilabel:`Compare`) option from a product page is also
+     possible.
+
 .. toctree::
    :titlesonly:
 
    products/catalog
-   products/variants
    products/price_management
    products/cross_upselling

content/applications/websites/ecommerce/products/price_management.rst

@@ -20,6 +20,8 @@ To add a tax on a product, you can either set a tax in the :guilabel:`Customer T
    - :doc:`/applications/finance/accounting/taxes/avatax`
    - :doc:`/applications/finance/accounting/taxes/fiscal_positions`
 
+.. _ecommerce-price-management-tax-display:
+
 Tax display
 -----------
 

content/applications/websites/ecommerce/products/variants.rst

@@ -1,86 +0,0 @@
-================
-Product variants
-================
-
-Product variants are variations, such as different colors, materials, etc., of the same product.
-These variations can differ in price and availability from the product. Product variants can either
-be :doc:`created <../../../sales/sales/products_prices/products/variants>` or
-:doc:`imported <../../../sales/sales/products_prices/products/import>`.
-
-To use product variants, enable them under :menuselection:`Website --> Configuration --> Settings`,
-in the :guilabel:`Shop - Products` section.
-
-.. seealso::
-   - :doc:`../products`
-   - :doc:`../../../sales/sales/products_prices/products/variants`
-   - :doc:`../../../sales/sales/products_prices/products/import`
-
-Product configurator
-====================
-
-Adding attributes and values to a product template allows the enabling of the **product
-configurator** on the product page. Customers use it to configure and select the product variant of
-their choice; or in the case of multiple attributes, combine those to create a specific variant.
-
-.. image:: variants/variants-configurator.png
-   :align: center
-   :alt: Variants configurator
-
-The **display type** of each attribute used in the product configurator can be edited through the
-**website builder** by clicking :menuselection:`Edit --> Customize` on the product page, and then
-clicking on one of the attributes. You can then select between four options:
-
-- :guilabel:`Radio`
-- :guilabel:`Pills`
-- :guilabel:`Select`
-- :guilabel:`Color`
-
-.. image:: variants/variants-display-type.png
-   :align: center
-   :alt: Display type options for attributes
-
-.. _variants-configurator-backend:
-
-Alternatively, the **display type** can be edited through :menuselection:`Website --> eCommerce -->
-Attributes`, selecting an **attribute**, and then choosing a :guilabel:`Display Type`; or through
-the **product template** by going to :menuselection:`eCommerce --> Products`, selecting a product,
-and then clicking :guilabel:`Attributes and Variants`.
-
-.. tip::
-   Specific combinations of values can be excluded from the product configurator. This way,
-   customers are unable to select the excluded combination of values. To do so, go to
-   :menuselection:`Website --> eCommerce --> Products`, select a product, and go to
-   :guilabel:`Attributes and Variants`. Then, click on an **attribute**, select a **value**, and in
-   the :guilabel:`Exclude for` section, select a :guilabel:`Product Template` and the
-   :guilabel:`Attribute Values` to exclude.
-
-Product specifications
-======================
-
-Values used for each attribute are displayed as a **specification list** at the bottom of the
-product page. To be visible, the **specification list** must first be enabled on the product page by
-going to :menuselection:`Edit --> Customize` and selecting a placement for the field
-:guilabel:`Specification`.
-
-.. image:: variants/variants-specifications.png
-   :align: center
-   :alt: Specifications list on the product page
-
-.. tip::
-   The product **specification list** can also be used on products without variants. For that, make
-   sure to have no values combination. Products with single values for their attributes do not
-   generate variants.
-
-Filter catalog by attributes
-============================
-
-Customers **can** filter the **catalog** based on product attributes and values, allowing them to
-:ref:`filter <ecommerce-browsing>` the catalog based only on the attribute(s) of their choice.
-
-To enable **attributes filtering**, go to :menuselection:`Edit --> Customize` from your **main shop
-page** and click on one of the :guilabel:`Categories` in the left column. Here, enable either
-:guilabel:`Left`, :guilabel:`Top`, or **both**, in the :guilabel:`Attributes` field.
-
-.. image:: variants/variants-categories.png
-   :align: center
-   :alt: Categories buttons