diff --git a/content/applications/sales/sales/products_prices/products/variants.rst b/content/applications/sales/sales/products_prices/products/variants.rst index 162edd947..3616babd8 100644 --- a/content/applications/sales/sales/products_prices/products/variants.rst +++ b/content/applications/sales/sales/products_prices/products/variants.rst @@ -28,12 +28,12 @@ within the Odoo *Sales* application. other similar records in Odoo. .. seealso:: - :ref:`ecommerce/products/product-variants` + :ref:`Product variants in the eCommerce ` Configuration ============= -To use product variants, the *Variants* setting **must** be activated in the Odoo *Sales* +To use product variants, the :guilabel:`Variants` setting **must** be activated in the Odoo *Sales* application. To do that, go to :menuselection:`Sales app --> Configuration --> Settings`, and locate the @@ -47,6 +47,8 @@ In that section, check the box to enable the :guilabel:`Variants` feature. Then, click :guilabel:`Save` at the top of the :guilabel:`Settings` page. +.. _products/variants/attributes: + Attributes ========== @@ -61,7 +63,6 @@ To create a new attribute from the :guilabel:`Attributes` page, click :guilabel: reveals a blank attributes form that can be customized and configured in a number of ways. .. image:: variants/attribute-creation.png - :align: center :alt: A blank attribute creation form in the Odoo Sales application. First, create an :guilabel:`Attribute Name`, such as `Color` or `Size`. @@ -70,71 +71,71 @@ Next, select one of the options from the :guilabel:`Display Type` field. The :gu Type` determines how this product is shown on the online store, *Point of Sale* dashboard, and *Product Configurator*. -The :guilabel:`Display Type` options are: +The following :guilabel:`Display Type` options are available: -- :guilabel:`Pills`: options appear as selectable buttons on the product page of the online store. -- :guilabel:`Color`: options appear as small, colored squares, which reflect any HTML color codes -- :guilabel:`Radio`: options appear in a bullet-style list on the product page of the online store. -- :guilabel:`Select`: options appear in a drop-down menu on the product page of the online store. - set, on the product page of the online store. -- :guilabel:`Multi-checkbox (option)`: options appear as selectable checkboxes on the product page - of the online store. This allows customers to choose options for themselves and is good choice for - highly customizable products. +.. tabs:: -.. image:: variants/display-types.png - :align: center - :alt: Display Types on Product Configurator on the online store in Odoo. + .. tab:: :guilabel:`Pills` -The :guilabel:`Variant Creation Mode` field informs Odoo when to automatically create a new variant + Options appear as selectable buttons. + + .. image:: variants/pills-display-type.png + :alt: Pills display type + + .. tab:: :guilabel:`Color` + + Options appear as small, colored circles; the colors can be defined using any HTML color code. + + .. image:: variants/color-display-type.png + :alt: Pills display type + + .. tab:: :guilabel:`Radio` + + Options appear as radio buttons. + + .. image:: variants/radio-display-type.png + :alt: Pills display type + + .. tab:: :guilabel:`Select` + + Options appear in a drop-down menu. + + .. image:: variants/select-display-type.png + :alt: Pills display type + + .. tab:: :guilabel:`Image` + + Options appear as images. + + .. image:: variants/image-display-type.png + :alt: Pills display type + + .. tab:: :guilabel:`Multi-checkbox` + + Options appear as selectable checkboxes. This allows customers to choose multiple options, + e.g., to add extras to food orders or highly customizable products. + + .. image:: variants/multi-checkbox-display-type.png + :alt: Pills display type + +The :guilabel:`Variant Creation` field determines if/when a new variant is automatically created once an attribute is added to a product. -.. note:: - The :guilabel:`Variant Creation Mode` field **must** be set to :guilabel:`Never (option)` in - order for the :guilabel:`Multi-checkbox (option)` to work properly as the :guilabel:`Display - Type`. +.. important:: + If the attribute's :guilabel:`Display Type` is :guilabel:`Multi-checkbox`, you **must** set the + :guilabel:`Variant Creation` field to :guilabel:`Never`. - :guilabel:`Instantly`: creates all possible variants as soon as attributes and values are added to a product template. - :guilabel:`Dynamically`: creates variants **only** when corresponding attributes and values are added to a sales order. -- :guilabel:`Never (option)`: never automatically creates variants. +- :guilabel:`Never`: prevents autmatic creation of variants. .. warning:: - Once added to a product, an attribute's :guilabel:`Variants Creation Mode` cannot be edited. + Once added to a product, an attribute's :guilabel:`Variants Creation` mode cannot be edited. -The :guilabel:`eCommerce Filter Visibility` field determines whether or not these attribute options -are visible to the customer on the front-end, as they shop on the online store. - -- :guilabel:`Visible`: the attribute values are visible to customers on the front-end. -- :guilabel:`Hidden`: the attribute values are hidden from customers on the front-end. - -Lastly, in the optional :guilabel:`eCommerce Category` field, select a category from a drop-down -menu to group similar attributes under the same section for added specificity and organization. - -.. note:: - To view the details related to the attribute category selected, click the internal link - :icon:`fa-arrow-right` :guilabel:`(right arrow)` icon to the far-right of the - :guilabel:`eCommerce Category` field, once an option has been selected. Doing so reveals that - attribute category's detail form. - - .. image:: variants/attribute-category-internal-link.png - :align: center - :alt: A standard attribute category detail page accessible via its internal link arrow icon. - - Here, the :guilabel:`Category Name` and :guilabel:`Sequence` is displayed at the top. Followed by - :guilabel:`Related Attributes` associated with the category. These attributes can be - dragged-and-dropped into a desirable order of priority. - - Attributes can be directly added to the category, as well, by clicking :guilabel:`Add a line`. - -.. tip:: - To create an attribute category directly from this field, start typing the name of the new - category, then select either :guilabel:`Create` or :guilabel:`Create and edit...` from the - drop-down menu that appears. - - Clicking :guilabel:`Create` creates the category, which can be modified later. Clicking - :guilabel:`Create and edit...` creates the category and reveals a :guilabel:`Create Category` - pop-up window, in which the new attribute category can be configured and customized. +.. seealso:: + :ref:`Ecommerce-specific settings for attributes ` Attribute values ---------------- @@ -170,12 +171,12 @@ Or, choose a specific color by clicking the *dropper* icon, and selecting a desi currently clickable on the screen. Businesses can attach images to product variant attribute values for customers to view on an -eCommerce webite. To do so, click the :icon:`fa-camera` :guilabel:`(camera)` icon, then click the +eCommerce website. To do so, click the :icon:`fa-camera` :guilabel:`(camera)` icon, then click the :icon:`fa-pencil` :guilabel:`(pencil)` icon and select an image from your local drive. This image -will appear as a color option on the ecommerce product page. +will appear as a color option for the relevant product. -.. image:: variants/ecommerce-pattern-option.png - :alt: Pattern as color option on the ecommerce page. +.. image:: variants/pattern-display.png + :alt: Pattern as color option. .. tip:: Attributes can also be created directly from the product template by adding a new line and typing @@ -258,6 +259,8 @@ In the :guilabel:`Exclude for` field, different :guilabel:`Product Templates` an :guilabel:`Attribute Values` can be added. When added, this specific attribute value will be excluded from those specific products. +.. _products/variants/variants-smart-button: + Variants smart button --------------------- diff --git a/content/applications/sales/sales/products_prices/products/variants/attribute-creation.png b/content/applications/sales/sales/products_prices/products/variants/attribute-creation.png index 6995f3c3c..39539fe88 100644 Binary files a/content/applications/sales/sales/products_prices/products/variants/attribute-creation.png and b/content/applications/sales/sales/products_prices/products/variants/attribute-creation.png differ diff --git a/content/applications/sales/sales/products_prices/products/variants/color-display-type.png b/content/applications/sales/sales/products_prices/products/variants/color-display-type.png new file mode 100644 index 000000000..6e5dc25e6 Binary files /dev/null and b/content/applications/sales/sales/products_prices/products/variants/color-display-type.png differ diff --git a/content/applications/sales/sales/products_prices/products/variants/display-types.png b/content/applications/sales/sales/products_prices/products/variants/display-types.png deleted file mode 100644 index 0eeb30d6e..000000000 Binary files a/content/applications/sales/sales/products_prices/products/variants/display-types.png and /dev/null differ diff --git a/content/applications/sales/sales/products_prices/products/variants/image-display-type.png b/content/applications/sales/sales/products_prices/products/variants/image-display-type.png new file mode 100644 index 000000000..c5dd03507 Binary files /dev/null and b/content/applications/sales/sales/products_prices/products/variants/image-display-type.png differ diff --git a/content/applications/sales/sales/products_prices/products/variants/multi-checkbox-display-type.png b/content/applications/sales/sales/products_prices/products/variants/multi-checkbox-display-type.png new file mode 100644 index 000000000..aefd34b2e Binary files /dev/null and b/content/applications/sales/sales/products_prices/products/variants/multi-checkbox-display-type.png differ diff --git a/content/applications/sales/sales/products_prices/products/variants/pattern-display.png b/content/applications/sales/sales/products_prices/products/variants/pattern-display.png new file mode 100644 index 000000000..cc805c11f Binary files /dev/null and b/content/applications/sales/sales/products_prices/products/variants/pattern-display.png differ diff --git a/content/applications/sales/sales/products_prices/products/variants/pills-display-type.png b/content/applications/sales/sales/products_prices/products/variants/pills-display-type.png new file mode 100644 index 000000000..1aec3631f Binary files /dev/null and b/content/applications/sales/sales/products_prices/products/variants/pills-display-type.png differ diff --git a/content/applications/sales/sales/products_prices/products/variants/radio-display-type.png b/content/applications/sales/sales/products_prices/products/variants/radio-display-type.png new file mode 100644 index 000000000..f37bbc8f0 Binary files /dev/null and b/content/applications/sales/sales/products_prices/products/variants/radio-display-type.png differ diff --git a/content/applications/sales/sales/products_prices/products/variants/select-display-type.png b/content/applications/sales/sales/products_prices/products/variants/select-display-type.png new file mode 100644 index 000000000..d6411993d Binary files /dev/null and b/content/applications/sales/sales/products_prices/products/variants/select-display-type.png differ diff --git a/content/applications/websites/ecommerce/google_merchant_center.rst b/content/applications/websites/ecommerce/google_merchant_center.rst index 00bd02f4d..7350488ec 100644 --- a/content/applications/websites/ecommerce/google_merchant_center.rst +++ b/content/applications/websites/ecommerce/google_merchant_center.rst @@ -70,7 +70,7 @@ Linking Odoo to GMC #. Click :guilabel:`Manage feeds`. #. In the :guilabel:`Product Feeds` pop-up window, select a :ref:`pricelist `, a :ref:`language ` and :ref:`categories - `, and :guilabel:`Save`. + `, and :guilabel:`Save`. .. note:: You must first enable the corresponding :doc:`language ` diff --git a/content/applications/websites/ecommerce/products.rst b/content/applications/websites/ecommerce/products.rst index 5e0038816..38e468db1 100644 --- a/content/applications/websites/ecommerce/products.rst +++ b/content/applications/websites/ecommerce/products.rst @@ -6,9 +6,8 @@ Products **Odoo eCommerce** allows you to :ref:`add products ` and manage your :ref:`product pages ` directly from the Website app. It also -allows you to add :ref:`product variants ` and -:ref:`digital files `, :ref:`translating -` the product page content, and :ref:`managing stock +allows you to add :ref:`digital files `, :ref:`translate +` the product page content, and :ref:`manage the stock `. .. _ecommerce/products/add-products: @@ -36,8 +35,10 @@ page. When you :guilabel:`Save`, the product page is automatically published. :guilabel:`Unpublished` to :guilabel:`Published`. .. seealso:: - :doc:`Create new products using the Barcode Lookup database - `. + - :doc:`Create new products using the Barcode Lookup database + `. + - :doc:`Configure the Gelato connector in Odoo to synchronize the product catalog and automate + order fulfilment with Gelato `. .. _ecommerce/products/import-products: @@ -74,9 +75,11 @@ Product information To add general information about a product, navigate to :menuselection:`Website --> eCommerce --> Products` and select the product. You can configure the product page from the form -by adding :ref:`variants `, :ref:`digital documents +by adding :ref:`variants `, :ref:`digital documents `, or :ref:`translating ` content. +.. _ecommerce/products/description: + You can also add an ecommerce-specific product description to be displayed below the product name on the product's page. To do so, go to the :guilabel:`Sales` tab, scroll down to the :guilabel:`Ecommerce description` section, and add a description. Use Odoo's @@ -124,7 +127,7 @@ Use the :guilabel:`Customize` tab to modify the page layout or add features: :ref:`VAT included or excluded `. - :guilabel:`Variants`: Show all possible product :ref:`variants - ` vertically as a :guilabel:`Products List` + ` 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 ` if the + :ref:`variants ` if the :ref:`Product comparison tool ` is enabled in the Website :guilabel:`Settings`. @@ -185,64 +188,6 @@ and select the relevant media. In the :guilabel:`Customize` tab, use the followi .. note:: Images must be in PNG or JPG format and with a minimum size of 1024x1024 to trigger the zoom. -.. _ecommerce/products/products-block: - -Products block -============== - -The :guilabel:`Products` :doc:`building block <../website/web_design/building_blocks>` is used to -display a selection of products sold on your website. - -.. image:: products/products-block.png - :alt: Example of a products block - -By default, the block displays the :guilabel:`Newest Products`. To change which products are shown, -go to the :guilabel:`Customize` tab's :guilabel:`Products` section and set the :guilabel:`Filter` -field to :guilabel:`Recently Sold Products` or :guilabel:`Recently Viewed Products`. - -In addition, it is possible to display products from a specific category only using the -:guilabel:`Category` field. - -You can also filter products by :guilabel:`Tags`, include :guilabel:`Variants`, and adjust the -display by selecting a different :guilabel:`Template`. - -.. _ecommerce/products/product-variants: - -Product variants -================ - -:doc:`Product variants <../../sales/sales/products_prices/products/variants>` are different versions -of the same product, such as various colors or materials, with potential differences in price and -availability. - -To configure product variants for a product: - -#. Go to :menuselection:`Website --> Configuration --> Settings`. -#. Scroll down to the :guilabel:`Shop - Products` section and enable the - :guilabel:`Product Variants` feature. -#. Access the :ref:`product forms ` 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 `, - set the :guilabel:`Attributes` feature to :guilabel:`Left` using the website editor. - - To group attributes under the same section when - :ref:`comparing products `, go to - the :guilabel:`eCommerce Category` field and either select an :doc:`existing category or create - a new one <../../websites/ecommerce/products>`. - -.. note:: - Two attribute values are needed to make the filter visible. - -.. seealso:: - :doc:`Product variants <../../sales/sales/products_prices/products/variants>` - .. _ecommerce/products/digital-files: Digital files @@ -315,8 +260,12 @@ To set the product's website availability, navigate to the :ref:`product form available on. Leave the field blank to make the product available on *all* websites. .. note:: - You can make a product available on either *one* website or *all* websites, but selecting only - *some* websites is not possible. + - You can make a product available on either *one* website or *all* websites, but selecting only + *some* websites is not possible. To sell the product on multiple specific websites without + making it available on all, **duplicate** the product for each website and assign the + corresponding website to each duplicate. + - Enable the :guilabel:`Is Published` toggle to make sure the product is available for website + visitors. .. _ecommerce/products/stock-management: @@ -332,6 +281,14 @@ Configuration --> Settings`, scroll down to the :guilabel:`Shop - Products` sect - To display the stock level on the product page, the :guilabel:`Product Type` field must be set to :guilabel:`Storable` in the :ref:`product form `. +.. note:: + If a unique reference is needed for inventory management, install the :doc:`Manufacturing app + `, and create :doc:`Kit bills of materials + `. Each + kit links its published "virtual" products to the main reference tracked in Inventory. This + ensures that any item sold on the website is converted into the corresponding stocked item in + the delivery order. + Inventory --------- @@ -351,3 +308,4 @@ In the :guilabel:`Inventory Defaults` sub-section, fill in those fields: products/prices products/cross_upselling products/additional_features + products/categories_variants diff --git a/content/applications/websites/ecommerce/products/additional_features.rst b/content/applications/websites/ecommerce/products/additional_features.rst index 3e9544346..b6580d232 100644 --- a/content/applications/websites/ecommerce/products/additional_features.rst +++ b/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 `. Customers can +products based on their :ref:`attributes `. Customers can click this button to select the products they wish to compare, then click :guilabel:`Compare` in the pop-up window at the bottom of the page to see the comparison summary. @@ -139,7 +139,7 @@ the ecommerce products. :alt: Create a new ribbon in the website editor - It is also possible to add ribbons for specific :ref:`product variants - `. To do so, go to :menuselection:`Website --> + `. 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. diff --git a/content/applications/websites/ecommerce/products/catalog.rst b/content/applications/websites/ecommerce/products/catalog.rst index 61aa0c7cc..89eebffb6 100644 --- a/content/applications/websites/ecommerce/products/catalog.rst +++ b/content/applications/websites/ecommerce/products/catalog.rst @@ -1,220 +1,251 @@ -======= -Catalog -======= +=============== +Product catalog +=============== -The eCommerce catalog displays products for customers to browse. It is organized using product -categories, available options, sorting, and navigation paths. Essentially, the eCommerce catalog -is the shop page of your website. +The eCommerce catalog displays products for customers to browse. It is organized using :ref:`product +categories `, available :ref:`product variants +`, sorting options, and navigation paths. +Essentially, the eCommerce catalog is the shop page of your website. -The product catalog includes a :ref:`top bar `, a :ref:`side panel -`, and a :ref:`product listing area -`. With Odoo, you can :ref:`customize the layout -`, and filter by :ref:`categories and attributes -`. +The product catalog features a :ref:`toolbar and some filters ` +in the sidebar and/or top bar, along with a dedicated :ref:`product listing area +`. Additionally, the shop and category pages' :ref:`layout +` as well as the :ref:`eCommerce footer +` can be customized, and you can add :ref:`building 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 `, and -:ref:`category quick access `. +The toolbar and sidebar provide advanced filtering tools to help customers +search and navigate the product catalog using :ref:`categories ` and +:ref:`attributes `. -.. _ecommerce/catalog/sort-by-and-display-option: +.. _ecommerce/catalog/categories: -Sort-by search and display options ----------------------------------- +Categories +---------- -You can toggle the :guilabel:`Search Bar`, display :ref:`categories ` -and/or :ref:`attributes `, and enable or disable the -:guilabel:`Sort-By` as well as the :ref:`Layout ` buttons in -the :guilabel:`Top Bar`. +To create a :ref:`category ` quick access in the toolbar +or general access in the sidebar, click the :guilabel:`Top` and/or :guilabel:`Sidebar` button next +to :guilabel:`Categories`, and choose a :guilabel:`Style` for them. When the :guilabel:`Sidebar` is +selected, the option :guilabel:`Collapse Category Recursive` appears, allowing you to collapse the +category in the sidebar. -The :guilabel:`Sort-by` button is toggled by default, and customers can choose between the -following :guilabel:`Default Sort` options: +.. image:: catalog/category-quick-access-top.png + :alt: Category quick access in the toolbar. + +.. note:: + The category filters located in the sidebar are not affected by the :guilabel:`Filters` setting. + +.. _ecommerce/catalog/toolbar: + +Toolbar +------- + +It is possible to display a search bar or sort-by options in the toolbar of the shop page by +clicking the :guilabel:`Sort By` and/or :guilabel:`Search` buttons next to the :guilabel:`Toolbar` +label. Toogle the :guilabel:`Floating` switch on to always display the search bar, the +:ref:`pricelist selector ` (if any), and sort-by options at the botton +of the window, even when scrolling, and select a :guilabel:`Default Sort` option: -- :guilabel:`None` - :guilabel:`Featured` - :guilabel:`Newest Arrivals` - :guilabel:`Name (A-Z)` - :guilabel:`Price - Low to High` - :guilabel:`Price - High to Low` -The default sort applies to *all* :ref:`categories `. - .. tip:: - If you don't want to display a top bar or :ref:`side panel `, - you can disable all related options in the website editor. + - The default sort applies to *all* :ref:`categories `. + - If you do not want to display a toolbar or sidebar, disable all related options in the website + editor, and make sure to only assign one pricelist to the website. -.. _ecommerce/catalog/side-panel: +.. _ecommerce/catalog/filters: -Side panel -========== +Filters +------- -The side panel provides advanced filtering tools to organize your product categories. -To further :ref:`categorize ` the shop page, you can activate -various filters, such as the :ref:`attribute ` filter. +Set the :guilabel:`Filters` field to: -You can also add a :guilabel:`Datepicker` option to display a date range calendar to check -the availability of rental products over a specific period. The :doc:`Rental app -<../../../sales/rental>` must be installed to use this feature. +- :guilabel:`Sidebar`: to display filters in the side panel; +- :guilabel:`Off-screen menu`: to display filters in a slide-out menu that opens when clicking + the :icon:`fa-sliders` :guilabel:`Filters` button; +- :guilabel:`Hide`: to hide filters entirely. -It is also possible to toggle the :guilabel:`Collapsible sidebar` switch to make the side panel -manually collapsible. +By default, two :guilabel:`Filters` are enabled: -.. tip:: - To use a price range or tags filter, you have to enable :ref:`attributes - ` first. + - :guilabel:`Price`: Use the switch to display a :guilabel:`Price Range` bar, which + allows customers to filter products according to a specific price range by dragging adjustable + handles. + - :guilabel:`Tags`: Toggle the switch to display product :guilabel:`Tags` on the shop page, and + allow customers to filter products using those tags by going to the + :guilabel:`Tags` section. -.. _ecommerce/catalog/categories: + .. tip:: + To create product tags on your e-commerce, go to :menuselection:`eCommerce --> Product Tags`, + and click :guilabel:`New`. Add a :guilabel:`Tag` name, toggle the :guilabel:`Visible to + customers` switch, and choose a :guilabel:`Color`. Optionally, add an image. Then go to the + product form, and assign the relevant tags where needed. -Product categorization in catalog -================================= - -eCommerce categories are used to organize products into groups, making it easier for customers -to browse the online store. - -To create eCommerce categories, go to :menuselection:`Website --> eCommerce --> -eCommerce Categories`, and click :guilabel:`New`. On the category form, add a -:guilabel:`Name`, optionally enter a :guilabel:`Parent Category`, and write a :guilabel:`Category -Description`, if needed. - -To use eCommerce categories, go to :menuselection:`Website --> eCommerce --> Products`, select -the product you wish to modify, go to the :guilabel:`Sales` tab, navigate to the -:guilabel:`Ecommerce shop` section, and select the :guilabel:`Categories` it belongs to. - -.. note:: - A single product can belong to multiple eCommerce categories. - -Once the categories are configured and assigned to the relevant products, go to the main shop page -and open the website editor. In the :guilabel:`Categories` option, you can either enable -a menu on the :guilabel:`Left`, i.e., in the :ref:`side panel `, -or on the :guilabel:`Top`, i.e., in the :ref:`top bar `, or both. -If you select the :guilabel:`Left` category, the option :guilabel:`Collapsible Category Recursive` -appears, allowing you to collapse the category in the side panel. - -.. image:: catalog/catalog-panel-categories.png - :alt: Categories options for your eCommerce website - -.. seealso:: - :doc:`../products` +For :doc:`rental products <../../../sales/rental>`, you can also add a :guilabel:`Rental Date` +option to display a date range calendar to check their availability over a specific period. .. _ecommerce/catalog/attributes: Attributes ----------- +~~~~~~~~~~ -Attributes refer to characteristics of a product, such as the color or material, whereas -variants are the different combinations of attributes. To configure attributes and variants, go to -:menuselection:`Website --> eCommerce --> Products`, select a product, and click the -:guilabel:`Attributes & Variants` tab. Add as many attributes as desired. +When you offer :ref:`product variants ` with +different :ref:`attributes `, those options appear +in the sidebar or slide-out menu when filters are shown. The menu automatically adapts to the +number of attribute sections: + +- **Up to 4 attributes**: all the attribute values are displayed. +- **More than 4 attributes**: the sections are automatically collapsed. + +For :guilabel:`Radio` and :guilabel:`Select` :ref:`display types `, +a :guilabel:`View More` button appears when there are more than **8** values, and a search field +when the number of values exceeds **20**. + +.. note:: + - For :guilabel:`Radio` and :guilabel:`Select` :ref:`display types + `, 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 -`) and/or :guilabel:`Top` (:ref:`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 `. - -.. 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 `. - -.. tip:: - It is also possible to customize individual :ref:`product pages `. - .. _ecommerce/catalog/layout: -In the website editor, choose the :ref:`layout `, and -set the default layout to either :guilabel:`Grid` or :guilabel:`List` view. +Define the number of products to display on your shop pages by configuring the :guilabel:`Size` +displayed per page and line, and specify the number of columns for :guilabel:`Mobile` devices. -Use the following options to further adjust the layout: +.. note:: + The number of products displayed on a page may affect performance and page loading speed. - - :guilabel:`Size`: Set the number of products displayed per page and line. - - :guilabel:`Gap`: Define the gap between the products. - - :guilabel:`Style`: Select :guilabel:`Default`, :guilabel:`Cards`, :guilabel:`Thumbnails`, or - :guilabel:`Grid`. - - :guilabel:`Image Size`: Choose the aspect ratio for the product images: - :guilabel:`Landscape (4/3)`, :guilabel:`Default (1/1)`, :guilabel:`Portrait (4/5)`, or - :guilabel:`Vertical (2/3)`. You can also adjust the display by changing the :guilabel:`Fill` - options to fit your design preferences best. - -Toggle the :guilabel:`Prod. Desc.` switch to display the product description below the product's -name. - -.. tip:: - You can choose the size of the grid, but be aware that displaying too many products may affect - performance and page loading speed. - -In addition, you can manually change a product’s position on the shop page. To do so, go to the -main shop page, click the product, and open the website editor. In the :guilabel:`Product` section, -you can reorder the products by using the arrows. The `<<` `>>` buttons allow to move the product to -the extreme left or right, and `<` `>` allow to move it one row to the left or right. +In addition, you can manually change a product’s position on the shop page or product category page. +To do so, click a specific product, change its :guilabel:`Size`, and :guilabel:`Re-order` it using +the arrows in the :guilabel:`Product` section of the :guilabel:`Style` tab. The +:icon:`fa-angle-double-left` (:guilabel:`double left arrow`) and :icon:`fa-angle-double-right` +(:guilabel:`double right arrow`) buttons allow you to move the product to the extreme left or right, +and the :icon:`fa-angle-left` (:guilabel:`single left arrow`) and :icon:`fa-angle-right` +(:guilabel:`single left arrow`) buttons allow you to move it one row to the left or right. You can +also choose or create a :ref:`ribbon or badge +` to highlight a specific product. .. tip:: It is also possible to change the products' positions on the shop page by going to :menuselection:`Website --> eCommerce --> Products`, switching to the list view, and dragging and dropping the products within the list. +.. _ecommerce/catalog/products-design: + +Products design +--------------- + +Choose a :guilabel:`Products Design`, click the :icon:`fa-paint-brush` :guilabel:`(paint brush)` +icon next to it to customize the product cards' design, then: + +- Choose a :guilabel:`Preset` layout; +- Adapt the :guilabel:`General` design; +- Customize the :guilabel:`Text & content` (e.g., show a :guilabel:`Description`, and + :guilabel:`Ratings`); +- Customize the :guilabel:`Images`' layout (e.g., enable :guilabel:`Secondary + Image` to show a second image when hovering over the product image on the shop or category page); +- Enable some :guilabel:`Actions` (e.g., :icon:`fa-shopping-cart` + :ref:`Add to cart `, :icon:`fa-exchange` :ref:`Compare + `, or :icon:`fa-heart` :ref:`Wishlist + `) and customize their placement. + +.. tip:: + You can also add a :ref:`variant picture ` 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 `. +- 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 - ` for quick access. + .. 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 + ` for quick access. + - It is also possible to customize individual :ref:`product pages + `. -.. seealso:: - - :doc:`Products <../products>` - - :doc:`additional_features` +.. _ecommerce/catalog/catalog-blocks: + +Catalog blocks +============== + +The :guilabel:`Catalog` :doc:`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 ` the +blocks in the :guilabel:`Style` tab. + +.. example:: + .. image:: catalog/catalog-products-block.png + :alt: Example of a catalog block for specific products + + For example, for this specific :guilabel:`Catalog` block template to display a selection of + products sold on your website, you can: + + - Adapt the block's design. + - Select a :guilabel:`Cards Design`, and click the :icon:`fa-paint-brush` :guilabel:`(paint + brush)` icon to :ref:`customize ` it. + - Define which items are shown in the block by selecting the relevant :guilabel:`Filter` option, + e.g., :guilabel:`Newest Products` to show the latest arrivals. + - Select a specific product category in the :guilabel:`Category` dropdown list. + - Filter products by toggling the :guilabel:`Tags` and/or :guilabel:`Show variants` options. + +.. _ecommerce/catalog/footer: + +Ecommerce-specific website footer +================================= + +The :ref:`website footer ` can also be configured to use +the ecommerce-specific template. Then add the relevant :ref:`links `, and +adapt the footer's text and layout as needed in the website editor. The :doc:`available payment +methods ` 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. diff --git a/content/applications/websites/ecommerce/products/catalog/catalog-attributes.png b/content/applications/websites/ecommerce/products/catalog/catalog-attributes.png deleted file mode 100644 index f2fc54c94..000000000 Binary files a/content/applications/websites/ecommerce/products/catalog/catalog-attributes.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/products/catalog/catalog-panel-categories.png b/content/applications/websites/ecommerce/products/catalog/catalog-panel-categories.png deleted file mode 100644 index dc5ed35f8..000000000 Binary files a/content/applications/websites/ecommerce/products/catalog/catalog-panel-categories.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/products/catalog/catalog-products-block.png b/content/applications/websites/ecommerce/products/catalog/catalog-products-block.png new file mode 100644 index 000000000..32d917e23 Binary files /dev/null and b/content/applications/websites/ecommerce/products/catalog/catalog-products-block.png differ diff --git a/content/applications/websites/ecommerce/products/catalog/catalog-show-thumbnails.png b/content/applications/websites/ecommerce/products/catalog/catalog-show-thumbnails.png new file mode 100644 index 000000000..399f332ce Binary files /dev/null and b/content/applications/websites/ecommerce/products/catalog/catalog-show-thumbnails.png differ diff --git a/content/applications/websites/ecommerce/products/catalog/category-quick-access-top.png b/content/applications/websites/ecommerce/products/catalog/category-quick-access-top.png new file mode 100644 index 000000000..5926d111f Binary files /dev/null and b/content/applications/websites/ecommerce/products/catalog/category-quick-access-top.png differ diff --git a/content/applications/websites/ecommerce/products/categories_variants.rst b/content/applications/websites/ecommerce/products/categories_variants.rst new file mode 100644 index 000000000..f41342fb0 --- /dev/null +++ b/content/applications/websites/ecommerce/products/categories_variants.rst @@ -0,0 +1,112 @@ +======================= +Categories and variants +======================= + +Odoo eCommerce provides multiple ways to configure, :doc:`present ` and sell different +product options to customers while organizing products by category for a better overiew and smoother +navigation. + +.. _ecommerce/categories_variants/product-variants: + +Product variants +================ + +:doc:`Product variants ` are different +versions of the same product, created by combining :ref:`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 `, 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 `. + +.. 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 `, 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 `. + +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 +`, 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 +` 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 +`, select the relevant +:guilabel:`eCommerce Category` or create a new one. Click the :icon:`fa-arrow-right` +:guilabel:`(internal link)` icon next to the category name to: + +- Rename the category. +- Change its :guilabel:`Sequence`. +- Reorder the :guilabel:`Related Attributes` to define the order in which they are displayed in + the comparison summary. +- Add attributes to the category by clicking :guilabel:`Add a line`. + +.. image:: categories_variants/attribute-categories.png + :alt: Comparison summary page with attribute categories. + +.. _ecommerce/categories_variants/categories: + +Product categorization in catalog +================================= + +eCommerce categories are used to organize products into groups, making it easier for customers +to browse the online store. + +.. image:: catalog/category-quick-access-top.png + :alt: Category quick access in the toolbar. + +To create eCommerce categories, go to :menuselection:`Website --> eCommerce --> +eCommerce Categories`, and click :guilabel:`New`. On the category form, add a +:guilabel:`Name`, optionally enter a :guilabel:`Parent` category, restrict it to a specific +:guilabel:`Website`, and write a :guilabel:`Description`, if needed. You can also add a +:guilabel:`Cover Image` for the category. + +To use :guilabel:`eCommerce categories`, go to :menuselection:`Website --> eCommerce --> Products`, +select the product you wish to modify, go to the :guilabel:`Sales` tab, navigate to the +:guilabel:`Ecommerce shop` section, and select the :guilabel:`Categories` it belongs to. + +.. note:: + - A single product can belong to multiple eCommerce categories. + - Define how to :ref:`display categories ` on the shop page. + - Categories that do not contain any products are not visible on the shop page. + +.. seealso:: + :doc:`../products` diff --git a/content/applications/websites/ecommerce/products/categories_variants/attribute-categories.png b/content/applications/websites/ecommerce/products/categories_variants/attribute-categories.png new file mode 100644 index 000000000..fc73842a7 Binary files /dev/null and b/content/applications/websites/ecommerce/products/categories_variants/attribute-categories.png differ diff --git a/content/applications/websites/ecommerce/products/categories_variants/attributes-values.png b/content/applications/websites/ecommerce/products/categories_variants/attributes-values.png new file mode 100644 index 000000000..528dbf104 Binary files /dev/null and b/content/applications/websites/ecommerce/products/categories_variants/attributes-values.png differ diff --git a/content/applications/websites/ecommerce/products/categories_variants/variants-show-thumbnails.png b/content/applications/websites/ecommerce/products/categories_variants/variants-show-thumbnails.png new file mode 100644 index 000000000..399f332ce Binary files /dev/null and b/content/applications/websites/ecommerce/products/categories_variants/variants-show-thumbnails.png differ diff --git a/content/applications/websites/ecommerce/products/prices.rst b/content/applications/websites/ecommerce/products/prices.rst index 0a8317c8a..e366288e0 100644 --- a/content/applications/websites/ecommerce/products/prices.rst +++ b/content/applications/websites/ecommerce/products/prices.rst @@ -122,7 +122,7 @@ Selectable pricelists Selectable pricelists are useful, for example, when selling products in :doc:`multiple currencies ` and allow customers to choose a pricelist using the catalog's pricelist selector located next to the :ref:`search bar -`. +`. .. image:: prices/pricelist-selector.png :alt: Pricelist selector on the ecommerce. diff --git a/content/applications/websites/ecommerce/products/products-block.png b/content/applications/websites/ecommerce/products/products-block.png deleted file mode 100644 index e000ec5a1..000000000 Binary files a/content/applications/websites/ecommerce/products/products-block.png and /dev/null differ diff --git a/content/developer/tutorials/website_theme/05_dynamic_templates.rst b/content/developer/tutorials/website_theme/05_dynamic_templates.rst index e652587dc..ef49a124f 100644 --- a/content/developer/tutorials/website_theme/05_dynamic_templates.rst +++ b/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 - ` for the products. + ` for the products. .. spoiler:: Solutions