[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,220 +1,251 @@
-=======
-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::
-   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.
+   - 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/side-panel:
+.. _ecommerce/catalog/filters:
 
-Side panel
-==========
+Filters
+-------
 
-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.
+Set the :guilabel:`Filters` field to:
 
-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.
+- :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.
 
-It is also possible to toggle the :guilabel:`Collapsible sidebar` switch to make the side panel
-manually collapsible.
+By default, two :guilabel:`Filters` are enabled:
 
-.. tip::
-   To use a price range or tags filter, you have to enable :ref:`attributes
-   <ecommerce/catalog/attributes>` first.
+  - :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.
 
-.. _ecommerce/catalog/categories:
+    .. tip::
+       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.
 
-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.
 
-.. tip::
+  .. tip::
      - Adding content to an eCommerce category page helps improve the :doc:`SEO
        <../../website/structure/seo>` strategy. Using keywords linked to the products or the
        eCommerce categories can also increase organic traffic. Additionally, each category has its
        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