Configurable Product feature overviewEdit on GitHub
This is the Beta version of the feature and is therefore subject to changes.
The Configurable Product feature introduces a new type of product that can be customized by customers—a configurable product.
The feature enables you to sell complex products with modular designs or services. For example, if you sell clothes, you can allow your customers to define the material and color and add their name to the product. Or, if you are selling a service, you can allow them to select a preferred date and time of the service delivery.
A configurable product is a product that customers can customize based on the parameters provided in a product configurator.
For example, if you are selling a workstation installation service, before purchasing it, customers can select a preferred date and time of installation.
Configuring a configurable product
To configure a product, from the Product Details page, a customer opens a product configurator by clicking the Configure button. Then, they are redirected back to the Product Details page and can add the configured product to the wishlist or cart.
After adding a configurable product to the cart, a customer can change the product configuration from the Cart page.
Creating configurable products
Configurable products are created in two steps:
- A Back Office user creates regular products, or a developer imports them. See Creating an abstract product to learn how they create products in the Back Office or File details: product_concrete.csv to learn about the file they import.
- A developer converts regular products into configurable products by importing configuration parameters. See File details: product_concrete_pre_configuration.csv to learn about the file they import.
Managing configurable products
A Back Office user can add configurable products to pages, categories, and content items as regular products.
In the product catalog, they can see which products are configurable and edit them as regular products. However, a Back Office user cannot change configuration parameters.
In the orders, A Back Office can see which products are configurable ones. They can also see the configuration of each product, but they cannot change the selected parameters.
A product configurator is a tool that allows customers to customize the product parameters provided by the shop owner or product manufacturer.
You can create a product configurator as a part of your shop or integrate a third-party one. The feature is shipped with an exemplary product configurator. The exemplary product configurator allows configuring the Date and Preferred time of the day parameters.
How a Spryker shop interacts with a product configurator
A Spryker shop interacts with product configurators using parameters. When a customer is redirected from a Spryker shop to the configurator page, the shop passes the customer and product parameters. When the customer is redirected back to the shop, the configurator passes the updated parameters back.
The behavior of the configurator is based on the parameters passed by a shop. For example, a shop passes the
store_name parameter. If a customer is redirected from a US store, the language of the configurator is English. Also, the shop passes the URL of the page the customer is redirected from. After they save the configuration, the configurator uses this URL to redirect them back to the same page.
The selected configuration is also passed back to the shop as parameters. The shop uses the parameters to display the selected configuration on all related pages and process the order with the product.
There are two parameter types: configuration parameters and display parameters.
Configuration parameters are used by shops to interact with product configurators.
Display parameters are used to display product configuration on the Storefront and in the Back Office.
Display parameter values are usually converted from configuration parameter values to show data in a user-friendly format. For example, a product configurator passes the configuration parameter to a shop:
"time_of_the_day": 3. Since, in the configurator,
3 stands for
afternoon, the shop displays Preferred time of the day: Afternoon.
Availability calculation in a product configurator
The availability of a configurable product is based on the selected configuration.
A customer selects the quantity of a product in a configurator or in a shop. If a configurator allows them to select a product quantity, it passes the selected quantity to the shop as a parameter. Otherwise, it passes the availability as a parameter, and they select the product quantity in the shop.
If a configurator does not pass availability, regular product availability is used.
Price calculation in a product configurator
The price of a configurable product is based on the selected configuration. When a customer selects a configuration, the price of the product in the selected configuration is displayed. After they save the configuration, the price of the product in the selected configuration is passed to the shop. The customer is redirected back to the shop where they can purchase the product for the price.
If a price is not provided by the configurator, a regular product price is used.
Complete and incomplete configuration
When importing configurable products, a developer defines if the configuration is complete for each product.
If the configuration is complete, on entering the Product details page, a customer sees a message that the configuration is complete. By default, the message is followed by the first three descriptive attributes set in the configurator. Under the attributes, there are the Show and Hide buttons that allow expanding and collapsing of the remaining attributes, respectively. In case the configuration is complete, the customer can purchase the product without opening the configurator and selecting parameters.
If the configuration is not complete, on entering the Product details page, a customer sees a message that the configuration is not complete. To purchase the product, they open the configurator and select a configuration. However, they can add a product with incomplete configuration to a wishlist. In this case, they can finish the configuration from the Wishlist page.
Even if all the parameter values are preconfigured, but the configuration is not complete, a customer has to open the configurator and save the configuration. They are not required to change the preconfigured values, though.
Request for quote with a configurable product
Preconfigured parameter values
When a developer creates configurable products by importing them, they can pre-configure parameter values. If a customer chooses to configure such a product, they start with the preconfigured parameter values and can change them.
If a developer also defines that the configuration of such a product is complete, on entering the Product details page, a customer sees the preconfigured parameter values. They can add the product to the cart without adjusting the configuration.
If a developer defines that the configuration of such a product is incomplete, on entering the Product details page, a customer does not see the preconfigured parameter values. However, they are still assigned to the product. The customer has to configure the product, but they do not have to change the preconfigured parameter values.
Configurable product on the Storefront
Customers configure a product on the Storefront as follows:
Are you a developer? See Configurable Product feature walkthrough for developers.
For submitting the form