diff --git a/content/applications/websites/ecommerce/managing_products/media/variant_active.png b/content/applications/websites/ecommerce/managing_products/media/variant_active.png deleted file mode 100644 index 06e8ca813..000000000 Binary files a/content/applications/websites/ecommerce/managing_products/media/variant_active.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/managing_products/media/variant_archive.png b/content/applications/websites/ecommerce/managing_products/media/variant_archive.png deleted file mode 100644 index 4c5caf75f..000000000 Binary files a/content/applications/websites/ecommerce/managing_products/media/variant_archive.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/managing_products/media/variant_prices.png b/content/applications/websites/ecommerce/managing_products/media/variant_prices.png deleted file mode 100644 index 4cdde3b64..000000000 Binary files a/content/applications/websites/ecommerce/managing_products/media/variant_prices.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/managing_products/media/variant_prices_button.png b/content/applications/websites/ecommerce/managing_products/media/variant_prices_button.png deleted file mode 100644 index 3c38b47f4..000000000 Binary files a/content/applications/websites/ecommerce/managing_products/media/variant_prices_button.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/managing_products/media/variant_prices_web.png b/content/applications/websites/ecommerce/managing_products/media/variant_prices_web.png deleted file mode 100644 index d49a778b8..000000000 Binary files a/content/applications/websites/ecommerce/managing_products/media/variant_prices_web.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/managing_products/media/variants.png b/content/applications/websites/ecommerce/managing_products/media/variants.png deleted file mode 100644 index 2b01e0f7e..000000000 Binary files a/content/applications/websites/ecommerce/managing_products/media/variants.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/managing_products/media/variants_button.png b/content/applications/websites/ecommerce/managing_products/media/variants_button.png deleted file mode 100644 index a4ccdab1f..000000000 Binary files a/content/applications/websites/ecommerce/managing_products/media/variants_button.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/managing_products/media/variants_setup.png b/content/applications/websites/ecommerce/managing_products/media/variants_setup.png deleted file mode 100644 index 5e1c8ec42..000000000 Binary files a/content/applications/websites/ecommerce/managing_products/media/variants_setup.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/managing_products/variants.rst b/content/applications/websites/ecommerce/managing_products/variants.rst index a464e6cd0..672c61466 100644 --- a/content/applications/websites/ecommerce/managing_products/variants.rst +++ b/content/applications/websites/ecommerce/managing_products/variants.rst @@ -1,92 +1,110 @@ -============================== -How to manage product variants -============================== +======================= +Manage product variants +======================= -Product variants are used to offer variations of the same product to your -customers on the products page. For example, the customer chooses a T-shirt -and then selects its size and color. In the example below, the customer -chooses a phone, and then selects the memory; color and Wi-Fi band from the -available options. +Product variants are used to offer variations of the same product to your customers on the product's +page. -.. image:: ./media/variants.png +Let's say one of your customers selects a T-shirt from your product catalog. + +Then, they choose the size and color they want. The various size and color combinations are known as +product variants. + +Create attributes & variants +============================ + +In order to create various attributes and variants for your products, you first need to turn on +*Variants* in :menuselection:`Sales --> Configuration --> Settings`. + +Then, select a product from the Products list (:menuselection:`Sales / Website --> Products --> +Products`). When the product detail form opens, click on *Edit*, and go to the *Variants* tab. + +Here, you can add as many different attributes as you'd like by clicking on *Add a line*. + +These attributes appear as three different types: + +- Radio buttons +- Color buttons +- Drop-down menu + +Several variants appear as soon as there are two values for one attribute. + +Don't forget to hit *Save* once all variants have been entered. + +.. image:: variants/values.png :align: center + :alt: ecommerce product variants values -How to create attributes & variants -=================================== +Edit variants +============= -* Turn on *Products can have several attributes, defining variants (Example: - size, color,...)* in :menuselection:`Sales --> Settings`. +After you hit *Save*, you are able to see all the variants from the product template detail form via +the *Variants* smart button. -* Select a product from the Products list, go to the *Variants* tab. - -* Add as many attributes as you need from 3 different types: radio buttons, - drop-down menu or color buttons. You get several variants as soon as there are - 2 values for 1 attribute. - -.. image:: ./media/variants_setup.png +.. image:: variants/smart-button.png :align: center + :alt: ecommerce product variants smart button -How to edit variants -==================== +Clicking the *Variants* smart button takes you to the Product Variants page, where you can edit the +following data for each specific variant: -See all the variants from the product template detail form. - -.. image:: ./media/variants_button.png - :align: center - :scale: 50 - :width: 50 - :height: 50 - -You can edit following data: - -* Picture (will update in real time on the website), -* Barcode, -* Internal Reference (SKU #), -* Volume, -* Weight, -* Active (available in quotes & website). +- Picture(s) +- Internal Reference (SKU #) +- Barcode +- Volume +- Weight +- Cost .. note:: - Both the Barcode and the Internal Reference are variant-specific. - You need to populate them once the variants generated. + Both the Barcode and the Internal Reference are variant-specific. You need to populate them once + the variants are generated. -.. tip:: - See and edit all the variants from :menuselection:`Sales --> Sales --> Product Variants` - as well. This might be quicker if you manage lots of variants. - -How to set specific prices per variant -====================================== - -You can also set a specific public price per variant by clicking *Variant Prices* -in the product detail form (action in top-left corner). - -.. image:: ./media/variant_prices_button.png - :align: center - -The Price Extra is added to the product price whenever the corresponding attribute -value is selected. - -.. image:: ./media/variant_prices.png - :align: center - -.. image:: ./media/variant_prices_web.png - :align: center - -.. tip:: - Pricelist formulas let you set advanced price computation methods for product variants. - See :doc:`../maximizing_revenue/pricing`. - -How to disable/archive variants +Set specific prices per variant =============================== -You can disable/archive specific variants so that they are no longer available in quotes & -website (not existing in your stock, deprecated, etc.). Simply uncheck *Active* in their detail form. +You can set a specific public price per variant by clicking on *Configure Variants* in the product +detail form (top-left corner). That takes you to the *Product Variant Values* page for that product. -.. image:: ./media/variant_active.png +.. image:: variants/configure-variants.png :align: center + :alt: ecommerce product variants configure variants -To retrieve such archived items, hit *Archived* on searching the variants list. You can -reactivate them the same way. +To set a specific public price for a particular variant, simply click on the variant you want to +modify, then click on *Edit*. -.. image:: ./media/variant_archive.png +The *Value Price Extra* field represents the monetary value that is added to the original product +price whenever the corresponding attribute value is selected. + +.. image:: variants/value-price-extra.png :align: center + :alt: ecommerce value price extra + +This is how the *Value Price Extra* looks on your website: + +.. image:: variants/value-price-extra-frontend.png + :align: center + :alt: ecommerce value price extra on the frontend + +.. note:: + Pricelist formulas let you set advanced price computation methods for product variants. See + :doc:`../maximizing_revenue/pricing`. + +Disable/archive variants +======================== + +You can disable/archive specific variants so they are no longer available in quotes or on your +website (not existing in your stock, deprecated, etc.). Simply select *Archive* in their detail +form. You can reactivate them the same way. + +.. image:: variants/archive.png + :align: center + :alt: ecommerce product variants archive + +To retrieve such items, hit *Archived* in the *Filters* category while searching the variants list. + +.. image:: variants/archive-search.png + :align: center + :alt: ecommerce product variants archive search + +.. seealso:: + - :doc:`../../../sales/sales/products_prices/products/variants` diff --git a/content/applications/websites/ecommerce/managing_products/variants/archive-search.png b/content/applications/websites/ecommerce/managing_products/variants/archive-search.png new file mode 100644 index 000000000..2781ea090 Binary files /dev/null and b/content/applications/websites/ecommerce/managing_products/variants/archive-search.png differ diff --git a/content/applications/websites/ecommerce/managing_products/variants/archive.png b/content/applications/websites/ecommerce/managing_products/variants/archive.png new file mode 100644 index 000000000..6601899af Binary files /dev/null and b/content/applications/websites/ecommerce/managing_products/variants/archive.png differ diff --git a/content/applications/websites/ecommerce/managing_products/variants/configure-variants.png b/content/applications/websites/ecommerce/managing_products/variants/configure-variants.png new file mode 100644 index 000000000..43d6c5cee Binary files /dev/null and b/content/applications/websites/ecommerce/managing_products/variants/configure-variants.png differ diff --git a/content/applications/websites/ecommerce/managing_products/variants/smart-button.png b/content/applications/websites/ecommerce/managing_products/variants/smart-button.png new file mode 100644 index 000000000..bbb071cc1 Binary files /dev/null and b/content/applications/websites/ecommerce/managing_products/variants/smart-button.png differ diff --git a/content/applications/websites/ecommerce/managing_products/variants/value-price-extra-frontend.png b/content/applications/websites/ecommerce/managing_products/variants/value-price-extra-frontend.png new file mode 100644 index 000000000..71333d204 Binary files /dev/null and b/content/applications/websites/ecommerce/managing_products/variants/value-price-extra-frontend.png differ diff --git a/content/applications/websites/ecommerce/managing_products/variants/value-price-extra.png b/content/applications/websites/ecommerce/managing_products/variants/value-price-extra.png new file mode 100644 index 000000000..33e0453a6 Binary files /dev/null and b/content/applications/websites/ecommerce/managing_products/variants/value-price-extra.png differ diff --git a/content/applications/websites/ecommerce/managing_products/variants/values.png b/content/applications/websites/ecommerce/managing_products/variants/values.png new file mode 100644 index 000000000..8b6b5f478 Binary files /dev/null and b/content/applications/websites/ecommerce/managing_products/variants/values.png differ