[IMP] ecommerce: catalog update

task-4904299 and task-4311219

closes odoo/documentation#14077

X-original-commit: 9b97eb1b28
Signed-off-by: Audrey Vandromme (auva) <auva@odoo.com>

content/applications/websites/ecommerce/checkout.rst

@@ -212,13 +212,12 @@ as:
   <ecommerce/cross_upselling/accessory>`;
 - :guilabel:`Promo Code`: to allow customers to redeem :ref:`gift cards <ewallet_gift/gift-cards>`
   or apply :doc:`discount codes <../../sales/sales/products_prices/loyalty_discount>`;
-- :guilabel:`Add to Wishlist`: To allow signed-in users to remove a product from their cart and add
-  it to their wishlist, go to :menuselection:`Website --> Configuration --> Settings`, scroll to
-  the :guilabel:`Shop - Products` section, and enable :guilabel:`Wishlists`. The :guilabel:`Add to
-  Wishlist` option is then enabled by default in the website editor.
+- :guilabel:`Add to Wishlist`: :ref:`Enable wishlists <ecommerce/products/wishlists>` to allow
+  signed-in users to remove a product from their cart and add it to their wishlist using the
+  :guilabel:`Save for later` option.
 
 .. note::
-   - If a :doc:`fiscal position <../../finance/fiscal_localizations>` is detected
+   - If a :doc:`fiscal position <../../finance/accounting/taxes/fiscal_positions>` is detected
      automatically, the product tax is determined based on the customer's IP address.
    - If the installed :doc:`payment provider <../../finance/payment_providers>` supports
      :ref:`express checkout <payment_providers/express_checkout>`, a dedicated button is displayed,

content/applications/websites/ecommerce/products.rst

@@ -7,10 +7,10 @@ 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,
-:ref:`managing stock <ecommerce/products/stock-management>`, and enabling
-:ref:`product comparisons <ecommerce/products/product-comparison>`.
+:ref:`digital files <ecommerce/products/digital-files>`, :ref:`translating
+<ecommerce/products/translation>` the product page content, :ref:`managing stock
+<ecommerce/products/stock-management>`, and enabling :ref:`product comparisons
+<ecommerce/products/product-comparison>`.
 
 .. _ecommerce/products/add-products:
 
@@ -62,75 +62,6 @@ go to :menuselection:`Website --> eCommerce --> Products`, click the :icon:`fa-c
    #. In the :guilabel:`Is Published` column, tick the box for any of the selected products, then
       :guilabel:`Confirm` to publish them.
 
-.. _ecommerce/products/shop-page:
-
-Shop page
-=========
-
-To customize the layout of the main :guilabel:`Shop` page or modify its content, click
-:guilabel:`Edit`. Go to the :guilabel:`Blocks` tab to add :doc:`building blocks
-<../../websites/website/web_design/building_blocks>` or to the
-:guilabel:`Customize` tab to change the page layout or add features:
-
-- :guilabel:`Layout`: Select :guilabel:`Grid` or :guilabel:`List`.
-
-   - :guilabel:`Size`: Set the number of products displayed per page and line.
-   - :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 best fit your design preferences.
-
-- :guilabel:`Search Bar`: Toggle the switch to display a search bar at the top of the products
-   page.
-
-- :guilabel:`Prod. Desc.`: Toggle the switch to display the product description below the product's
-  name.
-
-- :guilabel:`Categories`: display product categories on the :guilabel:`Left`, on the
-  :guilabel:`Top`, or both. If :guilabel:`Left` is selected, you can enable
-  :guilabel:`Collapse Categories` to make the category menu collapsible.
-
-- :guilabel:`Datepicker`: Toggle the switch 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:`Attributes`: Show product attributes on the :guilabel:`Left` and/or display a
-  :icon:`fa-sliders` (:guilabel:`dropdown toggle`) icon at the :guilabel:`Top` allowing customers to
-  filter products based on their attributes.
-
-  - :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`: Toggle the switch to display the :guilabel:`Product Template Tags` on
-    the product page and allow customers to filter products using those tags by going to the
-    :guilabel:`Tags` section in the left column.
-
-- :guilabel:`Top Bar`: Select :guilabel:`Sort By` to display a dropdown list in the top bar for
-  sorting products and/or :guilabel:`Layout` to allow customers to switch to the grid or list view
-  using the related icons.
-
-- :guilabel:`Default Sort`: Choose how products are sorted by default: :guilabel:`Featured`,
-  :guilabel:`Newest Arrivals`, :guilabel:`Name (A-Z)`, :guilabel:`Price - Low to High`, or
-  :guilabel:`Price - High to Low`.
-
-- :guilabel:`Buttons`:
-
-  - Select the :icon:`fa-shopping-cart` (:guilabel:`Shopping cart`) option to display an
-    :icon:`fa-shopping-cart` (:guilabel:`Add to cart`) icon on each product's image, which takes the
-    customer to the checkout page.
-
-.. _ecommerce/products/wishlist:
-
-  - Select the :icon:`fa-heart-o` (:guilabel:`Wishlist`) option to display an
-    :icon:`fa-shopping-cart` (:guilabel:`Add to wishlist`) icon on each product's image allowing
-    logged-in customers to save products to a wishlist.
-
-  - Select the :icon:`fa-exchange` (:guilabel:`Compare`) option to display the :icon:`fa-exchange`
-    (:guilabel:`Compare`) icon on each product's image allowing customers to :ref:`compare products
-    <ecommerce/products/product-comparison>` based on their attributes.
-
 .. _ecommerce/products/product-page:
 
 Product page customization
@@ -298,7 +229,7 @@ go to :menuselection:`Website --> eCommerce --> Attributes`, click on the attrib
 :guilabel:`Visible` or :guilabel:`Hidden` in the :guilabel:`eCommerce Filter Visibility` field.
 
 .. tip::
-   - To display the product attributes on :ref:`the main Shop page <ecommerce/products/shop-page>`,
+   - 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/product-comparison>`, go to the
@@ -436,6 +367,27 @@ comparison summary.
    - Selecting the :icon:`fa-exchange` (:guilabel:`Compare`) option from a product page is also
      possible.
 
+.. _ecommerce/products/wishlists:
+
+Wishlists
+=========
+
+The :icon:`fa-heart-o` :guilabel:`Add to wishlist` button allows customers to add products
+to their wishlist, i.e., save them for later. To enable it, go to :menuselection:`Website -->
+Configuration --> Settings`, scroll down to the :guilabel:`Shop - Products` section, and enable
+:guilabel:`Wishlists`. The button is available on each product page and can be disabled in the
+:ref:`website editor <ecommerce/products/product-page>` if needed.
+
+.. image:: products/products-add-to-wishlist.png
+   :alt: Add to wishlist button
+
+.. tip::
+   - You can also display a :icon:`fa-heart-o` (:guilabel:`Wishlist`) button when hovering the mouse
+     over the product on the :ref:`shop page <ecommerce/catalog/additional-features>`.
+   - Customers can move products from their cart to their wishlist by clicking the :guilabel:`Save
+     for later` button in the :guilabel:`Order overview` :ref:`checkout step
+     <ecommerce/checkout/review_order>`.
+
 .. toctree::
    :titlesonly:
 

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

@@ -2,204 +2,273 @@
 Catalog
 =======
 
-The eCommerce catalog is the equivalent of your physical store shelves: it allows customers to see
-what you have to offer. Clear categories, available options, sorting, and navigation threads help
-you structure it efficiently.
+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 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>`, filter by :ref:`categories and attributes
+<ecommerce/catalog/categories>`, and use :ref:`additional features
+<ecommerce/catalog/additional-features>` according to your needs.
+
+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.
+
+.. _ecommerce/catalog/top-bar:
+
+Top bar
+=======
+
+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>`.
 
 .. tip::
-   Go to :menuselection:`Website --> Configuration --> Settings`, scroll down to the
-   :guilabel:`Privacy` section to restrict :guilabel:`Ecommerce Access` to logged-in users and/or
-   enable :guilabel:`Shared Customer Accounts` to allow access to all websites with a single
-   account.
+   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.
 
-Categorize the product catalog
-==============================
+.. _ecommerce/catalog/side-panel:
 
-In Odoo, there is a **specific category model** for your eCommerce. Using eCommerce categories for
-your products allows you to add a navigation menu on your eCommerce page. Visitors can then use it
-to view all products under the category they select.
+Side panel
+==========
 
-To do so, go to :menuselection:`Website --> eCommerce --> Products`, select the product you wish to
-modify, click on the :guilabel:`Sales` tab, and select the :guilabel:`Categories` you want under
-:guilabel:`eCommerce Shop`.
+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.
 
-.. image:: catalog/catalog-categories.png
-   :align: center
-   :alt: eCommerce categories under the "Sales" tab
+You can also add a :guilabel:`Datepicker` option to display a date range calendar to check
+the availability of rental products over a specific period. The :doc:`Rental app
+<../../../sales/rental>` must be installed to use this feature.
+
+It is also possible to toggle the :guilabel:`Collapsible sidebar` switch to make the side panel
+manually collapsible.
+
+.. tip::
+   To use a price range or tags filter, you have to enable :ref:`attributes
+   <ecommerce/catalog/attributes>` first.
+
+.. _ecommerce/catalog/categories:
+
+Product categorization in catalog
+=================================
+
+eCommerce categories are used to organize products into groups, making it easier for customers
+to browse the online store.
+
+To create eCommerce categories, go to :menuselection:`Website --> eCommerce -->
+eCommerce Categories`, and click :guilabel:`New`. On the category form, add a
+:guilabel:`Name`, optionally enter a :guilabel:`Parent Category`, and write a :guilabel:`Category
+Description`, if needed.
+
+To use eCommerce categories, go to :menuselection:`Website --> eCommerce --> Products`, select
+the product you wish to modify, go to the :guilabel:`Sales` tab, navigate to the
+:guilabel:`Ecommerce shop` section, and select the :guilabel:`Categories` it belongs to.
 
 .. note::
-   A single product can appear under multiple eCommerce categories.
+   A single product can belong to multiple eCommerce categories.
 
-When your product's categories are configured, go to your **main shop page** and click on
-:menuselection:`Edit --> Customize tab`. In the :guilabel:`Categories` option, you can either enable
-a menu on the :guilabel:`Left`, on the :guilabel:`Top`, or both. If you select the :guilabel:`Left`
-category, the option :guilabel:`Collapsable Category Recursive` appears and allows to render the
-:guilabel:`Left` category menu collapsable.
+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
-   :align: center
    :alt: Categories options for your eCommerce website
 
 .. seealso::
    :doc:`../products`
 
-.. _ecommerce-browsing:
-
-Browsing
---------
-
-The eCommerce category is the first tool to organize and split your products. However, if you need
-an extra level of categorization in your catalog, you can activate various **filters** such as
-attributes or sort-by search.
+.. _ecommerce/catalog/attributes:
 
 Attributes
-~~~~~~~~~~
+----------
 
-Attributes refer to **characteristics** of a product, such as **color** or **material**, whereas
-variants are the different combinations of attributes. :guilabel:`Attributes and Variants` can be
-found under :menuselection:`Website --> eCommerce --> Products`, select your product, and
-:guilabel:`Attributes & Variants` tab.
+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.
 
 .. seealso::
-   - :doc:`../../../sales/sales/products_prices/products/variants`
+   :doc:`../../../sales/sales/products_prices/products/variants`
 
 .. image:: catalog/catalog-attributes.png
-   :align: center
    :alt: Attributes and variants of your product
 
-To enable **attribute filtering**, go to your **main shop page**, click on :menuselection:`Edit -->
-Customize tab` and select either :guilabel:`Left`, :guilabel:`Top`, or both. Additionally, you can
-also enable :guilabel:`Price Filtering` to enable price filters.
-
-.. note::
-   :guilabel:`Price Filter` works independently from **attributes** and, therefore, can be enabled
-   on its own if desired.
+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::
-   You can use **attribute filters** even if you do not work with product variants. When adding
-   attributes to your products, make sure only to specify *one* value per attribute. Odoo does not
-   create variants if no combination is possible.
+   When attribute filtering is enabled in the top bar, customers must click the :icon:`fa-sliders`
+   (:guilabel:`dropdown toggle`) button to access it.
 
-Sort-by search
-~~~~~~~~~~~~~~
+When enabling :guilabel:`Attributes`, more options become available:
 
-It is possible to allow the user to manually **sort the catalog** using the search bar. From
-your **main shop page**, click on :menuselection:`Edit --> Customize tab`; you can enable or disable
-the :guilabel:`Sort-By` option as well as the :guilabel:`Layout` button. You can also select the
-:guilabel:`Default Sort` of the :guilabel:`Sort-By` button. The default sort applies to *all*
-categories.
+  - :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>`.
 
-The **sorting** options are:
+.. 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.
 
-- Featured
-- Newest Arrivals
-- Name (A-Z)
-- Price - Low to High
-- Price - High to Low
+.. _ecommerce/catalog/product-listing:
 
-In addition, you can **manually edit** the catalog's order of a product by going to **the main shop
-page** and clicking on the product. Under the :guilabel:`Product` section of the
-:guilabel:`Customize` section, you can rearrange the order by clicking on the arrows. `<<` `>>` move
-the product to the **extreme** right or left, and `<` `>` move the product by **one** row to the
-right or left. It is also possible to change the catalog's order of products in
-:menuselection:`Website --> eCommerce --> Products` and drag-and-dropping the products within the
-list.
+Product listing area
+====================
 
-.. image:: catalog/catalog-reorder.png
-   :align: center
-   :alt: Product rearrangement in the catalog
+You can customize the layout of the entire shop page, as well as that of :ref:`individual category
+pages <ecommerce/catalog/customize-layout>`.
 
-Page design
-===========
+.. tip::
+   It is also possible to customize individual :ref:`product pages <ecommerce/products/product-form>`.
 
-Category page
--------------
+.. _ecommerce/catalog/layout:
 
-You can customize the layout of the category page using the website builder.
+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.
 
-.. important::
-   Editing the layout of the category page is global; editing one category layout affects *all*
-   category pages.
+Use the following options to further adjust the layout:
 
-To do so, go on to your :menuselection:`Category page --> Edit --> Customize`. Here, you can choose
-the layout, the number of columns to display the products, etc. The :guilabel:`Product Description`
-button makes the product description visible from the category page, underneath the product picture.
+   - :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.
 
-.. image:: catalog/catalog-category-layout.png
-   :align: center
-   :alt: Layout options of the category pages.
+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.
+
+.. 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.
+
 Product highlight
 -----------------
 
-You can highlight products to make them more visible on the category or product page. On the page of
-your choice, go to :menuselection:`Edit --> Customize` and click on the product to highlight. In the
-:guilabel:`Product` section, you can choose the size of the product image by clicking on the grid,
-and you can also add a **ribbon** or :guilabel:`Badge`. This displays a banner across the product's
-image, such as:
+You can highlight products to make them more visible on the shop page. To do so, go
+to the website editor and click the product to highlight. In the :guilabel:`Product` section, you
+can choose the size of the product image by clicking the grid, and you can also add a
+:guilabel:`Ribbon`. This displays a banner across the product's image, such as :guilabel:`Sale`,
+:guilabel:`Sold out`, :guilabel:`Out of stock` or :guilabel:`New!`.
 
-- Sale;
-- Sold out;
-- Out of stock;
-- New.
-
-Alternatively, you can activate the :doc:`developer mode <../../../general/developer_mode>` on the
-**product's template**, and under the :guilabel:`Sales` tab, change or create the ribbon from the
-:guilabel:`Ribbon` field.
-
-.. note::
-   The :doc:`developer mode <../../../general/developer_mode>` is only intended for experienced
-   users who wish to have access to advanced tools. Using the **developer mode** is *not*
-   recommended for regular users.
-
-.. image:: catalog/catalog-product-highlight.png
-   :align: center
+.. image:: catalog/catalog-product-highlighting.png
    :alt: Ribbon highlight
 
+To create a new ribbon, click the green :icon:`fa-plus` (:guilabel:`Create`) icon next to the
+:guilabel:`Ribbon` field. Then add a :guilabel:`Ribbon name`, define its :guilabel:`Position`,
+and choose a :guilabel:`Background` and a :guilabel:`Text` label. To edit the ribbon, click the
+:icon:`fa-pencil-square-o` (:guilabel:`Edit`) icon next to the :guilabel:`Ribbon` label.
+
+.. image:: catalog/catalog-ribbons.png
+   :alt: Create a new ribbon.
+
+The ribbon is now available for all the eCommerce products.
+
+.. tip::
+   - There are other ways to create a new ribbon:
+
+     - Go to :menuselection:`Website --> eCommerce --> Product Ribbons` and click :guilabel:`New`.
+     - Activate the :doc:`developer mode <../../../general/developer_mode>`, access the product
+       form, and under the :guilabel:`Sales` tab, change or create the ribbon in the
+       :guilabel:`Ribbon` field.
+
+   - It is also possible to add ribbons for specific :ref:`product variants
+     <ecommerce/products/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.
+
+.. _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.
+
+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.
+
+ .. 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/pages/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.
+
+.. _ecommerce/catalog/additional-features:
+
 Additional features
 ===================
 
-You can access and enable additional feature buttons such as **add to cart**, **comparison list**,
-or a **wishlist**. To do so, go to your **main shop page**, and at the end of the
-:guilabel:`Products Page` category, click on the feature buttons you wish to use. All three buttons
-appear when hovering the mouse over a product's image.
+You can access and enable additional feature buttons such as a :guilabel:`Add to cart` or
+:guilabel:`Wishlist` button or a :guilabel:`Comparison list`. To do so, open the website editor,
+click the desired feature buttons. All three buttons appear when hovering the mouse over
+a product's image.
 
-- :guilabel:`Add to Cart`: adds a button to
+- :icon:`fa-shopping-cart` (:guilabel:`Add to cart`): adds a button to
   :doc:`add the product to the cart <../checkout>`;
-- :guilabel:`Comparison List`: adds a button to **compare** products based on their price, variant,
-  etc.;
-- :guilabel:`Wishlist Button`: adds a button to **wishlist** the product.
+- :icon:`fa-exchange` (:guilabel:`Compare`): adds a button to compare products based on
+  their price, variant, etc.;
+- :icon:`fa-heart-o` (:guilabel:`Wishlist`): adds a button to :ref:`wishlist
+  <ecommerce/products/wishlists>` the product.
 
-.. image:: catalog/catalog-buttons.png
-   :align: center
-   :alt: Feature buttons for add to cart, comparison list, and wishlist
 
-.. image:: catalog/catalog-features.png
-   :align: center
-   :alt: Appearance of buttons when hoovering over the mouse
-
-Add content
-===========
-
-You can use **building blocks** to add content on the category page, with a variety of blocks
-ranging from :guilabel:`Structure` to :guilabel:`Dynamic Content`. Specific areas are defined to use
-blocks are defined and highlighted on the page when **dragging-and-dropping** a block.
-
-.. image:: catalog/catalog-content.png
-   :align: center
-   :alt: Building blocks areas
-
-- If you drop a building block **on top** of the product list, it creates a new category header
-  specific to *that* category.
-- If you drop a building **on the top** or **bottom** of the page, it becomes visible on *all*
-  category pages.
-
-.. tip::
-   Adding content to an eCommerce category page is beneficial in terms of **SEO** strategy. Using
-   **keywords** linked to the products or the eCommerce categories improves organic traffic.
-   Additionally, each category has its own specific URL that can be pointed to and is indexed by
-   search engines.
+.. seealso::
+   :doc:`Products <../products>`