[IMP] ecommerce: updated variants page

Previous page was mostly on the sales app. New page focuses on ecommerce
with :ref: to sales. Forward to master.

closes odoo/documentation#3299

Taskid: 3121379
Signed-off-by: Aarab Tom (toaa) <toaa@odoo.com>

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

@@ -1,110 +1,85 @@
-=======================
-Manage product variants
-=======================
+================
+Product variants
+================
 
-Product variants are used to offer variations of the same product to your customers on the product's
-page.
+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>`.
 
-Let's say one of your customers selects a T-shirt from your product catalog.
-
-Then, they choose the size and color they want. The various size and color combinations are known as
-product variants.
-
-Create attributes & variants
-============================
-
-In order to create various attributes and variants for your products, you first need to turn on
-*Variants* in :menuselection:`Sales --> Configuration --> Settings`.
-
-Then, select a product from the Products list (:menuselection:`Sales / Website --> Products -->
-Products`). When the product detail form opens, click on *Edit*, and go to the *Variants* tab.
-
-Here, you can add as many different attributes as you'd like by clicking on *Add a line*.
-
-These attributes appear as three different types:
-
-- Radio buttons
-- Color buttons
-- Drop-down menu
-
-Several variants appear as soon as there are two values for one attribute.
-
-Don't forget to hit *Save* once all variants have been entered.
-
-.. image:: variants/values.png
-   :align: center
-   :alt: ecommerce product variants values
-
-Edit variants
-=============
-
-After you hit *Save*, you are able to see all the variants from the product template detail form via
-the *Variants* smart button.
-
-.. image:: variants/smart-button.png
-   :align: center
-   :alt: ecommerce product variants smart button
-
-Clicking the *Variants* smart button takes you to the Product Variants page, where you can edit the
-following data for each specific variant:
-
-- Picture(s)
-- Internal Reference (SKU #)
-- Barcode
-- Volume
-- Weight
-- Cost
-
-.. note::
-   Both the Barcode and the Internal Reference are variant-specific. You need to populate them once
-   the variants are generated.
-
-Set specific prices per variant
-===============================
-
-You can set a specific public price per variant by clicking on *Configure Variants* in the product
-detail form (top-left corner). That takes you to the *Product Variant Values* page for that product.
-
-.. image:: variants/configure-variants.png
-   :align: center
-   :alt: ecommerce product variants configure variants
-
-To set a specific public price for a particular variant, simply click on the variant you want to
-modify, then click on *Edit*.
-
-The *Value Price Extra* field represents the monetary value that is added to the original product
-price whenever the corresponding attribute value is selected.
-
-.. image:: variants/value-price-extra.png
-   :align: center
-   :alt: ecommerce value price extra
-
-This is how the *Value Price Extra* looks on your website:
-
-.. image:: variants/value-price-extra-frontend.png
-   :align: center
-   :alt: ecommerce value price extra on the frontend
-
-.. note::
-   Pricelist formulas let you set advanced price computation methods for product variants. See
-   :doc:`../maximizing_revenue/pricing`.
-
-Disable/archive variants
-========================
-
-You can disable/archive specific variants so they are no longer available in quotes or on your
-website (not existing in your stock, deprecated, etc.). Simply select *Archive* in their detail
-form. You can reactivate them the same way.
-
-.. image:: variants/archive.png
-   :align: center
-   :alt: ecommerce product variants archive
-
-To retrieve such items, hit *Archived* in the *Filters* category while searching the variants list.
-
-.. image:: variants/archive-search.png
-   :align: center
-   :alt: ecommerce product variants archive search
+To use product variants, enable them under :menuselection:`Website --> Configuration --> Settings`,
+in the :guilabel:`Shop - Products` section.
 
 .. seealso::
    - :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
+filter 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