diff --git a/content/applications/websites/ecommerce/managing_products/variants.rst b/content/applications/websites/ecommerce/managing_products/variants.rst index 672c61466..f20a950d3 100644 --- a/content/applications/websites/ecommerce/managing_products/variants.rst +++ b/content/applications/websites/ecommerce/managing_products/variants.rst @@ -1,110 +1,85 @@ -======================= -Manage product variants -======================= +================ +Product variants +================ -Product variants are used to offer variations of the same product to your customers on the product's -page. +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>`. -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 - -Edit variants -============= - -After you hit *Save*, you are able to see all the variants from the product template detail form via -the *Variants* smart button. - -.. image:: variants/smart-button.png - :align: center - :alt: ecommerce product variants smart button - -Clicking the *Variants* smart button takes you to the Product Variants page, where you can edit the -following data for each specific variant: - -- 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 are generated. - -Set specific prices per variant -=============================== - -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:: variants/configure-variants.png - :align: center - :alt: ecommerce product variants configure variants - -To set a specific public price for a particular variant, simply click on the variant you want to -modify, then click on *Edit*. - -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 +To use product variants, enable them under :menuselection:`Website --> Configuration --> Settings`, +in the :guilabel:`Shop - Products` section. .. seealso:: - :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 +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/managing_products/variants/archive-search.png b/content/applications/websites/ecommerce/managing_products/variants/archive-search.png deleted file mode 100644 index 2781ea090..000000000 Binary files a/content/applications/websites/ecommerce/managing_products/variants/archive-search.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/managing_products/variants/archive.png b/content/applications/websites/ecommerce/managing_products/variants/archive.png deleted file mode 100644 index 6601899af..000000000 Binary files a/content/applications/websites/ecommerce/managing_products/variants/archive.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/managing_products/variants/catalog-categories.png b/content/applications/websites/ecommerce/managing_products/variants/catalog-categories.png new file mode 100644 index 000000000..100621029 Binary files /dev/null and b/content/applications/websites/ecommerce/managing_products/variants/catalog-categories.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 deleted file mode 100644 index 43d6c5cee..000000000 Binary files a/content/applications/websites/ecommerce/managing_products/variants/configure-variants.png and /dev/null 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 deleted file mode 100644 index bbb071cc1..000000000 Binary files a/content/applications/websites/ecommerce/managing_products/variants/smart-button.png and /dev/null 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 deleted file mode 100644 index 71333d204..000000000 Binary files a/content/applications/websites/ecommerce/managing_products/variants/value-price-extra-frontend.png and /dev/null 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 deleted file mode 100644 index 33e0453a6..000000000 Binary files a/content/applications/websites/ecommerce/managing_products/variants/value-price-extra.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/managing_products/variants/values.png b/content/applications/websites/ecommerce/managing_products/variants/values.png deleted file mode 100644 index 8b6b5f478..000000000 Binary files a/content/applications/websites/ecommerce/managing_products/variants/values.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/managing_products/variants/variants-categories.png b/content/applications/websites/ecommerce/managing_products/variants/variants-categories.png new file mode 100644 index 000000000..c8694ef81 Binary files /dev/null and b/content/applications/websites/ecommerce/managing_products/variants/variants-categories.png differ diff --git a/content/applications/websites/ecommerce/managing_products/variants/variants-configurator.png b/content/applications/websites/ecommerce/managing_products/variants/variants-configurator.png new file mode 100644 index 000000000..9d2089769 Binary files /dev/null and b/content/applications/websites/ecommerce/managing_products/variants/variants-configurator.png differ diff --git a/content/applications/websites/ecommerce/managing_products/variants/variants-display-type.png b/content/applications/websites/ecommerce/managing_products/variants/variants-display-type.png new file mode 100644 index 000000000..b74a5d8f2 Binary files /dev/null and b/content/applications/websites/ecommerce/managing_products/variants/variants-display-type.png differ diff --git a/content/applications/websites/ecommerce/managing_products/variants/variants-specifications.png b/content/applications/websites/ecommerce/managing_products/variants/variants-specifications.png new file mode 100644 index 000000000..1490f2f07 Binary files /dev/null and b/content/applications/websites/ecommerce/managing_products/variants/variants-specifications.png differ