[ADD] ecommerce: add new design section and pages

task-5136226
task-4919743

closes odoo/documentation#15829

Signed-off-by: Audrey Vandromme (auva) <auva@odoo.com>

content/applications/inventory_and_mrp/manufacturing/advanced_configuration/sub_assemblies.rst

@@ -206,4 +206,4 @@ vendors or manufacturing can begin, the top-level product can be included in an
 
 .. seealso::
    - :doc:`../../../sales/sales/sales_quotations/create_quotations`
-   - :doc:`../../../websites/ecommerce/products/catalog`
+   - :doc:`../../../websites/ecommerce/ecommerce_design/catalog`

content/applications/websites/ecommerce.rst

@@ -19,6 +19,13 @@ customer accounts, and monitor your performance.
       Configure your product pages, adjust the shop page layout, set up the pricing, and define
       suggestions for optional and accessory products.
 
+   .. card:: eCommerce design
+      :target: ecommerce/ecommerce_design
+      :large:
+
+      Design the product catalog and product pages using a wide range of design features,
+      building blocks, and additional e-commerce-specific features and buttons.
+
    .. card:: Ordering and checkout
       :target: ecommerce/checkout
       :large:
@@ -48,11 +55,13 @@ customer accounts, and monitor your performance.
 
    .. card:: Performance management
       :target: ecommerce/performance
+      :large:
 
       Analyze sales data to evaluate your e-commerce performance.
 
    .. card:: Google Merchant Center
       :target: ecommerce/google_merchant_center
+      :large:
 
       Manage and submit your product data to Google with Google Merchant Center.
 
@@ -70,6 +79,7 @@ customer accounts, and monitor your performance.
    :titlesonly:
 
    ecommerce/products
+   ecommerce/ecommerce_design
    ecommerce/checkout
    ecommerce/shipping
    ecommerce/order_handling

content/applications/websites/ecommerce/ecommerce_design.rst

@@ -0,0 +1,45 @@
+:nosearch:
+:show-content:
+:hide-page-toc:
+
+================
+eCommerce design
+================
+
+Customize the design of the :doc:`product pages <../ecommerce/ecommerce_design/product_page>`,
+structure the :doc:`product catalog <../ecommerce/ecommerce_design/catalog>` and use
+:doc:`additional features <../ecommerce/ecommerce_design/additional_features>` to improve the
+customer's shopping experience.
+
+.. cards::
+
+   .. card:: Product page
+      :target: ecommerce_design/product_page
+      :large:
+
+      Design the product pages by showcasing product details and additional information, customizing
+      product images and videos, and adding content and design elements using building blocks.
+
+   .. card:: Product catalog
+      :target: ecommerce_design/catalog
+      :large:
+
+      Organize the product catalog by customizing the layout, using categories, and adding
+      building blocks, and filtering options.
+
+   .. card:: Additional features
+      :target: ecommerce_design/additional_features
+      :large:
+
+      Enable additional features, such as the wishlist and product comparison, and highlight
+      products using ribbons.
+
+.. seealso::
+   `Odoo Tutorials: eCommerce <https://www.odoo.com/slides/ecommerce-26>`_
+
+.. toctree::
+   :titlesonly:
+
+   ecommerce_design/product_page
+   ecommerce_design/catalog
+   ecommerce_design/additional_features

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

@@ -62,7 +62,6 @@ 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
@@ -106,7 +105,6 @@ 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
@@ -117,7 +115,7 @@ number of attribute sections:
 
 .. seealso::
    - :doc:`../../../sales/sales/products_prices/products/variants`
-   - :doc:`categories_variants`
+   - :doc:`../../ecommerce/products/categories_variants`
 
 .. _ecommerce/catalog/product-listing:
 
@@ -168,7 +166,7 @@ To customize the product cards' design, choose a :guilabel:`Products Design`, cl
 
 .. tip::
    You can also add a :ref:`variant picture <ecommerce/categories_variants/attributes>` on the
-   product card and product page.
+   product card.
 
 .. _ecommerce/catalog/customize-layout:
 
@@ -200,8 +198,7 @@ The design of the shop and individual category pages can be customized as follow
        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>`.
+     - It is also possible to customize individual :doc:`product pages <product_page>`.
 
 .. _ecommerce/catalog/catalog-blocks:
 

content/applications/websites/ecommerce/ecommerce_design/product_page.rst

@@ -0,0 +1,195 @@
+============
+Product page
+============
+
+The e-commerce product pages showcase all product details and media items related to the relevant
+products. It is possible to customize the :ref:`images and videos section
+<ecommerce/product_page/image-customization>`, choose :ref:`which product information to display
+<ecommerce_design/product_page/customization>`, show specific :ref:`buttons
+<ecommerce_design/product_page/buttons>`, customize the :ref:`attribute details section
+<ecommerce_design/product_page/attributes>`, enable :ref:`additional organizational features
+<ecommerce_design/product_page/page-features>`, and add content using :ref:`building blocks
+<ecommerce_design/product_page/building_blocks>`.
+
+.. _ecommerce/product_page/image-customization:
+
+Product images and videos
+=========================
+
+After :ref:`adding media items on the product form <ecommerce/products/images>` or upon
+:ref:`product creation in the frontend <ecommerce/products/create-products>`, customize them on the
+frontend product pages. To do so, navigate to the relevant product page in the online shop, click
+:guilabel:`Edit` in the upper-right corner, and navigate to the :guilabel:`Style` tab.
+
+.. tip::
+   To access the relevant product page from the :ref:`product form
+   <ecommerce/products/product-form>` in the backend, click the :icon:`fa-globe` :guilabel:`Go to
+   Website` smart button at the top of the form.
+
+To manage individual media items, click the item on the product page and scroll down to
+the :guilabel:`Image` section of the website editor. You can then :guilabel:`Replace` or
+:guilabel:`Remove` the image or video and :guilabel:`Re-order` the items. Use the
+:icon:`fa-angle-double-left` (:guilabel:`left double arrow`) or :icon:`fa-angle-double-right`
+(:guilabel:`right double arrow`) to move the media to the first or last position, and the
+:icon:`fa-angle-left` (:guilabel:`left arrow`) or :icon:`fa-angle-right` (:guilabel:`right arrow`)
+to move them by one position.
+
+To adjust the layout of the images and videos section, go to :guilabel:`Images Area` and define the
+images' size and :guilabel:`Position`. Then, navigate to the :guilabel:`Images` section, and use
+the following options to customize this section:
+
+- :guilabel:`Main image`: Click :guilabel:`Replace` to change the main product image.
+
+  .. note::
+     It is not possible to use a video as the main media item.
+
+- :guilabel:`Extra Media`: :guilabel:`Add More` images or videos (including via URL) or
+  :guilabel:`Remove all` media items.
+- :guilabel:`Display`: Choose between the following layouts when you use more than one media item:
+
+  - :guilabel:`Carousel`: This option allows visitors to navigate from one image to the next using
+    the :icon:`fa-angle-left` (:guilabel:`left arrow`) or :icon:`fa-angle-right` (:guilabel:`right
+    arrow`). Show :guilabel:`Thumbnails` on the :icon:`fa-long-arrow-left` (:guilabel:`Left`) or
+    at the :icon:`fa-long-arrow-down` (:guilabel:`Bottom`) and adapt the corner
+    :guilabel:`Roundness` of the images.
+
+  - :guilabel:`Grid`: This layout displays media items in a square layout. Adjust the number of
+    :guilabel:`Columns` and define the :guilabel:`Spacing` between the images in the grid, if
+    necessary.
+
+- :guilabel:`Auto-crop`: Choose a size to cut/trim images to match the page layout. This is useful
+  when designing the :guilabel:`Mobile` :ref:`layout <website/visibility/mobile-and-computer>`.
+- :guilabel:`Zoom on click`: Enable image zoom when visitors click an image.
+
+.. _ecommerce_design/product_page/customization:
+
+Page layout and product information display
+===========================================
+
+To customize the layout of the product pages, access any product page, click :guilabel:`Edit` in the
+upper-right corner, and navigate to the :guilabel:`Style` tab. Then, go to the :guilabel:`Page
+Width` setting and choose either the :guilabel:`Regular` or :guilabel:`Full-width` option.
+
+.. tip::
+   You can choose a different width for the :ref:`shop page <ecommerce/catalog/customize-layout>`.
+
+Select which product information appears on product pages using the options available in the
+:guilabel:`Product Details` section. You can configure :ref:`buttons
+<ecommerce_design/product_page/buttons>`, define :ref:`how attributes are displayed
+<ecommerce_design/product_page/attributes>`, organize the page using :ref:`page customization
+features <ecommerce_design/product_page/page-features>`, and add content using :ref:`building blocks
+<ecommerce_design/product_page/building_blocks>`.
+
+.. _ecommerce_design/product_page/buttons:
+
+Buttons
+-------
+
+Customize the buttons displayed on product pages using the following options:
+
+- :guilabel:`Purchase Style`: Define the layout of the buttons.
+- :guilabel:`Purchase Options`: (De)activate the :ref:`Buy Now <ecommerce/checkout/buy-now>` button
+  and/or the :guilabel:`Quantity` selector.
+- :guilabel:`Actions`: Enable the :ref:`wishlist <ecommerce/products/additional_features/wishlists>`
+  and the :ref:`product comparison <ecommerce/products/additional_features/product-comparison>`
+  features.
+
+.. _ecommerce_design/product_page/attributes:
+
+Attributes
+----------
+
+Choose how product :ref:`attributes <ecommerce/categories_variants/attributes>` are displayed in
+the :guilabel:`Specification` section of the product page:
+
+- :guilabel:`None`: Do not show the details.
+- :guilabel:`Bottom of Page`: Show the details at the bottom of the page.
+- :guilabel:`In accordion`: Show a foldable table directly under the ordering options.
+
+.. note::
+   The specification section is only displayed when :ref:`product variants
+   <ecommerce/categories_variants/product-variants>` are enabled, and at least one attribute has
+   been defined for the product.
+
+.. tip::
+   - Create :ref:`attribute categories <ecommerce/categories_variants/attribute-categories>` to
+     better structure this section.
+   - Use the :guilabel:`Image` :ref:`attribute display type <products/variants/attributes>` to show
+     images of product variants on the product page.
+
+.. _ecommerce_design/product_page/page-features:
+
+Page organization options and additional features
+-------------------------------------------------
+
+Toggle the following options on/off to enable or disable features across all product pages:
+
+- :guilabel:`Separators`: Organize the page and improve visual clarity.
+- :guilabel:`Tax Indication`: Indicate whether the price is :ref:`VAT included or
+  excluded <ecommerce/prices/taxes>`.
+- :guilabel:`Tags`: Display the tags created in the :ref:`backend <ecommerce/catalog/filters>` on
+  product pages and enable customers to filter products by those tags.
+- :guilabel:`Terms and Conditions`: Display a link to your :doc:`terms and conditions
+  </applications/finance/accounting/customer_invoices/terms_conditions>`.
+- :guilabel:`Reviews`: Allow :doc:`logged-in portal users </applications/general/users/user_portals>`
+  to submit product reviews. To add a review, users must navigate to the :guilabel:`Customer
+  Reviews` section at the bottom of the page and click the :icon:`fa-plus` (:guilabel:`plus`) icon.
+  They can then select a rating using the :icon:`fa-star-o` (:guilabel:`star`) icons and leave a
+  comment. The :icon:`fa-star` (:guilabel:`star`) rating is displayed directly under the product
+  name.
+- :guilabel:`Search Bar`: Display a search bar that can be shown or hidden independently from
+  the :ref:`shop page <ecommerce/catalog/toolbar>`.
+- :ref:`Ribbon <ecommerce/products/additional_features/product-highlight>` (or badge): Highlight a
+  specific product.
+
+.. tip::
+   It is possible to enable additional features and display information previously configured in the
+   backend:
+
+   - :ref:`Click & Collect <ecommerce/shipping/instore-pickup>`: Show the order pick-up location
+     and delivery availability on the product page.
+   - :ref:`Description <ecommerce/products/description>`: Display an e-commerce-specific product
+     description right under the product name.
+   - :ref:`Packagings <ecommerce/products/stock-management/packagings>`: Offer different types of
+     packagings.
+   - :ref:`Documents <ecommerce/products/digital-files>`: Add relevant documents, such as
+     user manuals or other supporting materials.
+   - :ref:`Alternative products <ecommerce/cross_upselling/alternative>`: Suggest similar
+     products and customize the section.
+   - :ref:`Show Available Quantity <ecommerce/products/stock-management/inventory>`: Display the
+     available product quantity when the quantity falls below a specified threshold.
+   - :ref:`Out-of-Stock Message <ecommerce/products/stock-management/inventory>`: Display a
+     customized message for products that are out of stock.
+   - :ref:`Get notified when back in stock <ecommerce/products/stock-management/inventory>`:
+     Customers can insert their email address to receive a notification when the item is back in
+     stock.
+   - :guilabel:`Product Page Extra Fields`: To enable specific extra fields for the product page,
+     enable the :doc:`developer mode </applications/general/developer_mode>`. Then, go to
+     :menuselection:`Website --> Configuration --> Websites`, select the relevant website,
+     navigate to the :guilabel:`Product Page Extra Fields` tab, and under :guilabel:`Field`,
+     click :guilabel:`Add a line` to add as many additional fields as needed, e.g., the barcode
+     number of the product.
+
+.. _ecommerce_design/product_page/building_blocks:
+
+Building blocks
+---------------
+
+Use building blocks to add content and design elements to all product pages or to a specific one.
+To do so, navigate to any or the relevant product page and click :guilabel:`Edit` in the upper-right
+corner. Then, in the :icon:`fa-plus` (:guilabel:`plus`) :guilabel:`Blocks` tab, select a building
+block, and drag and drop it:
+
+- into the blue area at the top or bottom of the product page to make it available on *all* product
+  pages, or
+- into the blue building block area below the product title or below the ordering options to display
+  it only for the current product.
+
+.. image:: product_page/product-page-building-blocks.png
+   :alt: Drag and drop building blocks on the product page.
+
+.. note::
+   These building blocks do not appear on the :ref:`shop page <ecommerce/catalog/customize-layout>`.
+
+.. seealso::
+   :doc:`../../../websites/website/web_design`

content/applications/websites/ecommerce/products.rst

@@ -5,8 +5,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:`digital files <ecommerce/products/digital-files>`, :ref:`translate
+your :doc:`product pages <../ecommerce/ecommerce_design/product_page>` directly from the Website app.
+It also 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>`.
 
@@ -23,8 +23,8 @@ Create products
 To create a product from the frontend, click :guilabel:`+ New` in the top-right corner, then
 :guilabel:`Product`. Enter the :guilabel:`Product Name`, :guilabel:`Sales Price`, the default
 :guilabel:`Customer Taxes` for local transactions, and :guilabel:`Save`. You can then update the
-product's details, add an image, and :ref:`customize <ecommerce/products/customization>` the product
-page. When you :guilabel:`Save`, the product page is automatically published.
+product's details, add an image, and :ref:`customize <ecommerce_design/product_page/customization>`
+the product page. When you :guilabel:`Save`, the product page is automatically published.
 
 .. tip::
    - You can also create a product from the backend by going to
@@ -62,15 +62,9 @@ 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/product-page:
-
-Product page customization
-==========================
-
-.. _ecommerce/products/customization:
-
 Product information
 -------------------
+
 .. _ecommerce/products/product-form:
 
 To add general information about a product, navigate to :menuselection:`Website -->
@@ -88,76 +82,7 @@ tab, scroll down to the :guilabel:`Ecommerce description` section, and add a des
 .. tip::
    Click the :guilabel:`Go to Website` smart button to return to the frontend product's page.
 
-.. _ecommerce/products/product-presentation:
-
-Product presentation
---------------------
-
-To customize the product presentation on the website, go to the :guilabel:`Shop` and click on the
-product. Click :guilabel:`Edit` to :ref:`customize <ecommerce/products/customization>` the page,
-:ref:`edit its images <ecommerce/products/image-customization>` or add
-:doc:`building blocks <../../websites/website/web_design/building_blocks>`.
-
-.. tip::
-   - When dragging and dropping a building block on the product page, placing it above or below
-     the top or bottom blue lines makes it visible on all product pages.
-   - You can edit any text on your website by clicking on it while in :guilabel:`Edit` mode.
-
-Use the :guilabel:`Customize` tab to modify the page layout or add features:
-
-- :guilabel:`Terms and Conditions`: Toggle the switch to display a link to your
-  :doc:`terms and conditions <../../finance/accounting/customer_invoices/terms_conditions>` on the
-  product page.
-
-- :guilabel:`Customers`:
-
-   - :guilabel:`Rating`: Allow logged-in portal users to submit product reviews by clicking the
-     stars below the product's name and sharing their experience in the :guilabel:`Customer Reviews`
-     section at the bottom. Reviews are visible from the product page using the :icon:`fa-plus`
-     (:guilabel:`plus`) icon next to the :guilabel:`Customer Reviews` heading or from the product
-     form's chatter. To restrict visibility to internal employees, toggle the :guilabel:`Public`
-     switch next to the review comment.
-   - :guilabel:`Share`: Add social media and email icon buttons allowing customers to share the
-     product through those channels.
-
-- :guilabel:`Quantity`: Toggle the switch to allow customers to select the product quantity
-  they want to purchase.
-
-- :guilabel:`Tax Indication`: Toggle the switch to indicate if the price is
-  :ref:`VAT included or excluded <ecommerce/prices/taxes>`.
-
-- :guilabel:`Variants`: Show all possible product :ref:`variants
-  <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
-  the product page and allow customers to filter products using those tags.
-
-- :guilabel:`Cart`:
-
-   - :guilabel:`Buy Now`: Add a :icon:`fa-bolt` :guilabel:`Buy Now` option to take the customer to
-     the checkout page.
-   - :guilabel:`Wishlist`: Add an :icon:`fa-heart-o` :guilabel:`Add to wishlist` option allowing
-     logged-in customers to save products in a :ref:`wishlist
-     <ecommerce/products/additional_features/wishlists>`.
-   - :guilabel:`Compare`: Add a :icon:`fa-exchange` :guilabel:`Compare` option, allowing customers
-     to :ref:`compare products <ecommerce/products/additional_features/product-comparison>`
-     based on their attributes.
-
-- :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/categories_variants/product-variants>` if the
-  :ref:`Product comparison tool <ecommerce/products/additional_features/product-comparison>` is
-  enabled in the Website :guilabel:`Settings`.
-
-.. note::
-   - :guilabel:`Product Variants` must be enabled by going to :menuselection:`Website -->
-     Configuration --> Settings`, in the :guilabel:`eCommerce` section.
-   - Enabled functions apply to all product pages.
-   - Products with single values for their attributes do not generate variants but are still
-     displayed in the :guilabel:`Product Specifications`.
-
-.. _ecommerce/products/image-customization:
+.. _ecommerce/products/images:
 
 Product images and videos
 -------------------------
@@ -169,21 +94,10 @@ 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 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.
-- :guilabel:`Layout`: The :guilabel:`Carousel` layout allows customers to navigate from one image to
-  the next using the :icon:`fa-angle-left` (:guilabel:`left arrow`) or :icon:`fa-angle-right`
-  (:guilabel:`right arrow`); whereas the :guilabel:`Grid` displays four images in a square layout.
-- :guilabel:`Image Zoom`: Select the zoom effect for product images: :guilabel:`Magnifier on hover`
-  :guilabel:`Pop-up on Click`, :guilabel:`Both`, or :guilabel:`None`.
-- :guilabel:`Thumbnails`: Align thumbnails on the :icon:`fa-long-arrow-left` (:guilabel:`Left`)
-  or at
-  the :icon:`fa-long-arrow-down` (:guilabel:`Bottom`).
-- :guilabel:`Main Image`: Click :guilabel:`Replace` to change the product's main image.
-- :guilabel:`Extra Images`: :guilabel:`Add` more extra images or videos (including via URL) or
-  :guilabel:`Remove all`.
+.. tip::
+   Click the :icon:`fa-globe` :guilabel:`Go to Website` smart button to access the product's page
+   on the website and :ref:`customize <ecommerce/product_page/image-customization>` product images
+   and videos using the website editor.
 
 .. _ecommerce/products/digital-files:
 
@@ -286,6 +200,8 @@ Configuration --> Settings`, scroll down to the :guilabel:`Shop - Products` sect
    ensures that any item sold on the website is converted into the corresponding stocked item in
    the delivery order.
 
+.. _ecommerce/products/stock-management/inventory:
+
 Inventory
 ---------
 
@@ -293,16 +209,53 @@ In the :guilabel:`Inventory Defaults` sub-section, fill in those fields:
 
 - :doc:`Warehouse <../../inventory_and_mrp/inventory/warehouses_storage/inventory_management/warehouses>`.
 - :guilabel:`Out-of-Stock`: Enable :guilabel:`Continue Selling` to allow customers to place orders
-  even when the product is **out of stock**. Leave the box unchecked to **prevent orders**.
+  even when the product is **out of stock**. Leave the box unchecked to prevent orders.
 - :guilabel:`Show Available Qty`: Displays the available quantity left under a specified threshold
   on the product page. The available quantity is calculated based on the :guilabel:`On hand`
   quantity minus the quantity already reserved for outgoing transfers.
 
+To inform customers that a product is out of stock, configure an :guilabel:`Out-of-Stock
+Message`. To do so, go to the product form and navigate to the :guilabel:`Sales` tab. Under the
+:guilabel:`Ecommerce shop` section, compose an :guilabel:`Out-of-Stock Message`.
+
+.. image:: products/out-of-stock-message.png
+   :alt: Out-of-stock message on the product page.
+
+.. note::
+   - A :icon:`fa-envelope-o` (:guilabel:`envelope`) :guilabel:`Get notified when back in stock`
+     button appears on the product page when an item is out of stock. Customers can click
+     the link to enter their email address and receive a notification once the item is back
+     in stock.
+   - To create an :guilabel:`Out-of-Stock Message` and have the notification option available,
+     the :ref:`Track inventory setting <inventory/product_management/tracking-inventory>` must be
+     enabled on the product form.
+
+.. _ecommerce/products/stock-management/packagings:
+
+Packagings
+----------
+
+To offer different product pack sizes to customers on the e-commerce, configure product
+:doc:`packagings
+</applications/inventory_and_mrp/inventory/product_management/configure/packaging>`. Then, go to
+:menuselection:`Website --> eCommerce --> Products`, select a product, and navigate to the
+:guilabel:`Sales` tab of the product form. Under :guilabel:`Upsell & cross-sell`, add as many
+package types as needed in the :guilabel:`Packagings` field. The available package types are
+displayed on the e-commerce :doc:`product page <../ecommerce/ecommerce_design/product_page>`.
+
+.. image:: products/product-packagings.png
+   :alt: Product packages on the e-commerce page.
+
+.. tip::
+   It is also possible to add packagings to a specific :ref:`product variant
+   <ecommerce/categories_variants/product-variants>`. To do so, go to the product form, click the
+   :icon:`fa-sitemap` :guilabel:`Variants` :ref:`smart button
+   <products/variants/variants-smart-button>`, and select the relevant product variant. Under
+   :guilabel:`Sales`, add as many package types as needed in the :guilabel:`Packagings` field.
+
 .. toctree::
    :titlesonly:
 
-   products/catalog
    products/prices
    products/cross_upselling
-   products/additional_features
    products/categories_variants

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

@@ -2,9 +2,9 @@
 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.
+Odoo eCommerce provides multiple ways to configure, :doc:`present
+<../../ecommerce/ecommerce_design/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:
 
@@ -90,7 +90,7 @@ 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
+.. image:: ../ecommerce_design/catalog/category-quick-access-top.png
    :alt: Category quick access in the toolbar.
 
 To create e-commerce categories, go to :menuselection:`Website --> eCommerce -->

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

@@ -4,7 +4,8 @@ Cross-selling and upselling
 
 :ref:`Cross-selling <ecommerce/cross_selling>` and
 :ref:`upselling <ecommerce/cross_upselling/alternative>` are sales techniques designed to encourage
-customers to purchase additional or higher-priced products and services from your :doc:`catalog`.
+customers to purchase additional or higher-priced products and services from your
+:doc:`product catalog <../../ecommerce/ecommerce_design/catalog>`.
 
 .. _ecommerce/cross_selling:
 

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

@@ -35,9 +35,9 @@ Choosing the displayed price tax usually depends on a country's regulations or t
    website in the database.
 
 .. tip::
-   - Switch the :ref:`Tax indication <ecommerce/products/product-presentation>` toggle on in the
-     website editor to explicitly indicate if the price is `Tax excluded` or `Tax included` on the
-     product page.
+   - Switch the :ref:`Tax indication <ecommerce_design/product_page/customization>`
+     toggle on in the website editor to explicitly indicate if the price is `Tax excluded` or `Tax
+     included` on the :doc:`product page <../../ecommerce/ecommerce_design/product_page>`.
    - Enable specific :ref:`B2B fields <ecommerce/b2b_b2c/b2b-fields>` in the :ref:`delivery step
      <ecommerce/checkout/delivery>` during the checkout using the :doc:`website editor
      </applications/websites/website/web_design>`.

content/applications/websites/website/structure/header_footer.rst

@@ -118,8 +118,8 @@ Mega menus
 Mega menus are similar to drop-down menus, but instead of a simple list of sub-menus, they display a
 panel divided into groups of navigation options. This makes them suitable for websites with large
 amounts of content or :doc:`e-commerce websites <../../ecommerce>`, as they can help include all of
-your web pages or :doc:`e-commerce categories <../../ecommerce/products/catalog>` in the menu while
-still making all menu items visible at once.
+your web pages or :ref:`e-commerce categories <ecommerce/categories_variants/categories>` in the
+menu while still making all menu items visible at once.
 
 .. image:: header_footer/mega-menu.png
    :alt: Mega menu in the navigation bar.

redirects/19.0.txt

@@ -55,6 +55,8 @@ applications/productivity/sign/vietnam.rst applications/productivity/sign/validi
 # applications/websites
 
 applications/websites/ecommerce/payments.rst applications/websites/ecommerce/checkout.rst
+applications/websites/ecommerce/products/additional_features.rst applications/websites/ecommerce/ecommerce_design/additional_features.rst
+applications/websites/ecommerce/products/catalog.rst applications/websites/ecommerce/ecommerce_design/catalog.rst
 
 # applications/inventory_and_mrp