[IMP] website/ecommerce: update catalog page

task-5136241

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 <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,71 @@ 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`
 
-The :guilabel:`Variant Creation Mode` field informs Odoo when to automatically create a new variant
+      Options appear as selectable buttons.
+
+      .. image:: variants/pills-display-type.png
+         :alt: Pills display type
+
+   .. tab:: :guilabel:`Color`
+
+      Options appear as small, colored circles; the colors can be defined using any HTML color code.
+
+      .. image:: variants/color-display-type.png
+         :alt: Pills display type
+
+   .. tab:: :guilabel:`Radio`
+
+      Options appear as radio buttons.
+
+      .. 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`
+
+      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 multiple options,
+      e.g., to add extras to food orders or highly customizable products.
+
+      .. image:: variants/multi-checkbox-display-type.png
+         :alt: Pills display type
+
+The :guilabel:`Variant Creation` field determines if/when a new variant is automatically created
 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
-   Type`.
+.. important::
+   If the attribute's :guilabel:`Display Type` is :guilabel:`Multi-checkbox`, you **must** set the
+   :guilabel:`Variant Creation` field to :guilabel:`Never`.
 
 - :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`: prevents autmatic creation of variants.
 
 .. warning::
-   Once added to a product, an attribute's :guilabel:`Variants Creation Mode` cannot be edited.
+   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`.
-
-.. 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.
+.. seealso::
+   :ref:`Ecommerce-specific settings for attributes <ecommerce/categories_variants/attributes>`
 
 Attribute values
 ----------------
@@ -170,12 +171,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 +259,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:
@@ -36,8 +35,10 @@ page. When you :guilabel:`Save`, the product page is automatically published.
      :guilabel:`Unpublished` to :guilabel:`Published`.
 
 .. seealso::
-   :doc:`Create new products using the Barcode Lookup database
+   - :doc:`Create new products using the Barcode Lookup database
      </applications/general/integrations/barcodelookup>`.
+   - :doc:`Configure the Gelato connector in Odoo to synchronize the product catalog and automate
+     order fulfilment with Gelato </applications/sales/sales/gelato>`.
 
 .. _ecommerce/products/import-products:
 
@@ -74,9 +75,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 +127,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 +146,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 +188,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 +260,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 sell the product on multiple specific websites without
+     making it available on all, **duplicate** the product for each website and assign the
+     corresponding website to each duplicate.
+   - Enable the :guilabel:`Is Published` toggle to make sure the product is available for website
+     visitors.
 
 .. _ecommerce/products/stock-management:
 
@@ -332,6 +281,14 @@ Configuration --> Settings`, scroll down to the :guilabel:`Shop - Products` sect
    - 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>`.
 
+.. note::
+   If a unique reference is needed for inventory management, install the :doc:`Manufacturing app
+   </applications/inventory_and_mrp/manufacturing>`, and create :doc:`Kit bills of materials
+   </applications/inventory_and_mrp/manufacturing/advanced_configuration/kit_shipping>`. Each
+   kit links its published "virtual" products to the main reference tracked in Inventory. This
+   ensures that any item sold on the website is converted into the corresponding stocked item in
+   the delivery order.
+
 Inventory
 ---------
 
@@ -351,3 +308,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.

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

@@ -1,208 +1,199 @@
-=======
-Catalog
-=======
+===============
+Product catalog
+===============
 
-The eCommerce catalog displays products for customers to browse. It is organized using product
-categories, available options, sorting, and navigation paths. Essentially, the eCommerce catalog
-is the shop page of your website.
+The eCommerce catalog displays products for customers to browse. It is organized using :ref:`product
+categories <ecommerce/categories_variants/categories>`, available :ref:`product variants
+<ecommerce/categories_variants/product-variants>`, sorting options, and navigation paths.
+Essentially, the eCommerce catalog is the shop page of your website.
 
-The product catalog includes a :ref:`top bar <ecommerce/catalog/top-bar>`, a :ref:`side panel
-<ecommerce/catalog/side-panel>`, and a :ref:`product listing area
-<ecommerce/catalog/product-listing>`. With Odoo, you can :ref:`customize the layout
-<ecommerce/catalog/customize-layout>`, and filter by :ref:`categories and attributes
-<ecommerce/catalog/categories>`.
+The product catalog features a :ref:`toolbar and some filters <ecommerce/catalog/toolbar-and-filters>`
+in the sidebar and/or top bar, along with a dedicated :ref:`product listing area
+<ecommerce/catalog/product-listing>`. Additionally, the shop and category pages' :ref:`layout
+<ecommerce/catalog/customize-layout>` as well as the :ref:`eCommerce footer
+<ecommerce/catalog/footer>` can be customized, and you can add :ref:`building blocks
+<ecommerce/catalog/catalog-blocks>` as needed.
 
-You can customize the shop page using the website editor. To access it, go to the shop page,
-click :guilabel:`Edit` in the upper-right corner, and navigate to the :guilabel:`Customize` tab.
+To customize the catalog, go to the shop page, click :guilabel:`Edit` in the upper-right corner,
+select the section you want to change, and navigate to the :guilabel:`Style` tab.
 
-.. _ecommerce/catalog/top-bar:
+.. _ecommerce/catalog/toolbar-and-filters:
 
-Top bar
-=======
+Toolbar and filters
+===================
 
-The top bar can include a search bar, a currency selector,
-:ref:`sort-by and display options <ecommerce/catalog/sort-by-and-display-option>`, and
-:ref:`category quick access <ecommerce/catalog/categories>`.
+The toolbar and sidebar provide advanced filtering tools to help customers
+search and navigate the product catalog using :ref:`categories <ecommerce/catalog/categories>` and
+:ref:`attributes <ecommerce/catalog/attributes>`.
 
-.. _ecommerce/catalog/sort-by-and-display-option:
+.. _ecommerce/catalog/categories:
 
-Sort-by search and display options
-----------------------------------
+Categories
+----------
 
-You can toggle the :guilabel:`Search Bar`, display :ref:`categories <ecommerce/catalog/categories>`
-and/or :ref:`attributes <ecommerce/catalog/attributes>`, and enable or disable the
-:guilabel:`Sort-By` as well as the :ref:`Layout <ecommerce/catalog/layout>` buttons in
-the :guilabel:`Top Bar`.
+To create a :ref:`category <ecommerce/categories_variants/categories>` quick access in the toolbar
+or general access in the sidebar, click the :guilabel:`Top` and/or :guilabel:`Sidebar` button next
+to :guilabel:`Categories`, and choose a :guilabel:`Style` for them. When the :guilabel:`Sidebar` is
+selected, the option :guilabel:`Collapse Category Recursive` appears, allowing you to collapse the
+category in the sidebar.
 
-The :guilabel:`Sort-by` button is toggled by default, and customers can choose between the
-following :guilabel:`Default Sort` options:
+.. image:: catalog/category-quick-access-top.png
+   :alt: Category quick access in the toolbar.
+
+.. note::
+   The category filters located in the sidebar are not affected by the :guilabel:`Filters` setting.
+
+.. _ecommerce/catalog/toolbar:
+
+Toolbar
+-------
+
+It is possible to display a search bar or sort-by options in the toolbar of the shop page by
+clicking the :guilabel:`Sort By` and/or :guilabel:`Search` buttons next to the :guilabel:`Toolbar`
+label. Toogle the :guilabel:`Floating` switch on to always display the search bar, the
+:ref:`pricelist selector <ecommerce/prices/pricelists>` (if any), and sort-by options at the botton
+of the window, even when scrolling, and select a :guilabel:`Default Sort` option:
 
-- :guilabel:`None`
 - :guilabel:`Featured`
 - :guilabel:`Newest Arrivals`
 - :guilabel:`Name (A-Z)`
 - :guilabel:`Price - Low to High`
 - :guilabel:`Price - High to Low`
 
-The default sort applies to *all* :ref:`categories <ecommerce/catalog/categories>`.
+.. tip::
+   - The default sort applies to *all* :ref:`categories <ecommerce/categories_variants/categories>`.
+   - If you do not want to display a toolbar or sidebar, disable all related options in the website
+     editor, and make sure to only assign one pricelist to the website.
+
+.. _ecommerce/catalog/filters:
+
+Filters
+-------
+
+Set the :guilabel:`Filters` field to:
+
+- :guilabel:`Sidebar`: to display filters in the side panel;
+- :guilabel:`Off-screen menu`: to display filters in a slide-out menu that opens when clicking
+  the :icon:`fa-sliders` :guilabel:`Filters` button;
+- :guilabel:`Hide`: to hide filters entirely.
+
+By default, two :guilabel:`Filters` are enabled:
+
+  - :guilabel:`Price`: Use 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:`Tags`: Toggle the switch to display product :guilabel:`Tags` on the shop page, and
+    allow customers to filter products using those tags by going to the
+    :guilabel:`Tags` section.
 
     .. tip::
-   If you don't want to display a top bar or :ref:`side panel <ecommerce/catalog/side-panel>`,
-   you can disable all related options in the website editor.
+       To create product tags on your e-commerce, go to :menuselection:`eCommerce --> Product Tags`,
+       and click :guilabel:`New`. Add a :guilabel:`Tag` name, toggle the :guilabel:`Visible to
+       customers` switch, and choose a :guilabel:`Color`. Optionally, add an image. Then go to the
+       product form, and assign the relevant tags where needed.
 
-.. _ecommerce/catalog/side-panel:
-
-Side panel
-==========
-
-The side panel provides advanced filtering tools to organize your product categories.
-To further :ref:`categorize <ecommerce/catalog/categories>` the shop page, you can activate
-various filters, such as the :ref:`attribute <ecommerce/catalog/attributes>` filter.
-
-You can also add a :guilabel:`Datepicker` option 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.
-
-It is also possible to toggle the :guilabel:`Collapsible sidebar` switch to make the side panel
-manually collapsible.
-
-.. tip::
-   To use a price range or tags filter, you have to enable :ref:`attributes
-   <ecommerce/catalog/attributes>` first.
-
-.. _ecommerce/catalog/categories:
-
-Product categorization in catalog
-=================================
-
-eCommerce categories are used to organize products into groups, making it easier for customers
-to browse the online store.
-
-To create eCommerce categories, go to :menuselection:`Website --> eCommerce -->
-eCommerce Categories`, and click :guilabel:`New`. On the category form, add a
-:guilabel:`Name`, optionally enter a :guilabel:`Parent Category`, and write a :guilabel:`Category
-Description`, if needed.
-
-To use eCommerce categories, go to :menuselection:`Website --> eCommerce --> Products`, select
-the product you wish to modify, go to the :guilabel:`Sales` tab, navigate to the
-:guilabel:`Ecommerce shop` section, and select the :guilabel:`Categories` it belongs to.
-
-.. note::
-   A single product can belong to multiple eCommerce categories.
-
-Once the categories are configured and assigned to the relevant products, go to the main shop page
-and open the website editor. In the :guilabel:`Categories` option, you can either enable
-a menu on the :guilabel:`Left`, i.e., in the :ref:`side panel <ecommerce/catalog/side-panel>`,
-or on the :guilabel:`Top`, i.e., in the :ref:`top bar <ecommerce/catalog/top-bar>`, or both.
-If you select the :guilabel:`Left` category, the option :guilabel:`Collapsible Category Recursive`
-appears, allowing you to collapse the category in the side panel.
-
-.. image:: catalog/catalog-panel-categories.png
-   :alt: Categories options for your eCommerce website
-
-.. seealso::
-   :doc:`../products`
+For :doc:`rental products <../../../sales/rental>`, you can also add a :guilabel:`Rental Date`
+option to display a date range calendar to check their availability over a specific period.
 
 .. _ecommerce/catalog/attributes:
 
 Attributes
-----------
+~~~~~~~~~~
 
-Attributes refer to characteristics of a product, such as the color or material, whereas
-variants are the different combinations of attributes. To configure attributes and variants, go to
-:menuselection:`Website --> eCommerce --> Products`, select a product, and click the
-:guilabel:`Attributes & Variants` tab. Add as many attributes as desired.
+When you offer :ref:`product variants <ecommerce/categories_variants/product-variants>` with
+different :ref:`attributes <ecommerce/categories_variants/attributes>`, those options appear
+in the sidebar or slide-out menu when filters are shown. The menu automatically adapts to the
+number of attribute sections:
+
+- **Up to 4 attributes**: all the attribute values are displayed.
+- **More than 4 attributes**: the sections are automatically collapsed.
+
+For :guilabel:`Radio` and :guilabel:`Select` :ref:`display types <products/variants/attributes>`,
+a :guilabel:`View More` button appears when there are more than **8** values, and a search field
+when the number of values exceeds **20**.
+
+.. note::
+   - For :guilabel:`Radio` and :guilabel:`Select` :ref:`display types
+     <products/variants/attributes>`, a :guilabel:`View More` button appears when there are more
+     than **8** values, and a search field when the number of values exceeds **20**.
+   - At least two attribute values are required for the filter to be visible.
+   - The attribute filters located in the sidebar or slide-out menu are affected by the
+     :guilabel:`Filters` setting.
 
 .. seealso::
-   :doc:`../../../sales/sales/products_prices/products/variants`
-
-.. image:: catalog/catalog-attributes.png
-   :alt: Attributes and variants of your product
-
-To enable attribute filtering, go to your main shop page, then open the website editor, and set
-the :guilabel:`Attributes` field to :guilabel:`Left` (:ref:`side panel
-<ecommerce/catalog/side-panel>`) and/or :guilabel:`Top` (:ref:`top bar
-<ecommerce/catalog/top-bar>`).
-
-.. tip::
-   When attribute filtering is enabled in the top bar, customers must click the :icon:`fa-sliders`
-   (:guilabel:`dropdown toggle`) button to access it.
-
-When enabling :guilabel:`Attributes`, more options become available:
-
-  - :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 Filter`: Toggle the switch to display the :guilabel:`Product Tags` on
-    the shop page, and allow customers to filter products using those tags by going to the
-    :guilabel:`Tags` section in the :ref:`side panel <ecommerce/catalog/side-panel>`.
-
-.. tip::
-   - If you want to use tags on your e-commerce, go to :menuselection:`eCommerce --> Product Tags`
-     and click :guilabel:`New`. In the :guilabel:`Product Templates` tab of the product tags form,
-     add the products to link to the given tag. You can also add product variants in the
-     :guilabel:`Product Variants` tab and view a summary of all selected products in
-     the :guilabel:`All Products` tab.
-   - Price filtering works independently from attributes and, therefore, can be enabled on its own,
-     if desired.
+   - :doc:`../../../sales/sales/products_prices/products/variants`
+   - :doc:`categories_variants`
 
 .. _ecommerce/catalog/product-listing:
 
 Product listing area
 ====================
 
-You can customize the layout of the entire shop page, as well as that of :ref:`individual category
-pages <ecommerce/catalog/customize-layout>`.
-
-.. tip::
-   It is also possible to customize individual :ref:`product pages <ecommerce/products/product-form>`.
-
 .. _ecommerce/catalog/layout:
 
-In the website editor, choose the :ref:`layout <ecommerce/catalog/sort-by-and-display-option>`, and
-set the default layout to either :guilabel:`Grid` or :guilabel:`List` view.
+Define the number of products to display on your shop pages by configuring the :guilabel:`Size`
+displayed per page and line, and specify the number of columns for :guilabel:`Mobile` devices.
 
-Use the following options to further adjust the layout:
+.. note::
+   The number of products displayed on a page may affect performance and page loading speed.
 
-   - :guilabel:`Size`: Set the number of products displayed per page and line.
-   - :guilabel:`Gap`: Define the gap between the products.
-   - :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 fit your design preferences best.
-
-Toggle the :guilabel:`Prod. Desc.` switch to display the product description below the product's
-name.
-
-.. tip::
-   You can choose the size of the grid, but be aware that displaying too many products may affect
-   performance and page loading speed.
-
-In addition, you can manually change a product’s position on the shop page. To do so, go to the
-main shop page, click the product, and open the website editor. In the :guilabel:`Product` section,
-you can reorder the products by using the arrows. The `<<` `>>` buttons allow to move the product to
-the extreme left or right, and `<` `>` allow to move it one row to the left or right.
+In addition, you can manually change a product’s position on the shop page or product category page.
+To do so, click a specific product, change its :guilabel:`Size`, and :guilabel:`Re-order` it using
+the arrows in the :guilabel:`Product` section of the :guilabel:`Style` tab. The
+:icon:`fa-angle-double-left` (:guilabel:`double left arrow`) and :icon:`fa-angle-double-right`
+(:guilabel:`double right arrow`) buttons allow you to move the product to the extreme left or right,
+and the :icon:`fa-angle-left` (:guilabel:`single left arrow`) and :icon:`fa-angle-right`
+(:guilabel:`single left arrow`) buttons allow you to move it one row to the left or right. You can
+also choose or create a :ref:`ribbon or badge
+<ecommerce/products/additional_features/product-highlight>` to highlight a specific product.
 
 .. tip::
    It is also possible to change the products' positions on the shop page by going to
    :menuselection:`Website --> eCommerce --> Products`, switching to the list view, and
    dragging and dropping the products within the list.
 
+.. _ecommerce/catalog/products-design:
+
+Products design
+---------------
+
+Choose a :guilabel:`Products Design`, click the :icon:`fa-paint-brush` :guilabel:`(paint brush)`
+icon next to it to customize the product cards' design, then:
+
+- Choose a :guilabel:`Preset` layout;
+- Adapt the :guilabel:`General` design;
+- Customize the :guilabel:`Text & content` (e.g., show a :guilabel:`Description`, and
+  :guilabel:`Ratings`);
+- Customize the :guilabel:`Images`' layout (e.g., enable :guilabel:`Secondary
+  Image` to show a second image when hovering over the product image on the shop or category page);
+- Enable some :guilabel:`Actions` (e.g., :icon:`fa-shopping-cart`
+  :ref:`Add to cart <ecommerce/checkout/add-to-cart>`, :icon:`fa-exchange` :ref:`Compare
+  <ecommerce/products/additional_features/product-comparison>`, or :icon:`fa-heart` :ref:`Wishlist
+  <ecommerce/products/additional_features/wishlists>`) and customize their placement.
+
+.. tip::
+   You can also add a :ref:`variant picture <ecommerce/categories_variants/attributes>` on the
+   product card and product page.
+
 .. _ecommerce/catalog/customize-layout:
 
 Shop and category page design
------------------------------
+=============================
 
-Use :doc:`building blocks <../../website/web_design/building_blocks>` to add content on the shop
-and/or category page.
+The design of the shop and individual category pages can be customized as follows:
 
-You can customize the top and/or bottom section of the catalog, either for the entire shop page or
-for a specific category. In the latter case, the block appears *only* when filtering by that
-category. To do so, move the block to the far top or bottom section to display it on the general
-shop page or to the area below the category's name at the top or beneath the product list to
-display it only when filtering by that specific category.
+- Choose whether the :guilabel:`Content Width` of the shop and category pages should be
+  :guilabel:`Regular` or :guilabel:`Full` width.
+- Define the headers: navigate to the relevant page, then change the header directly on the page
+  if needed. Toggle the :guilabel:`Show Title` and/or the :guilabel:`Center Content` switches. For
+  product category pages, toggle the :guilabel:`Show Description` switch to show the :ref:`category
+  description <ecommerce/categories_variants/categories>`.
+- Use :doc:`building blocks <../../website/web_design/building_blocks>` to add content in the
+  top/bottom section of the page, either for the entire shop page or for a specific category. In
+  the latter case, the block appears *only* when filtering by that category. To do so, move the
+  block to the far top or bottom section to display it on the general shop page or to the area
+  below the category's name at the top or beneath the product list to display it only when filtering
+  by that specific category.
 
   .. image:: catalog/catalog-header-footer.png
      :alt: Place building block in the header or footer.
@@ -214,7 +205,47 @@ display it only when filtering by that specific category.
        own specific URL that can be pointed to and is indexed by search engines.
      - eCommerce categories can also be added as :ref:`mega menu items
        <website/header_footer/mega-menus>` for quick access.
+     - It is also possible to customize individual :ref:`product pages
+       <ecommerce/products/product-form>`.
 
-.. seealso::
-   - :doc:`Products <../products>`
-   - :doc:`additional_features`
+.. _ecommerce/catalog/catalog-blocks:
+
+Catalog blocks
+==============
+
+The :guilabel:`Catalog` :doc:`building blocks
+</applications/websites/website/web_design/building_blocks>` can be used, for example, to create
+quick access to the shop page, showcase specific product categories, highlight a specific product
+selection, or add a banner with general information or promotions.
+
+Depending on the selected template, you can :ref:`customize <website/building_blocks/edit>` the
+blocks in the :guilabel:`Style` tab.
+
+.. example::
+   .. image:: catalog/catalog-products-block.png
+      :alt: Example of a catalog block for specific products
+
+   For example, for this specific :guilabel:`Catalog` block template to display a selection of
+   products sold on your website, you can:
+
+   - Adapt the block's design.
+   - Select a :guilabel:`Cards Design`, and click the :icon:`fa-paint-brush` :guilabel:`(paint
+     brush)` icon to :ref:`customize <ecommerce/catalog/products-design>` it.
+   - Define which items are shown in the block by selecting the relevant :guilabel:`Filter` option,
+     e.g., :guilabel:`Newest Products` to show the latest arrivals.
+   - Select a specific product category in the :guilabel:`Category` dropdown list.
+   - Filter products by toggling the :guilabel:`Tags` and/or :guilabel:`Show variants` options.
+
+.. _ecommerce/catalog/footer:
+
+Ecommerce-specific website footer
+=================================
+
+The :ref:`website footer <website/header_footer/footer-design>` can also be configured to use
+the ecommerce-specific template. Then add the relevant :ref:`links <website/elements/links>`, and
+adapt the footer's text and layout as needed in the website editor. The :doc:`available payment
+methods </applications/finance/payment_providers>` are also shown in this footer. To adapt their
+display, go to the :guilabel:`Supported Payment Methods` section in the website editor.
+
+.. note::
+   It is not possible to create a customized footer per category.

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

@@ -0,0 +1,112 @@
+=======================
+Categories and variants
+=======================
+
+Odoo eCommerce provides multiple ways to configure, :doc:`present <catalog>` and sell different
+product options to customers while organizing products by category for a better overiew and smoother
+navigation.
+
+.. _ecommerce/categories_variants/product-variants:
+
+Product variants
+================
+
+:doc:`Product variants </applications/sales/sales/products_prices/products/variants>` are different
+versions of the same product, created by combining :ref:`attributes <products/variants/attributes>`
+like color, size, material, etc., which can lead to differences in price and/or availability.
+
+To configure product variants for a product:
+
+#. Go to :menuselection:`Website --> Configuration --> Settings`.
+#. Scroll down to the :guilabel:`eCommerce` section and enable the
+   :guilabel:`Product Variants` feature.
+#. Access the :ref:`product form <ecommerce/products/product-form>`, and go to the
+   :guilabel:`Attributes & Variants` tab.
+#. Click :guilabel:`Add a line` and select the relevant attribute and its values. Repeat this step
+   for each additional attribute.
+
+The product variants are created automatically (or not) based on the :ref:`attribute's
+configuration <products/variants/attributes>`.
+
+.. seealso::
+   :doc:`/applications/sales/sales/products_prices/products/variants`
+
+.. _ecommerce/categories_variants/attributes:
+
+Attributes
+----------
+
+Attributes refer to the characteristics of a product, such as its color or material. Each attribute
+includes a set of values.
+
+.. image:: categories_variants/attributes-values.png
+   :alt: Attributes and variants of your product
+
+Once your attributes are :ref:`created <products/variants/attributes>`, set the following options
+on the attribute form to control where and/or how they appear on the website:
+
+- :guilabel:`eCommerce Filter`: Set the field to :guilabel:`Visible` to make the attribute
+  available in the shop's filter section.
+- :guilabel:`On Product Cards`: Set the field to :guilabel:`Visible` or :guilabel:`Hover` to display
+  attributes on the product card on the shop page. These options are only available when
+  :ref:`variants are created instantly for the attribute <products/variants/attributes>`.
+
+When the field is set to :guilabel:`Visible`, the :guilabel:`Show Thumbnails` option can be toggled
+to show a product variant image instead of the attribute values.
+
+It is also possible to add a variant picture on the product card on the shop page. To do so, go to
+the product form, click the :icon:`fa-sitemap` :guilabel:`Variants` :ref:`smart button
+<products/variants/variants-smart-button>`, select a variant, and click the :icon:`fa-pencil`
+:guilabel:`(Edit)` icon to add a picture for each variant. Make sure that the :ref:`Show Thumbnails
+<ecommerce/categories_variants/attributes>` is enabled on the attribute form.
+
+.. image:: categories_variants/variants-show-thumbnails.png
+   :alt: Variant thumbnails on product card.
+
+.. _ecommerce/categories_variants/attribute-categories:
+
+Attribute categories
+~~~~~~~~~~~~~~~~~~~~
+
+To group similar attributes under the same section when :ref:`comparing products
+<ecommerce/products/additional_features/product-comparison>`, select the relevant
+:guilabel:`eCommerce Category` or create a new one. Click the :icon:`fa-arrow-right`
+:guilabel:`(internal link)` icon next to the category name to:
+
+- Rename the category.
+- Change its :guilabel:`Sequence`.
+- Reorder the :guilabel:`Related Attributes` to define the order in which they are displayed in
+  the comparison summary.
+- Add attributes to the category by clicking :guilabel:`Add a line`.
+
+.. image:: categories_variants/attribute-categories.png
+   :alt: Comparison summary page with attribute categories.
+
+.. _ecommerce/categories_variants/categories:
+
+Product categorization in catalog
+=================================
+
+eCommerce categories are used to organize products into groups, making it easier for customers
+to browse the online store.
+
+.. image:: catalog/category-quick-access-top.png
+   :alt: Category quick access in the toolbar.
+
+To create eCommerce categories, go to :menuselection:`Website --> eCommerce -->
+eCommerce Categories`, and click :guilabel:`New`. On the category form, add a
+:guilabel:`Name`, optionally enter a :guilabel:`Parent` category, restrict it to a specific
+:guilabel:`Website`, and write a :guilabel:`Description`, if needed. You can also add a
+:guilabel:`Cover Image` for the category.
+
+To use :guilabel:`eCommerce categories`, go to :menuselection:`Website --> eCommerce --> Products`,
+select the product you wish to modify, go to the :guilabel:`Sales` tab, navigate to the
+:guilabel:`Ecommerce shop` section, and select the :guilabel:`Categories` it belongs to.
+
+.. note::
+   - A single product can belong to multiple eCommerce categories.
+   - Define how to :ref:`display categories <ecommerce/catalog/categories>` on the shop page.
+   - Categories that do not contain any products are not visible on the shop page.
+
+.. seealso::
+   :doc:`../products`

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

@@ -122,7 +122,7 @@ Selectable pricelists
 Selectable pricelists are useful, for example, when selling products in :doc:`multiple currencies
 </applications/sales/sales/products_prices/prices/currencies>` and allow customers to
 choose a pricelist using the catalog's pricelist selector located next to the :ref:`search bar
-<ecommerce/catalog/top-bar>`.
+<ecommerce/catalog/toolbar-and-filters>`.
 
 .. image:: prices/pricelist-selector.png
    :alt: Pricelist selector on the ecommerce.

content/developer/tutorials/website_theme/05_dynamic_templates.rst

@@ -37,7 +37,7 @@ using `XPath`. Following the Airproof design, let's begin by modifying the shop
    - To enable attribute/variant filtering, activate the
      :doc:`/applications/sales/sales/products_prices/products/variants` option in the
      website backend settings and :ref:`configure attributes and variants
-     <ecommerce/products/product-variants>` for the products.
+     <ecommerce/categories_variants/product-variants>` for the products.
 
 .. spoiler:: Solutions