diff --git a/content/applications/websites/ecommerce.rst b/content/applications/websites/ecommerce.rst index 7738912e7..53a16497c 100644 --- a/content/applications/websites/ecommerce.rst +++ b/content/applications/websites/ecommerce.rst @@ -24,6 +24,7 @@ products and increase your average cart sizes. :titlesonly: ecommerce/managing_products + ecommerce/checkout_payment_shipping ecommerce/taxes ecommerce/shopper_experience ecommerce/maximizing_revenue diff --git a/content/applications/websites/ecommerce/checkout_payment_shipping.rst b/content/applications/websites/ecommerce/checkout_payment_shipping.rst new file mode 100644 index 000000000..ddf017f85 --- /dev/null +++ b/content/applications/websites/ecommerce/checkout_payment_shipping.rst @@ -0,0 +1,10 @@ +:nosearch: + +=============================== +Checkout, payment, and shipping +=============================== + +.. toctree:: + :titlesonly: + + checkout_payment_shipping/cart diff --git a/content/applications/websites/ecommerce/checkout_payment_shipping/cart.rst b/content/applications/websites/ecommerce/checkout_payment_shipping/cart.rst new file mode 100644 index 000000000..4b44a0ee0 --- /dev/null +++ b/content/applications/websites/ecommerce/checkout_payment_shipping/cart.rst @@ -0,0 +1,99 @@ +=========== +Add to cart +=========== + +The :guilabel:`Add to Cart` button can be customized in multiple ways. You can: + +- Choose on which page customers go after clicking the 'Add to Cart' button; +- Hide the 'Add to Cart' button to prevent sales; +- Add a 'Buy Now' button to skip the cart step and lead customers straight to checkout; +- Create additional 'Add to Cart / Buy Now' buttons; +- Add an 'Order Again' button to the customer portal. + +'Add to Cart' action customization +================================== + +When customers click on the :guilabel:`Add to Cart` button, the product is added to their cart, and +customers remain **by default** on the product's page. However, customers can either immediately be +**redirected** to their cart, or given the choice on what to do through a **dialog box**. + +To change the default behavior, go to :menuselection:`Website --> Configuration --> Settings`. Under +the :guilabel:`Shop - Checkout Process` section, look for :guilabel:`Add to Cart` and select one of +the options. + +.. note:: + If a product has **optional products**, the **dialog box** will always appear. + +.. todo:: add :ref: to optional products when published. + +Replace 'Add to Cart' button by 'Contact Us' button +=================================================== + +You can replace the 'Add to Cart' button with a 'Contact Us' button which redirects users to the URL +of your choice. + +.. note:: + Hiding the :guilabel:`Add to Cart` button is often used by B2B eCommerces that need to restrict + purchases only to customers with an account, but still want to display an online product catalog + for those without. + +.. todo:: add :ref: to sign-up section doc when published to note + +To do so, go to :menuselection:`Website --> Configuration --> Settings --> Shop - Products` and tick +:guilabel:`Prevent Sale of Zero Priced Product`. This creates a new :guilabel:`Button url` field +where you can enter the **redirect URL** to be used. Then, set the price of the product to `0.00` +either from the **product's template**, or from a +:doc:`pricelist <../../../sales/sales/products_prices/prices/pricing>`. + +.. image:: cart/cart-contactus.png + :align: center + :alt: Contact us button on product page + +.. note:: + The 'Contact Us' button and '*Not Available For Sale*' text can both be modified using the + **website builder** on the product's page (:menuselection:`Edit --> Customize`) by clicking on + them. + +Customizable 'Add to Cart' button +================================= + +You can also create a customizable 'Add to Cart' button and link it to a specific product. The +**customized button** can be added on any page of the website as an **inner content** building +block, and is an *additional* button to the regular :guilabel:`Add to Cart` button. + +To add it, go on the :guilabel:`Shop` page of your choice, click :menuselection:`Edit --> Blocks` +and place the building block. Once placed, you have the following options: + +- :guilabel:`Product`: select the product to link the button with. Selecting a product renders the + :guilabel:`Action` field available; +- :guilabel:`Action`: choose if the button should :guilabel:`Add to Cart` or :guilabel:`Buy Now` + (instant checkout). + +.. image:: cart/cart-add.png + :align: center + :alt: Customizable 'Add to Cart' button + +'Buy Now' button +================ + +You can enable the 'Buy Now' button to instantly take the customer to **checkout** instead +of adding the product to the cart. The :guilabel:`Buy Now` button is an *additional* button and +does not replace the :guilabel:`Add to Cart` button. To enable it, go to +:menuselection:`Website --> Configuration --> Settings --> Shop - Checkout Process` and tick +:guilabel:`Buy Now`. + +.. image:: cart/cart-buy-now.png + :align: center + :alt: Buy Now button + +Re-order from portal +==================== + +Customers have the possibility to **re-order** items from **previous sales orders** on the customer +portal. To do so, go to :menuselection:`Website --> Configuration --> Settings --> Shop - Checkout +Process` and enable :guilabel:`Re-order From Portal`. Customers can find the :guilabel:`Order Again` +button on their **sales order** from the **customer portal**. + +.. image:: cart/cart-reorder.png + :align: center + :alt: Re-order button diff --git a/content/applications/websites/ecommerce/checkout_payment_shipping/cart/cart-add.png b/content/applications/websites/ecommerce/checkout_payment_shipping/cart/cart-add.png new file mode 100644 index 000000000..9e548df87 Binary files /dev/null and b/content/applications/websites/ecommerce/checkout_payment_shipping/cart/cart-add.png differ diff --git a/content/applications/websites/ecommerce/checkout_payment_shipping/cart/cart-buy-now.png b/content/applications/websites/ecommerce/checkout_payment_shipping/cart/cart-buy-now.png new file mode 100644 index 000000000..af827fc91 Binary files /dev/null and b/content/applications/websites/ecommerce/checkout_payment_shipping/cart/cart-buy-now.png differ diff --git a/content/applications/websites/ecommerce/checkout_payment_shipping/cart/cart-contactus.png b/content/applications/websites/ecommerce/checkout_payment_shipping/cart/cart-contactus.png new file mode 100644 index 000000000..024e3418f Binary files /dev/null and b/content/applications/websites/ecommerce/checkout_payment_shipping/cart/cart-contactus.png differ diff --git a/content/applications/websites/ecommerce/checkout_payment_shipping/cart/cart-reorder.png b/content/applications/websites/ecommerce/checkout_payment_shipping/cart/cart-reorder.png new file mode 100644 index 000000000..813fc3f6e Binary files /dev/null and b/content/applications/websites/ecommerce/checkout_payment_shipping/cart/cart-reorder.png differ diff --git a/content/applications/websites/ecommerce/managing_products.rst b/content/applications/websites/ecommerce/managing_products.rst index 4b7253e88..77c2075a6 100644 --- a/content/applications/websites/ecommerce/managing_products.rst +++ b/content/applications/websites/ecommerce/managing_products.rst @@ -1,14 +1,12 @@ :nosearch: -================== -Manage my products -================== +======== +Products +======== .. toctree:: :titlesonly: managing_products/products managing_products/catalog - managing_products/multi_images managing_products/variants - ../../sales/sales/products_prices/products/import diff --git a/content/applications/websites/ecommerce/managing_products/multi_images.rst b/content/applications/websites/ecommerce/managing_products/multi_images.rst deleted file mode 100644 index 10f36abf5..000000000 --- a/content/applications/websites/ecommerce/managing_products/multi_images.rst +++ /dev/null @@ -1,19 +0,0 @@ -========================================= -How to display several images per product -========================================= - -By default your product web page displays the main image of your product only. -If you like to show your products under several angles, you can turn the image into a carrousel. - -.. image:: multi_images/multi_images01.png - :align: center - -* Check *Several images per product* in :menuselection:`Website Admin --> Configuration --> Settings`. - -* Open a product detail form and upload images from *Images* tab. Hit *Create* in Edit mode to get the upload wizard. - -.. image:: multi_images/multi_images02.png - :align: center - -.. note:: - Such extra image are common to all the product variants (if any). diff --git a/content/applications/websites/ecommerce/managing_products/multi_images/multi_images01.png b/content/applications/websites/ecommerce/managing_products/multi_images/multi_images01.png deleted file mode 100644 index 89eb8820a..000000000 Binary files a/content/applications/websites/ecommerce/managing_products/multi_images/multi_images01.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/managing_products/multi_images/multi_images02.png b/content/applications/websites/ecommerce/managing_products/multi_images/multi_images02.png deleted file mode 100644 index 9ccb8e094..000000000 Binary files a/content/applications/websites/ecommerce/managing_products/multi_images/multi_images02.png and /dev/null differ