diff --git a/content/applications/inventory_and_mrp/manufacturing/advanced_configuration/sub_assemblies.rst b/content/applications/inventory_and_mrp/manufacturing/advanced_configuration/sub_assemblies.rst index a785fb586c..3f516aff4c 100644 --- a/content/applications/inventory_and_mrp/manufacturing/advanced_configuration/sub_assemblies.rst +++ b/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` diff --git a/content/applications/websites/ecommerce.rst b/content/applications/websites/ecommerce.rst index a0a9ce251f..5ee2eceffe 100644 --- a/content/applications/websites/ecommerce.rst +++ b/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 your 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 diff --git a/content/applications/websites/ecommerce/ecommerce_design.rst b/content/applications/websites/ecommerce/ecommerce_design.rst new file mode 100644 index 0000000000..d52cb16c7b --- /dev/null +++ b/content/applications/websites/ecommerce/ecommerce_design.rst @@ -0,0 +1,44 @@ +:nosearch: +:show-content: +:hide-page-toc: + +================ +eCommerce design +================ + +Customize the design of your :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 enhance +the user experience. + +.. cards:: + + .. card:: Product page + :target: ecommerce_design/product_page + :large: + + Design your product pages by showcasing product details and additional information, adding + product images and videos, and using the drag-and-drop building blocks. + + .. card:: Product catalog + :target: ecommerce_design/catalog + :large: + + Organize your 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 buttons on the shop and/or product page and highlight your products. + +.. seealso:: + `Odoo Tutorials: eCommerce `_ + +.. toctree:: + :titlesonly: + + ecommerce_design/product_page + ecommerce_design/catalog + ecommerce_design/additional_features diff --git a/content/applications/websites/ecommerce/products/additional_features.rst b/content/applications/websites/ecommerce/ecommerce_design/additional_features.rst similarity index 100% rename from content/applications/websites/ecommerce/products/additional_features.rst rename to content/applications/websites/ecommerce/ecommerce_design/additional_features.rst diff --git a/content/applications/websites/ecommerce/products/additional_features/badge-applied.png b/content/applications/websites/ecommerce/ecommerce_design/additional_features/badge-applied.png similarity index 100% rename from content/applications/websites/ecommerce/products/additional_features/badge-applied.png rename to content/applications/websites/ecommerce/ecommerce_design/additional_features/badge-applied.png diff --git a/content/applications/websites/ecommerce/products/additional_features/create-new-ribbon.png b/content/applications/websites/ecommerce/ecommerce_design/additional_features/create-new-ribbon.png similarity index 100% rename from content/applications/websites/ecommerce/products/additional_features/create-new-ribbon.png rename to content/applications/websites/ecommerce/ecommerce_design/additional_features/create-new-ribbon.png diff --git a/content/applications/websites/ecommerce/products/additional_features/product-comparison.png b/content/applications/websites/ecommerce/ecommerce_design/additional_features/product-comparison.png similarity index 100% rename from content/applications/websites/ecommerce/products/additional_features/product-comparison.png rename to content/applications/websites/ecommerce/ecommerce_design/additional_features/product-comparison.png diff --git a/content/applications/websites/ecommerce/products/catalog.rst b/content/applications/websites/ecommerce/ecommerce_design/catalog.rst similarity index 98% rename from content/applications/websites/ecommerce/products/catalog.rst rename to content/applications/websites/ecommerce/ecommerce_design/catalog.rst index de223a0d2c..399e2da60b 100644 --- a/content/applications/websites/ecommerce/products/catalog.rst +++ b/content/applications/websites/ecommerce/ecommerce_design/catalog.rst @@ -117,7 +117,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 +168,7 @@ To customize the product cards' design, choose a :guilabel:`Products Design`, cl .. tip:: You can also add a :ref:`variant picture ` on the - product card and product page. + product card. .. _ecommerce/catalog/customize-layout: @@ -200,8 +200,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 ` for quick access. - - It is also possible to customize individual :ref:`product pages - `. + - It is also possible to customize individual :doc:`product pages `. .. _ecommerce/catalog/catalog-blocks: diff --git a/content/applications/websites/ecommerce/products/catalog/catalog-header-footer.png b/content/applications/websites/ecommerce/ecommerce_design/catalog/catalog-header-footer.png similarity index 100% rename from content/applications/websites/ecommerce/products/catalog/catalog-header-footer.png rename to content/applications/websites/ecommerce/ecommerce_design/catalog/catalog-header-footer.png diff --git a/content/applications/websites/ecommerce/products/catalog/catalog-products-block.png b/content/applications/websites/ecommerce/ecommerce_design/catalog/catalog-products-block.png similarity index 100% rename from content/applications/websites/ecommerce/products/catalog/catalog-products-block.png rename to content/applications/websites/ecommerce/ecommerce_design/catalog/catalog-products-block.png diff --git a/content/applications/websites/ecommerce/products/catalog/catalog-show-thumbnails.png b/content/applications/websites/ecommerce/ecommerce_design/catalog/catalog-show-thumbnails.png similarity index 100% rename from content/applications/websites/ecommerce/products/catalog/catalog-show-thumbnails.png rename to content/applications/websites/ecommerce/ecommerce_design/catalog/catalog-show-thumbnails.png diff --git a/content/applications/websites/ecommerce/products/catalog/category-quick-access-top.png b/content/applications/websites/ecommerce/ecommerce_design/catalog/category-quick-access-top.png similarity index 100% rename from content/applications/websites/ecommerce/products/catalog/category-quick-access-top.png rename to content/applications/websites/ecommerce/ecommerce_design/catalog/category-quick-access-top.png diff --git a/content/applications/websites/ecommerce/ecommerce_design/product_page.rst b/content/applications/websites/ecommerce/ecommerce_design/product_page.rst new file mode 100644 index 0000000000..09d63708ae --- /dev/null +++ b/content/applications/websites/ecommerce/ecommerce_design/product_page.rst @@ -0,0 +1,192 @@ +============ +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 +`, and choose :ref:`which product information to display +`. + +To customize the product pages, click :guilabel:`Edit` in the upper-right corner and navigate to +the :guilabel:`Style` tab. + +.. _ecommerce/product_page/image-customization: + +Product images and videos +========================= + +After :ref:`adding media items `, go to :guilabel:`Images Area` to +define the images' size and :guilabel:`Position`. + +To customize the image and video section, navigate to the :guilabel:`Images` section, and use the +following options: + +- :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`: Customers can navigate from one image to the next using the + :icon:`fa-angle-left` (:guilabel:`left arrow`) or :icon:`fa-angle-right` (:guilabel:`right + arrow`). To customize this display type, use: + + - :guilabel:`Thumbnails`: Show additional product images or videos on the + :icon:`fa-long-arrow-left` (:guilabel:`Left`) or at the :icon:`fa-long-arrow-down` + (:guilabel:`Bottom`). + - :guilabel:`Roundness`: Adjust the corner rounding of the images. + + - :guilabel:`Grid`: This layout displays media items in a square layout. To customize this + display type, use: + + - :guilabel:`Columns`: Select a number of columns. + - :guilabel:`Spacing`: Define the space between the images in the grid. + +- :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 `. +- :guilabel:`Zoom on click`: Enable image zoom when an image is clicked. + +.. tip:: + To manage individual media items, click the item and scroll down to the :guilabel:`Image` + section. Next to :guilabel:`Media`, click :guilabel:`Replace` or :guilabel:`Remove`. + + :guilabel:`Re-order` the items using 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. + +.. _ecommerce_design/product_page/customization: + +Page layout and product information display +=========================================== + +To change the layout of the product page, navigate 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 `. + +Select which product information appears on the product page using the options available in the +:guilabel:`Product Details` section. You can configure :ref:`buttons +`, define :ref:`how attributes are displayed +`, organize the page using :ref:`page customization +features `, and add :ref:`building blocks +`. + +.. _ecommerce_design/product_page/buttons: + +Buttons +------- + +Configure purchase and action buttons: + +- Select a :guilabel:`Purchase Style` to define a layout. +- Enable additional :guilabel:`Purchase Options` by: + + - activating the :ref:`Buy Now ` button, + - and/or selecting the :guilabel:`Quantity` button to display a quantity selector on each product + page. + +- Add :doc:`additional buttons ` next to :guilabel:`Actions`, if needed. + +.. _ecommerce_design/product_page/attributes: + +Attributes +---------- + +Choose how product :ref:`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:: + - To use the specification section, :ref:`product variants + ` must be enabled. + - Products with single values for their attributes do not generate variants but are still + displayed in the :guilabel:`Specifications` section. + +.. tip:: + - Create :ref:`attribute categories ` to + better structure this section. + - Use the :guilabel:`Image` :ref:`display type ` to show images + of product variants on the product page. + +.. _ecommerce_design/product_page/page-features: + +Organization options and additional features +-------------------------------------------- + +Toggle the following options on/off to adapt the page according to your needs: + +- :guilabel:`Separators`: Organize the page and improve visual clarity. +- :guilabel:`Tax Indication`: Indicate whether the price is :ref:`VAT included or + excluded `. +- :guilabel:`Tags`: Display the tags created in the :ref:`backend ` on + the product page and enable customers to filter products by those tags. +- :guilabel:`Terms and Conditions`: Display a link to your :doc:`terms and conditions + `. +- :guilabel:`Reviews`: Allow :ref:`logged-in portal users ` 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 `. +- :ref:`Ribbon ` (or badge) to + highlight a specific product. + +.. note:: + Enabled functions apply to *all* product pages. + +.. tip:: + It is possible to display additional features and information previously configured in the + backend: + + - :ref:`Click & Collect `: Show the order pick-up location + and delivery availability on the product page. + - :ref:`Description `: Display an e-commerce-specific product + description right under the product name. + - :ref:`Packagings `: Offer different types of + packagings. + - :ref:`Documents `: Add relevant documents, such as + user manuals or other supporting materials. + - :ref:`Alternative products `: Suggest similar + products. This block's title can be customized. + - :ref:`Show Available Quantity `: Display the + available product quantity when the quantity falls below a specified threshold. + - :ref:`Out-of-Stock Message `: Display a + customized message for products that are out of stock. + - :ref:`Get notified when back in stock `: + 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 `. 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 +--------------- + +Add building blocks either to a specific product page or apply them to all product pages. These +building blocks do not appear on the :ref:`shop page `. +To make a building block available on *all* product pages, navigate to the :icon:`fa-plus` +(:guilabel:`plus`) :guilabel:`Blocks`, select a building block, and drag it to the top of the page. +To display it only for the selected product, drop it into a blue building block area within the +page. + +.. image:: product_page/product-page-building-blocks.png + :alt: Drag and drop building blocks on the product page. + +.. note:: + - You can also add building blocks for the :ref:`entire shop or a category + `. + - You can edit any text on your website by clicking it while in :guilabel:`Edit` mode. diff --git a/content/applications/websites/ecommerce/ecommerce_design/product_page/building-blocks-product-page.png b/content/applications/websites/ecommerce/ecommerce_design/product_page/building-blocks-product-page.png new file mode 100644 index 0000000000..1445e82b64 Binary files /dev/null and b/content/applications/websites/ecommerce/ecommerce_design/product_page/building-blocks-product-page.png differ diff --git a/content/applications/websites/ecommerce/ecommerce_design/product_page/product-page-building-blocks.png b/content/applications/websites/ecommerce/ecommerce_design/product_page/product-page-building-blocks.png new file mode 100644 index 0000000000..182e798390 Binary files /dev/null and b/content/applications/websites/ecommerce/ecommerce_design/product_page/product-page-building-blocks.png differ diff --git a/content/applications/websites/ecommerce/products.rst b/content/applications/websites/ecommerce/products.rst index 0e7a770e99..68c899a649 100644 --- a/content/applications/websites/ecommerce/products.rst +++ b/content/applications/websites/ecommerce/products.rst @@ -5,8 +5,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:`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 `, :ref:`translate ` the product page content, and :ref:`manage the stock `. @@ -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 ` the product -page. When you :guilabel:`Save`, the product page is automatically published. +product's details, add an image, and :ref:`customize ` +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 ` the page, -:ref:`edit its images ` 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 `. - -- :guilabel:`Variants`: Show all possible product :ref:`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 - `. - - :guilabel:`Compare`: Add a :icon:`fa-exchange` :guilabel:`Compare` option, allowing customers - to :ref:`compare products ` - 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 ` if the - :ref:`Product comparison tool ` 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,9 @@ 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:: + :ref:`Customize ` the product images and videos using + the website editor. .. _ecommerce/products/digital-files: @@ -286,6 +199,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 +208,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 :guilabel:`Track inventory` setting must be enabled on the product form. To do so, go + to the product form, navigate to the :guilabel:`General Information` tab, and tick the + :guilabel:`Track inventory` checkbox. + +.. _ecommerce/products/stock-management/packagings: + +Packagings +---------- + +To offer different product pack sizes to customers on the e-commerce page, configure product +:doc:`packagings ` +first. 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. 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 + `. To do so, go to the product form, click the + :icon:`fa-sitemap` :guilabel:`Variants` :ref:`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 diff --git a/content/applications/websites/ecommerce/products/categories_variants.rst b/content/applications/websites/ecommerce/products/categories_variants.rst index a2c1e518cd..daf519c0af 100644 --- a/content/applications/websites/ecommerce/products/categories_variants.rst +++ b/content/applications/websites/ecommerce/products/categories_variants.rst @@ -2,9 +2,9 @@ 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 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 --> diff --git a/content/applications/websites/ecommerce/products/cross_upselling.rst b/content/applications/websites/ecommerce/products/cross_upselling.rst index 0b3b2f6561..e7916b0b3d 100644 --- a/content/applications/websites/ecommerce/products/cross_upselling.rst +++ b/content/applications/websites/ecommerce/products/cross_upselling.rst @@ -4,7 +4,8 @@ Cross-selling and upselling :ref:`Cross-selling ` and :ref:`upselling ` 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: diff --git a/content/applications/websites/ecommerce/products/out-of-stock-message.png b/content/applications/websites/ecommerce/products/out-of-stock-message.png new file mode 100644 index 0000000000..d6f84d34ec Binary files /dev/null and b/content/applications/websites/ecommerce/products/out-of-stock-message.png differ diff --git a/content/applications/websites/ecommerce/products/prices.rst b/content/applications/websites/ecommerce/products/prices.rst index 0dff3428fc..cc994c6680 100644 --- a/content/applications/websites/ecommerce/products/prices.rst +++ b/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 ` 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 ` + 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 ` in the :ref:`delivery step ` during the checkout using the :doc:`website editor `. diff --git a/content/applications/websites/ecommerce/products/product-packagings.png b/content/applications/websites/ecommerce/products/product-packagings.png new file mode 100644 index 0000000000..308657f2bc Binary files /dev/null and b/content/applications/websites/ecommerce/products/product-packagings.png differ diff --git a/content/applications/websites/website/structure/header_footer.rst b/content/applications/websites/website/structure/header_footer.rst index 0a88f120f7..e0aec20da5 100644 --- a/content/applications/websites/website/structure/header_footer.rst +++ b/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 ` 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. diff --git a/redirects/19.0.txt b/redirects/19.0.txt index 865db8eeba..adbcf14475 100644 --- a/redirects/19.0.txt +++ b/redirects/19.0.txt @@ -1,6 +1,8 @@ # 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