[IMP] website/ecommerce: update catalog page

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

@@ -28,12 +28,12 @@ within the Odoo *Sales* application.
    other similar records in Odoo.
 
 .. seealso::
-   :ref:`ecommerce/products/product-variants`
+   :ref:`Product variants in the eCommerce shop <ecommerce/categories_variants/product-variants>`
 
 Configuration
 =============
 
-To use product variants, the *Variants* setting **must** be activated in the Odoo *Sales*
+To use product variants, the :guilabel:`Variants` setting **must** be activated in the Odoo *Sales*
 application.
 
 To do that, go to :menuselection:`Sales app --> Configuration --> Settings`, and locate the
@@ -47,6 +47,8 @@ In that section, check the box to enable the :guilabel:`Variants` feature.
 
 Then, click :guilabel:`Save` at the top of the :guilabel:`Settings` page.
 
+.. _products/variants/attributes:
+
 Attributes
 ==========
 
@@ -61,7 +63,6 @@ To create a new attribute from the :guilabel:`Attributes` page, click :guilabel:
 reveals a blank attributes form that can be customized and configured in a number of ways.
 
 .. image:: variants/attribute-creation.png
-   :align: center
    :alt: A blank attribute creation form in the Odoo Sales application.
 
 First, create an :guilabel:`Attribute Name`, such as `Color` or `Size`.
@@ -70,71 +71,73 @@ Next, select one of the options from the :guilabel:`Display Type` field. The :gu
 Type` determines how this product is shown on the online store, *Point of Sale* dashboard, and
 *Product Configurator*.
 
-The :guilabel:`Display Type` options are:
+The following :guilabel:`Display Type` options are available.
 
-- :guilabel:`Pills`: options appear as selectable buttons on the product page of the online store.
-- :guilabel:`Color`: options appear as small, colored squares, which reflect any HTML color codes
-- :guilabel:`Radio`: options appear in a bullet-style list on the product page of the online store.
-- :guilabel:`Select`: options appear in a drop-down menu on the product page of the online store.
-  set, on the product page of the online store.
-- :guilabel:`Multi-checkbox (option)`: options appear as selectable checkboxes on the product page
-  of the online store. This allows customers to choose options for themselves and is good choice for
-  highly customizable products.
+.. tabs::
 
-.. image:: variants/display-types.png
-   :align: center
-   :alt: Display Types on Product Configurator on the online store in Odoo.
+   .. tab:: :guilabel:`Pills`
+
+      Options appear as selectable buttons.
+
+      .. image:: variants/pills-display-type.png
+         :alt: Pills display type
+
+   .. tab:: :guilabel:`Color`
+
+      Options appear as small, colored circles, which reflect any HTML color codes.
+
+      .. image:: variants/color-display-type.png
+         :alt: Pills display type
+
+   .. tab:: :guilabel:`Radio`
+
+      Options appear in a bullet-style list.
+
+      .. image:: variants/radio-display-type.png
+         :alt: Pills display type
+
+   .. tab:: :guilabel:`Select`
+
+      Options appear in a drop-down menu.
+
+      .. image:: variants/select-display-type.png
+         :alt: Pills display type
+
+   .. tab:: :guilabel:`Image`
 
-The :guilabel:`Variant Creation Mode` field informs Odoo when to automatically create a new variant
+      Options appear as images.
+
+      .. image:: variants/image-display-type.png
+         :alt: Pills display type
+
+   .. tab:: :guilabel:`Multi-checkbox`
+
+      Options appear as selectable checkboxes. This allows customers to choose options for
+      themselves and is good choice for highly customizable products
+
+      .. image:: variants/multi-checkbox-display-type.png
+         :alt: Pills display type
+
+The :guilabel:`Variant Creation` field informs Odoo when to automatically create a new variant
 once an attribute is added to a product.
 
 .. note::
-   The :guilabel:`Variant Creation Mode` field **must** be set to :guilabel:`Never (option)` in
-   order for the :guilabel:`Multi-checkbox (option)` to work properly as the :guilabel:`Display
+   The :guilabel:`Variant Creation` field **must** be set to :guilabel:`Never` in
+   order for the :guilabel:`Multi-checkbox` to work properly as the :guilabel:`Display
    Type`.
 
 - :guilabel:`Instantly`: creates all possible variants as soon as attributes and values are added to
   a product template.
 - :guilabel:`Dynamically`: creates variants **only** when corresponding attributes and values are
   added to a sales order.
-- :guilabel:`Never (option)`: never automatically creates variants.
+- :guilabel:`Never`: never automatically creates variants.
 
 .. warning::
-   Once added to a product, an attribute's :guilabel:`Variants Creation Mode` cannot be edited.
-
-The :guilabel:`eCommerce Filter Visibility` field determines whether or not these attribute options
-are visible to the customer on the front-end, as they shop on the online store.
-
-- :guilabel:`Visible`: the attribute values are visible to customers on the front-end.
-- :guilabel:`Hidden`: the attribute values are hidden from customers on the front-end.
-
-Lastly, in the optional :guilabel:`eCommerce Category` field, select a category from a drop-down
-menu to group similar attributes under the same section for added specificity and organization.
-
-.. note::
-   To view the details related to the attribute category selected, click the internal link
-   :icon:`fa-arrow-right` :guilabel:`(right arrow)` icon to the far-right of the
-   :guilabel:`eCommerce Category` field, once an option has been selected. Doing so reveals that
-   attribute category's detail form.
-
-   .. image:: variants/attribute-category-internal-link.png
-      :align: center
-      :alt: A standard attribute category detail page accessible via its internal link arrow icon.
-
-   Here, the :guilabel:`Category Name` and :guilabel:`Sequence` is displayed at the top. Followed by
-   :guilabel:`Related Attributes` associated with the category. These attributes can be
-   dragged-and-dropped into a desirable order of priority.
-
-   Attributes can be directly added to the category, as well, by clicking :guilabel:`Add a line`.
+   Once added to a product, an attribute's :guilabel:`Variants Creation` mode cannot be edited.
 
 .. tip::
-   To create an attribute category directly from this field, start typing the name of the new
-   category, then select either :guilabel:`Create` or :guilabel:`Create and edit...` from the
-   drop-down menu that appears.
-
-   Clicking :guilabel:`Create` creates the category, which can be modified later. Clicking
-   :guilabel:`Create and edit...` creates the category and reveals a :guilabel:`Create Category`
-   pop-up window, in which the new attribute category can be configured and customized.
+   Configure some :ref:`ecommerce-specific <ecommerce/categories_variants/attributes>`
+   settings for attributes.
 
 Attribute values
 ----------------
@@ -170,12 +173,12 @@ Or, choose a specific color by clicking the *dropper* icon, and selecting a desi
 currently clickable on the screen.
 
 Businesses can attach images to product variant attribute values for customers to view on an
-eCommerce webite. To do so, click the :icon:`fa-camera` :guilabel:`(camera)` icon, then click the
+eCommerce website. 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 image
-will appear as a color option on the ecommerce product page.
+will appear as a color option for the relevant product.
 
-.. image:: variants/ecommerce-pattern-option.png
-   :alt: Pattern as color option on the ecommerce page.
+.. image:: variants/pattern-display.png
+   :alt: Pattern as color option.
 
 .. tip::
    Attributes can also be created directly from the product template by adding a new line and typing
@@ -258,6 +261,8 @@ In the :guilabel:`Exclude for` field, different :guilabel:`Product Templates` an
 :guilabel:`Attribute Values` can be added. When added, this specific attribute value will be
 excluded from those specific products.
 
+.. _products/variants/variants-smart-button:
+
 Variants smart button
 ---------------------
 

content/applications/websites/ecommerce/google_merchant_center.rst

@@ -70,7 +70,7 @@ Linking Odoo to GMC
 #. Click :guilabel:`Manage feeds`.
 #. In the :guilabel:`Product Feeds` pop-up window, select a :ref:`pricelist
    <ecommerce/prices/pricelists>`, a :ref:`language <language/add>` and :ref:`categories
-   <ecommerce/catalog/categories>`, and :guilabel:`Save`.
+   <ecommerce/categories_variants/categories>`, and :guilabel:`Save`.
 
    .. note::
       You must first enable the corresponding :doc:`language </applications/general/users/language>`

content/applications/websites/ecommerce/products.rst

@@ -6,9 +6,8 @@ Products
 
 **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, and :ref:`managing stock
+allows you to add :ref:`digital files <ecommerce/products/digital-files>`, :ref:`translate
+<ecommerce/products/translation>` the product page content, and :ref:`manage the stock
 <ecommerce/products/stock-management>`.
 
 .. _ecommerce/products/add-products:
@@ -74,9 +73,11 @@ Product information
 
 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
+by adding :ref:`variants <ecommerce/categories_variants/product-variants>`, :ref:`digital documents
 <ecommerce/products/digital-files>`, or :ref:`translating <ecommerce/products/translation>` content.
 
+.. _ecommerce/products/description:
+
 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
@@ -124,7 +125,7 @@ Use the :guilabel:`Customize` tab to modify the page layout or add features:
   :ref:`VAT included or excluded <ecommerce/prices/taxes>`.
 
 - :guilabel:`Variants`: Show all possible product :ref:`variants
-  <ecommerce/products/product-variants>` vertically as a :guilabel:`Products List`
+  <ecommerce/categories_variants/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
@@ -143,7 +144,7 @@ Use the :guilabel:`Customize` tab to modify the page layout or add features:
 
 - :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:`variants <ecommerce/categories_variants/product-variants>` if the
   :ref:`Product comparison tool <ecommerce/products/additional_features/product-comparison>` is
   enabled in the Website :guilabel:`Settings`.
 
@@ -185,64 +186,6 @@ and select the relevant media. In the :guilabel:`Customize` tab, use the followi
 .. note::
    Images must be in PNG or JPG format and with a minimum size of 1024x1024 to trigger the zoom.
 
-.. _ecommerce/products/products-block:
-
-Products block
-==============
-
-The :guilabel:`Products` :doc:`building block <../website/web_design/building_blocks>` is used to
-display a selection of products sold on your website.
-
-.. image:: products/products-block.png
-   :alt: Example of a products block
-
-By default, the block displays the :guilabel:`Newest Products`. To change which products are shown,
-go to the :guilabel:`Customize` tab's :guilabel:`Products` section and set the :guilabel:`Filter`
-field to :guilabel:`Recently Sold Products` or :guilabel:`Recently Viewed Products`.
-
-In addition, it is possible to display products from a specific category only using the
-:guilabel:`Category` field.
-
-You can also filter products by :guilabel:`Tags`, include :guilabel:`Variants`, and adjust the
-display by selecting a different :guilabel:`Template`.
-
-.. _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 in the :doc:`product catalog <products/catalog>`,
-     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/additional_features/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::
-   Two attribute values are needed to make the filter visible.
-
-.. seealso::
-   :doc:`Product variants <../../sales/sales/products_prices/products/variants>`
-
 .. _ecommerce/products/digital-files:
 
 Digital files
@@ -315,8 +258,12 @@ To set the product's website availability, navigate to the :ref:`product form
 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.
+   - You can make a product available on either *one* website or *all* websites, but selecting only
+     *some* websites is not possible. To use it on *several* specific websites, but not all of your
+     websites, you must duplicate the product for each website on which you want to sell it, and
+     assign the relevant website to each duplicate.
+   - Enable the :guilabel:`Is Published` toggle to make sure the product is available for website
+     visitors.
 
 .. _ecommerce/products/stock-management:
 
@@ -351,3 +298,4 @@ In the :guilabel:`Inventory Defaults` sub-section, fill in those fields:
    products/prices
    products/cross_upselling
    products/additional_features
+   products/categories_variants

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

@@ -13,7 +13,7 @@ Product comparison
 ==================
 
 The :icon:`fa-exchange` (:guilabel:`Add to compare`) button allows website visitors to compare
-products based on their :ref:`attributes <ecommerce/products/product-variants>`. Customers can
+products based on their :ref:`attributes <ecommerce/categories_variants/attributes>`. Customers can
 click this button to select the products they wish to compare, then click :guilabel:`Compare` in
 the pop-up window at the bottom of the page to see the comparison summary.
 
@@ -139,7 +139,7 @@ the ecommerce products.
           :alt: Create a new ribbon in the website editor
 
    - It is also possible to add ribbons for specific :ref:`product variants
-     <ecommerce/products/product-variants>`. To do so, go to :menuselection:`Website -->
+     <ecommerce/categories_variants/product-variants>`. To do so, go to :menuselection:`Website -->
      eCommerce --> Products` and select a product. Click the :guilabel:`Variants` smart button,
      choose a variant, and add a ribbon in the :guilabel:`Variant Ribbon` field of the
      :guilabel:`Sales` section.