[IMP] website/ecommerce: update catalog page

task-5136241

closes odoo/documentation#15774

X-original-commit: ffea780a04
Signed-off-by: Audrey Vandromme (auva) <auva@odoo.com>
Signed-off-by: Larissa Manderfeld (lman) <lman@odoo.com>

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

@@ -28,24 +28,16 @@ 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*
-application.
+To use product variants, go to :menuselection:`Sales --> Configuration --> Settings`, then enable
+the :guilabel:`Variants` feature in the :guilabel:`Product Catalog` section, and click
+:guilabel:`Save` at the top of the :guilabel:`Settings` page.
 
-To do that, go to :menuselection:`Sales app --> Configuration --> Settings`, and locate the
-:guilabel:`Product Catalog` section at the top of the page.
-
-In that section, check the box to enable the :guilabel:`Variants` feature.
-
-.. image:: variants/activating-variants-setting.png
-   :align: center
-   :alt: Activating product variants on the Settings page of the Odoo Sales application.
-
-Then, click :guilabel:`Save` at the top of the :guilabel:`Settings` page.
+.. _products/variants/attributes:
 
 Attributes
 ==========
@@ -61,7 +53,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 +61,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 automatic 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 +161,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 +249,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.rst

@@ -36,8 +36,8 @@ customer accounts, and monitor your performance.
       :target: ecommerce/order_handling
       :large:
 
-      Handle all business documents related to your eCommerce orders: sales orders, delivery orders,
-      invoices, and legal requirements.
+      Handle all business documents related to your e-commerce orders: sales orders, delivery
+      orders, invoices, and legal requirements.
 
    .. card:: Customer accounts
       :target: ecommerce/customer_accounts
@@ -49,7 +49,7 @@ customer accounts, and monitor your performance.
    .. card:: Performance management
       :target: ecommerce/performance
 
-      Analyze sales data to evaluate your eCommerce performance.
+      Analyze sales data to evaluate your e-commerce performance.
 
    .. card:: Google Merchant Center
       :target: ecommerce/google_merchant_center

content/applications/websites/ecommerce/b2b_b2c.rst

@@ -16,7 +16,7 @@ While B2C businesses sell directly to the end consumer with a :ref:`tax-included
 <ecommerce-price-management-tax-display>` price, B2B businesses usually :ref:`exclude taxes
 <ecommerce-price-management-tax-display>` and may even prefer to hide prices altogether, showcasing
 only their products instead.
-To configure a B2B-specific ecommerce shop, make sure the :ref:`Tax-Excluded
+To configure a B2B-specific online shop, make sure the :ref:`Tax-Excluded
 <ecommerce/prices/taxes>` option is enabled, and complete the configuration to :ref:`hide the
 pricing <ecommerce/prices/hide-prices>`.
 

content/applications/websites/ecommerce/customer_accounts.rst

@@ -2,7 +2,7 @@
 Customer accounts
 =================
 
-Using customer accounts for an ecommerce shop enables you to :ref:`manage customers
+Using customer accounts for an e-commerce enables you to :ref:`manage customers
 <ecommerce/customer_accounts/account-creation>`, control access to the :ref:`shop
 <ecommerce/customer_accounts/shop-access>`, the :ref:`checkout
 <ecommerce/customer_accounts/checkout-access>`, or the :ref:`customer portal <portal/access>`,

content/applications/websites/ecommerce/google_merchant_center.rst

@@ -2,7 +2,7 @@
 Google Merchant Center
 ======================
 
-Google Merchant Center is a tool that allows ecommerce retailers to manage and submit product
+Google Merchant Center is a tool that allows e-commerce retailers to manage and submit product
 data to Google. It serves as a central hub to upload and maintain product details, such as images,
 prices, and descriptions so that products can appear across Google's platforms.
 
@@ -19,7 +19,7 @@ prices, and descriptions so that products can appear across Google's platforms.
 Google Merchant Center setup
 ============================
 
-To connect your ecommerce with the :abbr:`GMC (Google Merchant Center)` platform, proceed as
+To connect your e-commerce with the :abbr:`GMC (Google Merchant Center)` platform, proceed as
 follows:
 
 #. Create or sign in to a Google account using the following link:
@@ -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/order_handling.rst

@@ -2,7 +2,7 @@
 Order handling
 ==============
 
-When a customer orders on your eCommerce, there are **three** record types required to be handle in
+When a customer orders on your e-commerce, there are **three** record types required to be handle in
 Odoo:
 
 - :ref:`Sales orders <handling/sales>`;
@@ -18,10 +18,10 @@ Order and payment status
 ------------------------
 
 The first step when a customer adds a product to his cart is the creation of a quotation. Orders can
-be managed either from the **Website** or :doc:`Sales </applications/sales/sales>` app. eCommerce
+be managed either from the **Website** or :doc:`Sales </applications/sales/sales>` app. E-commerce
 orders can automatically be assigned to a specific sales team by going to :menuselection:`Website
 --> Configuration --> Settings`. In the **Shop - Checkout Process** section, select a
-:guilabel:`Sales Team` or :guilabel:`Salesperson` to handle eCommerce orders.
+:guilabel:`Sales Team` or :guilabel:`Salesperson` to handle e-commerce orders.
 
 .. image:: order_handling/handling-salesteam.png
    :align: center
@@ -39,7 +39,7 @@ order goes through a different status:
 
 .. image:: order_handling/handling-status.png
    :align: center
-   :alt: Statuses of eCommerce orders
+   :alt: Statuses of e-commerce orders
 
 Abandoned cart
 --------------
@@ -66,7 +66,7 @@ Delivery flow
 Once a quotation has been confirmed, a delivery order is automatically created. The next step is to
 process this delivery.
 
-Packing eCommerce orders usually requires picking the product, preparing the packaging, printing the
+Packing e-commerce orders usually requires picking the product, preparing the packaging, printing the
 shipping label(s) and shipping to the customer. Depending on the number of orders, strategy, or
 resources, those steps can be considered as one or multiple actions in Odoo.
 
@@ -103,7 +103,7 @@ payment provider needs to be enabled first.
 Invoice and legal requirements
 ==============================
 
-The final step of an ecommerce order is to generate the invoice and send it to the customer.
+The final step of an e-commerce order is to generate the invoice and send it to the customer.
 Depending on your needs, an invoice can either be generated automatically or on demand of the
 customer. This process can be automated if (and when) the online payment is :ref:`confirmed
 <handling/sales>`.

content/applications/websites/ecommerce/performance.rst

@@ -2,19 +2,20 @@
 Performance management
 ======================
 
-Odoo integrates a variety of tools to analyze and improve the performance of your eCommerce
+Odoo integrates a variety of tools to analyze and improve the performance of your e-commerce
 website.
 
 Data monitoring
 ===============
 
-**Website** allows monitoring and analysis of the sales performance of your eCommerce. To access the
-**reporting view**, go to :menuselection:`Website --> Reporting --> eCommerce`. This dashboard helps
-you monitor everything related to sales, such as sales performance per product, category, day, etc.
+**Website** allows monitoring and analysis of the sales performance of your e-commerce. To access
+the **reporting view**, go to :menuselection:`Website --> Reporting --> eCommerce`. This dashboard
+helps you monitor everything related to sales, such as sales performance per product, category, day,
+etc.
 
 .. image:: performance/reporting.png
    :align: center
-   :alt: Performance reporting of eCommerce
+   :alt: Performance reporting of e-commerce
 
 By clicking :guilabel:`Measures`, you can select the type of measurement used, such as:
 

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
-   </applications/inventory_and_mrp/barcode/setup/barcodelookup>`.
+   - :doc:`Create new products using the Barcode Lookup database
+     </applications/inventory_and_mrp/barcode/setup/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,10 +75,12 @@ 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.
 
-You can also add an ecommerce-specific product description to be displayed below
+.. _ecommerce/products/description:
+
+You can also add an e-commerce-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
 :doc:`rich-text editor <../../essentials/html_editor>` features to personalize the content.
@@ -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`.
 
@@ -166,7 +169,7 @@ and click :guilabel:`Add Media` under the :guilabel:`Ecommerce Media` section. I
 click :guilabel:`Upload an image` or :guilabel:`Add URL`. Or navigate to the :guilabel:`Videos` tab,
 paste a video URL or embed code. Once done, click :guilabel:`Add`.
 
-To customize the images or videos, go to the ecommerce product page, click :guilabel:`Edit`
+To customize the images or videos, go to the e-commerce product page, click :guilabel:`Edit`
 and select the relevant media. In the :guilabel:`Customize` tab, use the following features:
 
 - :guilabel:`Images Width`: Changes the width of the product images displayed on the page.
@@ -182,64 +185,6 @@ and select the relevant media. In the :guilabel:`Customize` tab, use the followi
 - :guilabel:`Extra Images`: :guilabel:`Add` more extra images or videos (including via URL) or
   :guilabel:`Remove all`.
 
-.. _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
@@ -288,7 +233,7 @@ If multiple languages are available on your website, you can translate a product
 directly on the :ref:`product form <ecommerce/products/product-form>`. Fields that support multiple
 languages are identifiable by their abbreviation language (e.g., EN) next to their field.
 
-The eCommerce-related fields to translate are:
+The e-commerce-related fields to translate are:
 
 - :guilabel:`Product name`.
 - :guilabel:`Out-of-Stock Message` (under the :guilabel:`Sales` tab).
@@ -312,8 +257,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:
 
@@ -329,6 +278,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>`.
 
+.. tip::
+   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
 ---------
 
@@ -348,3 +305,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.
 
@@ -43,6 +43,10 @@ This button can be enabled independently in different sections of the website:
 .. note::
    You can only compare a maximum of four products at a time.
 
+.. tip::
+   Define :ref:`attribute categories <ecommerce/categories_variants/attribute-categories>` to group
+   similar attributes under the same section when comparing products.
+
 .. _ecommerce/products/additional_features/wishlists:
 
 Wishlist
@@ -118,7 +122,7 @@ preconfigured ribbons (:guilabel:`Sold out`, :guilabel:`Sale`, :guilabel:`Out of
 Choose its :guilabel:`Position`, either :guilabel:`Left` or :guilabel:`Right`, and a
 :guilabel:`Style`, either :guilabel:`Ribbon` or :guilabel:`Badge`. Define the :guilabel:`Text Color`
 and the :guilabel:`Background Color`. Then :guilabel:`Save`. The ribbon is now available for all
-the ecommerce products.
+the e-commerce products.
 
 .. image:: additional_features/badge-applied.png
    :alt: Product with badge
@@ -139,7 +143,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,246 @@
-=======
-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 e-commerce 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 e-commerce 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 (or slide-out menu), 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:`e-commerce 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>`.
-
-.. _ecommerce/catalog/sort-by-and-display-option:
-
-Sort-by search and display options
-----------------------------------
-
-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`.
-
-The :guilabel:`Sort-by` button is toggled by default, and customers can choose between the
-following :guilabel:`Default Sort` options:
-
-- :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>`.
+The toolbar and sidebar (or slide-out menu) 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>`.
 
 .. 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.
-
-.. _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.
+   If you do not want to display a toolbar or sidebar, disable all related options in the website
+   editor, :ref:`hide attributes <ecommerce/categories_variants/attributes>`, and make sure to only
+   assign one pricelist to the website.
 
 .. _ecommerce/catalog/categories:
 
-Product categorization in catalog
-=================================
+Categories
+----------
 
-eCommerce categories are used to organize products into groups, making it easier for customers
-to browse the online store.
+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.
 
-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.
+.. image:: catalog/category-quick-access-top.png
+   :alt: Category quick access in the toolbar.
 
 .. note::
-   A single product can belong to multiple eCommerce categories.
+   The category filters located in the sidebar are not affected by the :guilabel:`Filters` setting.
 
-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.
+.. _ecommerce/catalog/toolbar:
 
-.. image:: catalog/catalog-panel-categories.png
-   :alt: Categories options for your eCommerce website
+Toolbar
+-------
 
-.. seealso::
-   :doc:`../products`
+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. Toggle 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 bottom
+of the window, even when scrolling, and select a :guilabel:`Default Sort` option.
+
+.. note::
+   The default sort applies to *all* :ref:`categories <ecommerce/categories_variants/categories>`.
+
+
+.. _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 in the toolbar;
+- :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::
+       To create product tags on your e-commerce, go to :menuselection:`Website --> eCommerce
+       --> Product Tags`, and click :guilabel:`New`. Add a :guilabel:`Tag` name, toggle the
+       :guilabel:`Visible to customers` switch, and select a :guilabel:`Color`. Optionally, add an
+       image. Then go to the product form, and assign the relevant tags where needed.
+
+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.
+
+
+.. 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 right 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:
+
+Product card design
+-------------------
+
+To customize the product cards' design, choose a :guilabel:`Products Design`, click the
+:icon:`fa-paint-brush` :guilabel:`(paint brush)` icon next to it to:
+
+- 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.
+  .. image:: catalog/catalog-header-footer.png
+     :alt: Place building block in the header or footer.
 
-.. 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.
+  .. tip::
+     - Adding content to an e-commerce category page helps improve the :doc:`SEO
+       <../../website/structure/seo>` strategy. Using keywords linked to the products or the
+       e-commerce 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.
+     - E-commerce 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, this specific :guilabel:`Catalog` block template displays a selection of
+   products and can be customized to:
+
+   - Adapt the block's design.
+   - Select a :guilabel:`Cards Design`, and :ref:`configure <ecommerce/catalog/products-design>` it
+     using the :icon:`fa-paint-brush` :guilabel:`(paint brush)` icon.
+   - 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:
+
+E-commerce-specific website footer
+==================================
+
+The :ref:`website footer <website/header_footer/footer-design>` can also be configured to use
+the e-commerce-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 overview 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>` option 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:
+
+E-commerce categories
+=====================
+
+E-commerce 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 e-commerce 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 e-commerce 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

@@ -2,7 +2,7 @@
 Prices
 ======
 
-Odoo offers multiple options to configure prices on the ecommerce. For example, you can apply
+Odoo offers multiple options to configure prices on the e-commerce. For example, you can apply
 :ref:`prices per unit <ecommerce/prices/price-per-unit>`, offer :ref:`discounts
 <ecommerce/prices/discounts>`, and set up :ref:`pricelists <ecommerce/prices/pricelists>`.
 
@@ -122,10 +122,10 @@ 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.
+   :alt: Pricelist selector on the e-commerce.
 
 To make a pricelist selectable, enable :guilabel:`Selectable`.
 
@@ -139,7 +139,7 @@ To make a pricelist selectable, enable :guilabel:`Selectable`.
       - Multiple selectable pricelists exist, but only those matching the customer's :ref:`country
         group <ecommerce/prices/country-groups>` are shown. It is strongly recommended to disable
         the :guilabel:`Selectable` option when using pricelists with country groups on the
-        ecommerce.
+        e-commerce.
 
 .. seealso::
    :ref:`sales/products/currencies/currency-specific-pricelists`
@@ -176,7 +176,7 @@ Use :ref:`Custom filters <search/custom-filters>` if needed.
 
 .. important::
    - When using GeoIP to determine the appropriate pricelist, **all** pricelists used on the
-     ecommerce must have a country group assigned.
+     e-commerce must have a country group assigned.
    - It is strongly recommended to disable the :guilabel:`Selectable` option when using pricelists
      with country groups. Indeed, all pricelists with the relevant country group are automatically
      applied to the catalog but if one of them is marked as :ref:`Selectable
@@ -200,7 +200,7 @@ Use :ref:`Custom filters <search/custom-filters>` if needed.
 Pricelist application
 ---------------------
 
-On the ecommerce, the *default* pricelist is automatically selected for public, non-logged in users
+On the e-commerce, the *default* pricelist is automatically selected for public, non-logged in users
 when no country group is assigned. If :ref:`GeoIP and country groups <ecommerce/prices/geoip>` are
 used, public users see the pricelist of their country group by default. :ref:`Logged-in users
 <ecommerce/customer_accounts/shop-access>` with
@@ -233,7 +233,7 @@ Discounts programs
 ------------------
 
 To enable :doc:`discount programs </applications/sales/sales/products_prices/loyalty_discount>`
-for your ecommerce, go to :menuselection:`Website --> Configuration --> Settings`, scroll
+for your e-commerce, go to :menuselection:`Website --> Configuration --> Settings`, scroll
 down to the :guilabel:`eCommerce` section, and enable the :guilabel:`Discounts, Loyalty & Gift
 Card` feature.
 
@@ -312,7 +312,7 @@ Hide prices
 Some businesses, such as :ref:`B2B shops <ecommerce/b2b_b2c/prices>` or companies that sell luxury
 or custom items, often prefer to showcase their products online without displaying their prices.
 
-To hide product prices on the ecommerce, go to :menuselection:`Website --> Configuration -->
+To hide product prices on the e-commerce, go to :menuselection:`Website --> Configuration -->
 Settings`, enable :guilabel:`Prevent Sale of Zero Priced Product` in the :guilabel:`eCommerce`
 section, and enter a redirect URL in the :guilabel:`Button URL` field. The
 :guilabel:`Add to Cart` button on the product page is then replaced by a :guilabel:`Contact us`
@@ -323,7 +323,7 @@ After enabling this feature, either set the price to `0` for all desired product
 pricelist is assigned to the correct website and is listed first among the website's pricelists.
 
 .. tip::
-   - Ensure no pricelist used on the ecommerce has been marked as :guilabel:`Selectable` to prevent
+   - Ensure no pricelist used on the e-commerce has been marked as :guilabel:`Selectable` to prevent
      accidentally displaying the zero-priced pricelist.
    - To hide prices from public visitors while keeping them visible to logged-in customers, create a
      zero-priced pricelist to be used for non-logged-in customers and :ref:`assign

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