diff --git a/content/applications/sales/sales/products_prices/products/variants.rst b/content/applications/sales/sales/products_prices/products/variants.rst index 9a9c570d3..43bdca473 100644 --- a/content/applications/sales/sales/products_prices/products/variants.rst +++ b/content/applications/sales/sales/products_prices/products/variants.rst @@ -28,7 +28,7 @@ within the Odoo *Sales* application. other similar records in Odoo. .. seealso:: - :doc:`/applications/websites/ecommerce/products/variants` + :ref:`ecommerce/products/product-variants` Configuration ============= diff --git a/content/applications/websites/ecommerce/checkout_payment_shipping/checkout.rst b/content/applications/websites/ecommerce/checkout_payment_shipping/checkout.rst index 65ad5ee30..6096c211a 100644 --- a/content/applications/websites/ecommerce/checkout_payment_shipping/checkout.rst +++ b/content/applications/websites/ecommerce/checkout_payment_shipping/checkout.rst @@ -89,9 +89,6 @@ The button can be found next to the :guilabel:`Add to Cart` button on the produc :align: center :alt: Buy now (express checkout) button -.. seealso:: - :ref:`Product page design: additional functions ` - .. _checkout-sign: Guest and signed-in checkout diff --git a/content/applications/websites/ecommerce/products.rst b/content/applications/websites/ecommerce/products.rst index c057ccbcf..986cbf141 100644 --- a/content/applications/websites/ecommerce/products.rst +++ b/content/applications/websites/ecommerce/products.rst @@ -4,275 +4,404 @@ Products ======== -Odoo allows you to create, import, and manage your products' pages all within the **Website** app. +**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, +:ref:`managing stock `, and enabling +:ref:`product comparisons `. -Add products to the catalog -=========================== +.. _ecommerce/products/add-products: -To add a product to your catalog, you can either do it in: +Add products +============ -- From anywhere on your website, click :menuselection:`+ New --> Product`. Enter the name of your - product, and :guilabel:`Save`; -- :menuselection:`Website --> eCommerce --> Products --> Create`; -- or by :ref:`importing data ` using XLSX or CSV files. To do so, go to - :menuselection:`Website --> eCommerce --> Products`. Click on :guilabel:`Favorites` and - :ref:`Import records `. +.. _ecommerce/products/create-products: -.. seealso:: - - :doc:`products/catalog` - - :doc:`../../sales/sales/products_prices/products/import` - - :doc:`Product-related documentation <../../sales/sales>` +Create products +--------------- -Publish -------- - -Upon creation, products are defaulted as :guilabel:`Unpublished` in your eCommerce catalog. To make -a product visible to visitors, go to :menuselection:`Website --> Site --> Homepage`, click on your -**main shop** page, select the product, and enable it as :guilabel:`Published` in the top-right -corner. +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. .. tip:: - To publish **large batches** of products, the most convenient fashion is to go to - :menuselection:`Website --> eCommerce --> Products`. Here, remove the :guilabel:`Published` - filter by clicking on the :guilabel:`x` right to it, and then select the :guilabel:`List` view. - Next, click the :guilabel:`dropdown toggle` button (located right below the :guilabel:`List` - button) and enable :guilabel:`Is published`. Click the :guilabel:`Is Published` column to - re-order it either by **published** or **unpublished** products. Finally, select the products to - publish by ticking their box on the extreme-right, and tick any box of the selected products in - the :guilabel:`Is Published` column to publish them all. + - You can also create a product from the backend by going to + :menuselection:`Website --> eCommerce --> Products` and clicking :guilabel:`New`. + - Products created from the frontend are automatically :ref:`published `, + while products created from the backend are not. To publish a product, click the + :guilabel:`Go to Website` smart button to access the product page, then toggle the switch from + :guilabel:`Unpublished` to :guilabel:`Published`. -.. image:: products/products-buttons.png - :align: center - :alt: List and dropdown toggle buttons +.. _ecommerce/products/import-products: -Product page design -=================== +Import products +--------------- -Once a product is created, you can access its **product page** through the :guilabel:`Shop` page by -clicking on the product, and then clicking :guilabel:`Edit`. Here, you can change the page's -**additional functions**, **layout**, **add content**, etc. Note that **enabled functions** apply to -*all* product pages. +To :ref:`import product data ` using XLSX or CSV files, go to +:menuselection:`Website --> eCommerce --> Products`, click the :icon:`fa-cog` (:guilabel:`gear`) +icon, then :ref:`Import records `. -.. _ecommerce-functions: +.. tip:: + To publish **large batches** of products, follow these steps: -Additional functions --------------------- + #. Go to :menuselection:`Website --> eCommerce --> Products`. + #. Remove the :guilabel:`Published` filter and switch to the :guilabel:`List` view. + #. Click the :icon:`fa-sliders` (:guilabel:`dropdown toggle`) icon and enable + :guilabel:`Is published`. + #. Click the :guilabel:`Is Published` column to re-order it by **published** or **unpublished** + products. + #. Select the products to publish by ticking their box. + #. In the :guilabel:`Is Published` column, tick the box for any of the selected products, then + :guilabel:`Confirm` to publish them. -In the **website builder** window, click :guilabel:`Customize` to enable additional functions: +.. _ecommerce/products/shop-page: -- :guilabel:`Customers: Rating` allows customers to submit :ref:`product reviews `; - :guilabel:`Share` adds social media and email icon buttons to share the product via those - channels; -- :guilabel:`Select Quantity`: if enabled, allows to choose the quantity added to cart; -- :guilabel:`Tax Indication`: notifies if the price is **VAT included** or **excluded**; -- :guilabel:`Variants`: shows all possible - :doc:`variants ` of the product as a - :guilabel:`Products List`; :guilabel:`Options` as selectable options to compose the variant - yourself; -- :guilabel:`Cart`: :guilabel:`Buy Now` adds a :ref:`checkout button ` taking the - customer directly to the checkout page; :guilabel:`Wishlist` allows to add the product to a - wishlist; -- :guilabel:`Specification`: allows you to select where the :guilabel:`Specifications` section is - displayed. This option displays a list of all variant attributes and values of a product, but only - works for products *with* variants. +Shop page +========= -.. note:: - - To allow **wishlists**, the option must be enabled in :menuselection:`Website --> Configuration - --> Settings --> Shop - Products`; - - To access the :guilabel:`Variants` options, the :doc:`Product Variants - <../../sales/sales/products_prices/products/variants>` option must first be enabled under - :menuselection:`Website --> Configuration --> Settings --> Shop - Products`. +To customize the layout of the main :guilabel:`Shop` page or modify its content, click +:guilabel:`Edit`. Go to the :guilabel:`Blocks` tab to add +:doc:`building blocks <../../websites/website/web_design/building_blocks>` or to the +:guilabel:`Customize` tab to change the page layout or add features: -Layout ------- +- :guilabel:`Layout`: Select :guilabel:`Grid` or :guilabel:`List`. -Within the same :guilabel:`Customize` tab as the :ref:`functions `, the layout -configuration can be changed according to your needs. + - :guilabel:`Size`: Set the number of products displayed per page and line. + - :guilabel:`Style`: Select :guilabel:`Default`, :guilabel:`Cards`, :guilabel:`Thumbnails`, or + :guilabel:`Grid`. + - :guilabel:`Image Size`: Choose the aspect ratio for the product images: + :guilabel:`Landscape (4/3)`, :guilabel:`Default (1/1)`, :guilabel:`Portrait (4/5)`, or + :guilabel:`Vertical (2/3)`. You can also adjust the display by changing the :guilabel:`Fill` + options to best fit your design preferences. -- :guilabel:`Images Width`: changes the width of the product images displayed on the page; -- :guilabel:`Layout`: the :guilabel:`Carousel` layout displays a large, main image with smaller ones - underneath; whereas the :guilabel:`Grid` displays four images in a square layout (see pictures - below); -- :guilabel:`Image Zoom`: choose which image zooms are available, either - :guilabel:`Pop-up on Click`, when hovering over the image (:guilabel:`Magnifier on hover`), on - :guilabel:`Both`, or :guilabel:`None`; -- :guilabel:`Thumbnails`: decide how the thumbnails should be aligned, either **vertically** - (:guilabel:`Left`), or **horizontally** (:guilabel:`Right`); -- :guilabel:`Main Image`: click :guilabel:`Replace` to change the product's main image; -- :guilabel:`Extra Images`: click :guilabel:`Add` or :guilabel:`Remove all` to add or remove extra - product images. You can also add images and videos via **URL**. +- :guilabel:`Search Bar`: Toggle the switch to display a search bar at the top of the products + page. -.. note:: - Images must either be in PNG or JPG format. To trigger the zoom, the image has to be bigger than - 1024x1024. +- :guilabel:`Prod. Desc.`: Toggle the switch to display the product description below the product's + name. -.. image:: products/products-layout.png - :align: center - :alt: Product images layout +- :guilabel:`Categories`: display product categories on the :guilabel:`Left`, on the + :guilabel:`Top`, or both. If :guilabel:`Left` is selected, you can enable + :guilabel:`Collapse Categories` to make the category menu collapsible. -Add content ------------ +- :guilabel:`Datepicker`: Toggle the switch to display a date range calendar to check the + availability of rental products over a specific period. The + :doc:`Rental app <../../sales/rental>` must be installed to use this feature. -You can use **building blocks** (:menuselection:`Edit --> Blocks`) to add content to your product -page. These blocks can be used to add extra text and picture galleries, features such as -:guilabel:`Call to Actions`, :guilabel:`Comparisons`, etc. +- :guilabel:`Attributes`: Show product attributes on the :guilabel:`Left` and/or display a + :icon:`fa-sliders` (:guilabel:`dropdown toggle`) icon at the :guilabel:`Top` allowing customers to + filter products based on their attributes. -Depending on *where* you drop the **building block**, it may be available either on the product page -*only*, or on the *whole* website. **Building blocks** dropped at the very top or very bottom of the -page are available on the *whole* website, where **building blocks** put underneath the product -description are only displayed on the *product* page *(see image below)*. + - :guilabel:`Price Filter`: Toggle the switch to display a :guilabel:`Price Range` bar, which + allows customers to filter products according to a specific price range by dragging adjustable + handles. + - :guilabel:`Product Tags`: Toggle the switch to display the :guilabel:`Product Template Tags` on + the product page and allow customers to filter products using those tags by going to the + :guilabel:`Tags` section in the left column. -.. image:: products/products-blocks.png - :align: center - :alt: Building blocks on product page +- :guilabel:`Top Bar`: Select :guilabel:`Sort By` to display a dropdown list in the top bar for + sorting products and/or :guilabel:`Layout` to allow customers to switch to the grid or list view + using the related icons. -Download link +- :guilabel:`Default Sort`: Choose how products are sorted by default: :guilabel:`Featured`, + :guilabel:`Newest Arrivals`, :guilabel:`Name (A-Z)`, :guilabel:`Price - Low to High`, or + :guilabel:`Price - High to Low`. + +- :guilabel:`Buttons`: + + - Select the :icon:`fa-shopping-cart` (:guilabel:`Shopping cart`) option to display an + :icon:`fa-shopping-cart` (:guilabel:`Add to cart`) icon on each product's image, which takes the + customer to the checkout page. + + - Select the :icon:`fa-heart-o` (:guilabel:`Wishlist`) option to display an + :icon:`fa-shopping-cart` (:guilabel:`Add to wishlist`) icon on each product's image allowing + logged-in customers to save products to a wishlist. + + - Select the :icon:`fa-exchange` (:guilabel:`Compare`) option to display the :icon:`fa-exchange` + (:guilabel:`Compare`) icon on each product's image allowing customers to :ref:`compare products + ` based on their attributes. + +.. tip:: + To feature a product, go to the :ref:`product form ` and click + the :icon:`fa-star-o` (:guilabel:`Favorite`) icon next to the product's name. + +.. _ecommerce/products/product-page: + +Product page +============ + +To access a product's page, go to the :guilabel:`Shop` and click on the product. Click +:guilabel:`Edit` to :ref:`customize ` the page or +:ref:`edit its images `. + +.. _ecommerce/products/product-form: + +To access the backend **product form**, click the :icon:`fa-cog` :guilabel:`Product` button in the +top-right corner of the product page. Alternatively, 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 +`, or :ref:`translating ` content. + +.. tip:: + Click the :guilabel:`Go to Website` smart button to return to the frontend product's page. + +.. _ecommerce/products/customization: + +Customization ------------- -To add a downloadable file (ex.: user's manual, notice of use, etc.) on the product page, drag and -drop a :guilabel:`Text` block from :menuselection:`Edit --> Blocks` on the page. Once placed, click -within the :guilabel:`Text` block, and under the :guilabel:`Inline Text` section, select either -:menuselection:`Insert Media --> Documents` or :guilabel:`Insert or edit link` and enter the URL in -the :guilabel:`Your URL` field. +To customize a product page, click :guilabel:`Edit`. Go to the :guilabel:`Blocks` tab to 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 simply by clicking on it while in :guilabel:`Edit` mode. + +Go to 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:`Select 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 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:: - The difference with :ref:`digital files ` is that digital files can only - be downloaded *after* checkout. + - :guilabel:`Variants`, :icon:`fa-heart-o` :guilabel:`Wishlist`, and :icon:`fa-exchange` + :guilabel:`Compare` options must be enabled by going to + :menuselection:`Website --> Configuration --> Settings`, in the :guilabel:`Shop - Products` + 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`. -.. image:: products/products-media.png - :align: center - :alt: Media and link buttons +.. _ecommerce/products/image-customization: -.. _ecommerce-digital-file: +Image customization +------------------- -Digital files -------------- +To customize the images available on the product page, go to the :guilabel:`Customize` tab: -Should your product be sold with a certificate, manual user, or any other relevant document, it is -possible to add a download link for customers at the end of the checkout. To do that, first enable -:guilabel:`Digital Content` under :menuselection:`Website --> Configuration --> Settings --> Shop - -Checkout Process`. Then, on the **product's template**, click on :menuselection:`More --> Digital -Files` and :guilabel:`Create` a new file. - -.. image:: products/products-digital-files.png - :align: center - :alt: Digital Files menu - -For the configuration: - -- :guilabel:`Name`: the name of your file; -- :guilabel:`Type:` select if it is either a **file** or a **URL**. Accordingly, you either have a - :guilabel:`File Content (base64)` field to upload your file, or a :guilabel:`URL` field to enter - your URL. -- :guilabel:`Website`: the website on which that file is *available*. If you want it available for - *all* websites, leave it empty. - -The file is then available after checkout in the :guilabel:`Sales Orders` section, found on the -customer's portal. - -Product configuration -===================== - -Multiple languages ------------------- - -If multiple languages are available on your website and you wish to have the product's information -translated, it is necessary to encode this translated information in the **product's template**. -Fields with multiple languages available are identifiable by their abbreviation language (ex. -:abbr:`EN (English)`) next to their field. - -.. image:: products/products-field-translation.png - :align: center - :alt: Field translation - -The **eCommerce-related** fields to translate are: - -- :guilabel:`Product name`; -- :guilabel:`Out-of-Stock Message` (under the :guilabel:`Sales` tab); -- :guilabel:`Sales Description` (under the :guilabel:`Sales` tab); +- :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` extra images or videos (including via URL) or + :guilabel:`Remove all` product images. .. note:: - Having untranslated content on a web page may be detrimental to the user experience and - :doc:`SEO <../../websites/website/pages/seo>`. + Images must be in PNG or JPG format and with a minimum size of 1024x1024 to trigger the zoom. + +.. _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 on :ref:`the main Shop page `, + 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:: - To check the language(s) of your website, go to :menuselection:`Website --> Configuration --> - Settings --> Website Info section`. + Two attribute values are needed to make the filter visible. .. seealso:: - - :doc:`../../websites/website/pages/seo` + :doc:`Product variants <../../sales/sales/products_prices/products/variants>` + +.. _ecommerce/products/digital-files: + +Digital files +============= + +You can link digital files like certificates, eBooks, or user manuals to the products. These +documents are available :ref:`before payment ` on +the product page or in the customer portal :ref:`after checkout `. + +To link a digital file to a product, go to the :ref:`product form ` +and click the :guilabel:`Documents` smart button. Then, click :guilabel:`Upload` to upload a file +directly, or for additional options, click :guilabel:`New`, then :guilabel:`Upload your file`. + +.. tip:: + - You can link a URL instead of a digital file. To do so, click :guilabel:`New`, go to the + :guilabel:`Type` field, and select :guilabel:`URL`. + - To edit an existing file, click the :icon:`fa-ellipsis-v` (:guilabel:`dropdown menu`) in the + top-right corner of the document card and click :guilabel:`Edit`. + +.. _ecommerce-products-digital-files-before-payment: + +Digital files available before payment +-------------------------------------- + +To make the file available on the product page (before payment), leave the :guilabel:`Visibility` +field blank and toggle the :guilabel:`Show on product page` switch. + +.. image:: products/digital-files.png + :alt: digital file available before payment on the product page + +.. _ecommerce-products-digital-files-after-payment: + +Digital files available after payment +------------------------------------- + +To make the file available (after payment), set the :guilabel:`Visibility` field to +:guilabel:`Confirmed order` and turn off the :guilabel:`Show on product page` switch. + +.. _ecommerce/products/translation: + +Translation +=========== + +If multiple languages are available on your website, you can translate a product's information +directly on the :ref:`product form `. Fields that support multiple +languages are identifiable by their abbreviation language (e.g., EN) next to their field. + +The eCommerce-related fields to translate are: + +- :guilabel:`Product name`. +- :guilabel:`Out-of-Stock Message` (under the :guilabel:`Sales` tab). +- :guilabel:`Sales Description` (under the :guilabel:`Sales` tab). + +.. note:: + - Having untranslated content on a web page may be detrimental to the user experience and + :doc:`SEO <../../websites/website/pages/seo>`. You can use the + :doc:`Translate <../website/configuration/translate>` feature to translate the page's content. + - To check the language(s) of your website, go to :menuselection:`Website --> Configuration --> + Settings` and go to the :guilabel:`Website Info` section. + +.. _ecommerce/products/website-availability: Website availability -------------------- -A product can be set available on either *one* or *all* websites, but it is not possible to select -*some* websites and not others. To define a product's availability, go to :menuselection:`Website ---> eCommerce --> Products`, select your product, and in the :guilabel:`Sales` tab, click the -:guilabel:`Website` you wish the product to be available on. Leave the field empty for the products -to be available on *all* websites. +To set the product's website availability, navigate to the :ref:`product form +`, go to the :guilabel:`Sales` tab, and in the +:guilabel:`eCommerce shop` section, select the :guilabel:`Website` you wish the product to be +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. + +.. _ecommerce/products/stock-management: Stock management ================ -Under the :menuselection:`Website --> Configuration --> Settings --> Shop - Products`, you can -enable and configure inventory management options. +To enable and configure inventory management options, go to :menuselection:`Website --> +Configuration --> Settings`, scroll down to the :guilabel:`Shop - Products` section and the +:guilabel:`Inventory Defaults` sub-section. .. important:: - To display the stock level on the product page, the :guilabel:`Product Type` on the **product's - form** must be set to :guilabel:`Storable` (only available when the **Inventory** app is - installed). + - The **Inventory** app must be installed to see the inventory management options. + - 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 `. Inventory --------- -In the :guilabel:`Inventory Defaults` sub-section, you can select the eCommerce selling strategy of -products: +In the :guilabel:`Inventory Defaults` sub-section, fill in those fields: -- :guilabel:`Warehouse`: if you have multiple warehouses, you can define the warehouse associated to - your website. If you have multiple websites, you can select a different one per website; -- :guilabel:`Out-of-Stock (Continue Selling)`: enabling it allows customers to continue placing - orders even when the product is **out-of-stock**. - Leave it unchecked to **prevent orders**; -- :guilabel:`Show Available Qty`: enabling it displays the available quantity left under a specified - threshold on the product page. The available quantity is calculated based on the 'On hand' +- :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**. +- :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. -.. seealso:: - :ref:`Allow only selected customers to buy ` - -Selling as kit --------------- - -If you are selling non-prepackaged kits (i.e., the kits are made of individual products), we -recommend you read the related documentation to keep track of your stock. - -.. seealso:: - :doc:`../../inventory_and_mrp/manufacturing/advanced_configuration/kit_shipping` +.. _ecommerce/products/product-comparison: Product comparison ================== -You can enable a **product comparison tool** for your eCommerce by going to -:menuselection:`Website --> Configuration --> Settings --> Shop - Products`, and ticking -:guilabel:`Product Comparison Tool`. This tool allows to save products' **specifications** and -compare them against each other on a single page. +To allow website visitors to compare products based on their attributes, go to +:menuselection:`Website --> Configuration --> Settings`, scroll down to the +:guilabel:`Shop - Products` section, and enable :guilabel:`Product Comparison Tool`. -On the product page, scroll down to the :guilabel:`Specifications` section and click -:guilabel:`Compare`. Repeat the same process for all products you wish to compare. Then, click the -:guilabel:`Compare` button of the pop-up window at the bottom of the page to reach the comparison -summary. - -.. note:: - The :guilabel:`Product Comparison Tool` can only be used if :doc:`attributes ` - are set on the **product's template**. +The :icon:`fa-exchange` (:guilabel:`Compare`) icon is now available on each product card on the main +shop page when customers hover their mouse over it. To compare products, customers can click the +:icon:`fa-exchange` (:guilabel:`Compare`) option on the products they want to compare, then click +:icon:`fa-exchange` :guilabel:`Compare` in the pop-up window at the bottom of the page to reach the +comparison summary. .. image:: products/products-compare.png - :align: center :alt: Product comparison window +.. note:: + - The :guilabel:`Product Comparison Tool` is only available for products with + :ref:`attributes `. + - Selecting the :icon:`fa-exchange` (:guilabel:`Compare`) option from a product page is also + possible. + .. toctree:: :titlesonly: products/catalog - products/variants products/price_management products/cross_upselling diff --git a/content/applications/websites/ecommerce/products/color.png b/content/applications/websites/ecommerce/products/color.png new file mode 100644 index 000000000..32f0bf7ef Binary files /dev/null and b/content/applications/websites/ecommerce/products/color.png differ diff --git a/content/applications/websites/ecommerce/products/digital-files.png b/content/applications/websites/ecommerce/products/digital-files.png new file mode 100644 index 000000000..ff63cbb8d Binary files /dev/null and b/content/applications/websites/ecommerce/products/digital-files.png differ diff --git a/content/applications/websites/ecommerce/products/price_management.rst b/content/applications/websites/ecommerce/products/price_management.rst index 14bb45c0f..e2e31bbe1 100644 --- a/content/applications/websites/ecommerce/products/price_management.rst +++ b/content/applications/websites/ecommerce/products/price_management.rst @@ -20,6 +20,8 @@ To add a tax on a product, you can either set a tax in the :guilabel:`Customer T - :doc:`/applications/finance/accounting/taxes/avatax` - :doc:`/applications/finance/accounting/taxes/fiscal_positions` +.. _ecommerce-price-management-tax-display: + Tax display ----------- diff --git a/content/applications/websites/ecommerce/products/products-blocks.png b/content/applications/websites/ecommerce/products/products-blocks.png deleted file mode 100644 index 3d5ca1270..000000000 Binary files a/content/applications/websites/ecommerce/products/products-blocks.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/products/products-buttons.png b/content/applications/websites/ecommerce/products/products-buttons.png deleted file mode 100644 index d1f601527..000000000 Binary files a/content/applications/websites/ecommerce/products/products-buttons.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/products/products-compare.png b/content/applications/websites/ecommerce/products/products-compare.png index 7b5d2d2b8..1aed59602 100644 Binary files a/content/applications/websites/ecommerce/products/products-compare.png and b/content/applications/websites/ecommerce/products/products-compare.png differ diff --git a/content/applications/websites/ecommerce/products/products-field-translation.png b/content/applications/websites/ecommerce/products/products-field-translation.png deleted file mode 100644 index 7114cbbf6..000000000 Binary files a/content/applications/websites/ecommerce/products/products-field-translation.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/products/products-layout.png b/content/applications/websites/ecommerce/products/products-layout.png deleted file mode 100644 index 6e803a596..000000000 Binary files a/content/applications/websites/ecommerce/products/products-layout.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/products/products-media.png b/content/applications/websites/ecommerce/products/products-media.png deleted file mode 100644 index a310918d0..000000000 Binary files a/content/applications/websites/ecommerce/products/products-media.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/products/variants.rst b/content/applications/websites/ecommerce/products/variants.rst deleted file mode 100644 index 441a07d36..000000000 --- a/content/applications/websites/ecommerce/products/variants.rst +++ /dev/null @@ -1,86 +0,0 @@ -================ -Product variants -================ - -Product variants are variations, such as different colors, materials, etc., of the same product. -These variations can differ in price and availability from the product. Product variants can either -be :doc:`created <../../../sales/sales/products_prices/products/variants>` or -:doc:`imported <../../../sales/sales/products_prices/products/import>`. - -To use product variants, enable them under :menuselection:`Website --> Configuration --> Settings`, -in the :guilabel:`Shop - Products` section. - -.. seealso:: - - :doc:`../products` - - :doc:`../../../sales/sales/products_prices/products/variants` - - :doc:`../../../sales/sales/products_prices/products/import` - -Product configurator -==================== - -Adding attributes and values to a product template allows the enabling of the **product -configurator** on the product page. Customers use it to configure and select the product variant of -their choice; or in the case of multiple attributes, combine those to create a specific variant. - -.. image:: variants/variants-configurator.png - :align: center - :alt: Variants configurator - -The **display type** of each attribute used in the product configurator can be edited through the -**website builder** by clicking :menuselection:`Edit --> Customize` on the product page, and then -clicking on one of the attributes. You can then select between four options: - -- :guilabel:`Radio` -- :guilabel:`Pills` -- :guilabel:`Select` -- :guilabel:`Color` - -.. image:: variants/variants-display-type.png - :align: center - :alt: Display type options for attributes - -.. _variants-configurator-backend: - -Alternatively, the **display type** can be edited through :menuselection:`Website --> eCommerce --> -Attributes`, selecting an **attribute**, and then choosing a :guilabel:`Display Type`; or through -the **product template** by going to :menuselection:`eCommerce --> Products`, selecting a product, -and then clicking :guilabel:`Attributes and Variants`. - -.. tip:: - Specific combinations of values can be excluded from the product configurator. This way, - customers are unable to select the excluded combination of values. To do so, go to - :menuselection:`Website --> eCommerce --> Products`, select a product, and go to - :guilabel:`Attributes and Variants`. Then, click on an **attribute**, select a **value**, and in - the :guilabel:`Exclude for` section, select a :guilabel:`Product Template` and the - :guilabel:`Attribute Values` to exclude. - -Product specifications -====================== - -Values used for each attribute are displayed as a **specification list** at the bottom of the -product page. To be visible, the **specification list** must first be enabled on the product page by -going to :menuselection:`Edit --> Customize` and selecting a placement for the field -:guilabel:`Specification`. - -.. image:: variants/variants-specifications.png - :align: center - :alt: Specifications list on the product page - -.. tip:: - The product **specification list** can also be used on products without variants. For that, make - sure to have no values combination. Products with single values for their attributes do not - generate variants. - -Filter catalog by attributes -============================ - -Customers **can** filter the **catalog** based on product attributes and values, allowing them to -:ref:`filter ` the catalog based only on the attribute(s) of their choice. - -To enable **attributes filtering**, go to :menuselection:`Edit --> Customize` from your **main shop -page** and click on one of the :guilabel:`Categories` in the left column. Here, enable either -:guilabel:`Left`, :guilabel:`Top`, or **both**, in the :guilabel:`Attributes` field. - -.. image:: variants/variants-categories.png - :align: center - :alt: Categories buttons diff --git a/content/applications/websites/ecommerce/products/variants/catalog-categories.png b/content/applications/websites/ecommerce/products/variants/catalog-categories.png deleted file mode 100644 index 100621029..000000000 Binary files a/content/applications/websites/ecommerce/products/variants/catalog-categories.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/products/variants/variants-categories.png b/content/applications/websites/ecommerce/products/variants/variants-categories.png deleted file mode 100644 index c8694ef81..000000000 Binary files a/content/applications/websites/ecommerce/products/variants/variants-categories.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/products/variants/variants-configurator.png b/content/applications/websites/ecommerce/products/variants/variants-configurator.png deleted file mode 100644 index 9d2089769..000000000 Binary files a/content/applications/websites/ecommerce/products/variants/variants-configurator.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/products/variants/variants-display-type.png b/content/applications/websites/ecommerce/products/variants/variants-display-type.png deleted file mode 100644 index b74a5d8f2..000000000 Binary files a/content/applications/websites/ecommerce/products/variants/variants-display-type.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/products/variants/variants-specifications.png b/content/applications/websites/ecommerce/products/variants/variants-specifications.png deleted file mode 100644 index 1490f2f07..000000000 Binary files a/content/applications/websites/ecommerce/products/variants/variants-specifications.png and /dev/null differ