[IMP] ecommerce: updated catalog page

Updated catalog page. Forward to master.

closes odoo/documentation#2971

Taskid: 3071640
Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>

content/applications/websites/ecommerce.rst

@@ -23,7 +23,6 @@ products and increase your average cart sizes.
 .. toctree::
    :titlesonly:
 
-   ecommerce/getting_started
    ecommerce/managing_products
    ecommerce/taxes
    ecommerce/shopper_experience

content/applications/websites/ecommerce/getting_started.rst

@@ -1,11 +0,0 @@
-:nosearch:
-
-=================
-Get started
-=================
-
-.. toctree::
-   :titlesonly:
-
-   getting_started/product_page
-   getting_started/catalog

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

@@ -1,37 +0,0 @@
-==================================
-How to customize my catalog page
-==================================
-
-Product Catalog
-===============
-
-All your published items show up in your catalog page (or *Shop* page).
-
-.. image:: catalog/shop.png
-   :align: center
-
-Most options are available in the *Customize* menu: display attributes,
-website categories, etc.
-
-.. image:: catalog/shop_customize.png
-   :align: center
-
-Highlight a product
-===================
-
-Boost the visibility of your star/promoted products: push them to top, make them
-bigger, add a ribbon that you can edit (Sale, New, etc.). Open the Shop page, switch
-to Edit mode and click any item to start customizing the grid.
-
-See how to do it: https://www.odoo.com/openerp_website/static/src/video/e-commerce/editing.mp4
-
-Quick add to cart
-=================
-
-If your customers buy a lot of items at once, make their process shorter by enabling purchases from
-the catalog page. To do so, add product description and add to cart button. Turn on the following
-options in *Customize* menu:  Product Description, Add to Cart, List View (to display product
-description better).
-
-.. image:: catalog/shop_list.png
-   :align: center

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

@@ -1,31 +0,0 @@
-============================
-How to build a product page
-============================
-
-On the website click *New Page* in the top-right corner.
-
-Then click *New Product* and follow the blinking tips.
-
-.. image:: product_page/create_product.png
-   :align: center
-
-Here are the main elements of the Product page:
-
-.. image:: product_page/product_page_tips.png
-   :align: center
-
-Many elements can be made visible from the *Customize* menu.
-
-.. image:: product_page/product_customize.png
-   :align: center
-
-See how to configure your products from links here below.
-
-.. seealso::
-
-  * :doc:`../managing_products/variants`
-  * :doc:`/applications/sales/sales/products_prices/taxes`
-  * :doc:`../maximizing_revenue/cross_selling`
-  * :doc:`../maximizing_revenue/reviews`
-  * :doc:`../maximizing_revenue/pricing`
-  * :doc:`../../website/optimize/seo`

content/applications/websites/ecommerce/managing_products.rst

@@ -7,6 +7,7 @@ Manage my products
 .. toctree::
    :titlesonly:
 
+   managing_products/catalog
    managing_products/multi_images
    managing_products/variants
    ../../sales/sales/products_prices/products/import

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

@@ -0,0 +1,193 @@
+=======
+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.
+
+Categorize the product catalog
+==============================
+
+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.
+
+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`.
+
+.. image:: catalog/catalog-categories.png
+   :align: center
+   :alt: eCommerce categories under the "Sales" tab
+
+.. note::
+   A single product can appear under 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.
+
+.. image:: catalog/catalog-panel-categories.png
+   :align: center
+   :alt: Categories options for your eCommerce website
+
+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.
+
+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.
+
+.. seealso::
+   - :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.
+
+.. 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.
+
+Sort-by search
+~~~~~~~~~~~~~~
+
+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.
+
+The **sorting** options are:
+
+- Featured
+- Newest Arrivals
+- Name (A-Z)
+- Price - Low to High
+- Price - High to Low
+
+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.
+
+.. image:: catalog/catalog-reorder.png
+   :align: center
+   :alt: Product rearrangement in the catalog
+
+Page design
+===========
+
+Category page
+-------------
+
+You can customize the layout of the category page using the website builder.
+
+.. important::
+   Editing the layout of the category page is global; editing one category layout affects *all*
+   category pages.
+
+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.
+
+.. image:: catalog/catalog-category-layout.png
+   :align: center
+   :alt: Layout options of the category pages.
+
+.. tip::
+   You can choose the size of the grid, but be aware that displaying too many products may affect
+   performance and page loading speed.
+
+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:
+
+- 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
+   :alt: Ribbon highlight
+
+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.
+
+- :guilabel:`Add to Cart`: adds a button to **add the product to the cart**;
+- :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.
+
+.. 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.

redirects/16.0.txt

@@ -18,6 +18,8 @@ applications/finance/payment_acquirers/wire_transfer.rst applications/finance/pa
 
 # applications/websites
 
+applications/websites/ecommerce/getting_started/catalog.rst applications/websites/ecommerce/managing_products/catalog.rst                        # /getting_started/catalog -> /managing_products/catalog
+applications/websites/ecommerce/getting_started/product_page.rst applications/websites/ecommerce/managing_products/catalog.rst                   # /getting_started/product_page -> /managing_products/catalog
 applications/websites/ecommerce/shopper_experience/payment_acquirer.rst applications/websites/ecommerce/shopper_experience/payment_providers.rst # payment_acquirer -> payment_providers