Custom Products

Version

Table of contents

The Custom Products for Shopware 6 is a plug-in that is part of the Shopware Professional Edition and provides extended functionality for the experience worlds.

The plug-in offers you the possibility to add individualization options to articles. This is very useful for articles where the simple division into variants is not sufficient and further individualization is desired. These can be articles where an individual lettering is to be used, a special color or a certain date/time specification.

In the plugin Custom Products you create product templates with selectable options. In a second step, you link these templates to existing articles. The selectable options from the product template are then displayed on the item detail page so that the customer can individualize the product accordingly.

Optionally, you can freely add user-defined charges to the specific options.

Installation

If at least the Professional Edition is stored in the shopware account for the shop domain, you can download the plug-in in the plug-in administration under Settings > System > Plugins > Licenses.
The plug-in is then listed under My Plugins and can be installed by clicking on the "..." button.
After the plug-in has been installed, you can activate it by clicking the button in the Status column.

You can find the installed plug-in in the Shopware Administration under Catalogues Custom Products.

 

Product templates

Under Catalogues > Custom Products you will find the overview of the product templates.


Here you can see all the templates that are already created, these can be assigned to your products. Each template has an internal name, a display name and a description. In addition, the overview shows you how many options each template has. 
You can edit, duplicate and delete the templates through the context menu on the right side. 
 

Add template

You can create a new template by clicking the button Add template. Here you set the  general configuration.
 

Internal name (1): This name is only displayed internally in the template overview. This is useful if there are several product templates that should have the same name in the front end. 

Active (2): With this switch the product template can be deactivated. The articles in which this template is used are still available, but cannot be individualized with this template. 

Display name (3): This name is used in the frontend on the article detail page. 

Description (4): With this description you can summarize on the item detail page for the customer which individual settings can be added to the respective item.  

Picture (5): Additionally you can upload a picture for the item detail page or select one from the media management. 

Step-by-step mode (6): With the step-by-step mode, the customer is guided step-by-step through the options in the front end, instead of being shown all at once.

Self-collapsing options (7): This function collapses options as soon as the customer has made a valid entry. (Not available in step-by-step mode)

Customers need to confirm their configuration (8): Here you can define whether customers have to confirm their configuration by checking a box on the product page or not. As long as the checkbox is not activated when the function is active, it is not possible to add the product to the shopping cart and the button "Add to cart" is grayed out.
 

 

Options

After you have created a new template and saved it, the Options area is available.


In this area you will see the options that are available for the current template. You can also add new options for customization here.

Here you first enter a name for the option and an option type. The following option types are available:

 

Selection field

In this option type, you can offer the customer one or more selection options, which are then made available in a window and can be selected by mouse click. For example, these can be individual options that can be added to the product.

 

In the settings of the option you first choose a name (1), this name will be displayed in the storefront and in the order documents.
If you check the mandatory field (2), the customer has to make a choice in the frontend to be able to put the item into the shopping cart. The option No selection is then no longer displayed in the frontend.
In addition, you can optionally enter a description (3) to provide the customer with further information about this option.
 
Next, you can specify that the selection options should be displayed as a drop-down menu (4) and whether a multiple selection (5) should be possible. However, multiple selection is not possible in the dropdown menu.

Optionally you can add a surcharge that the customer has to pay when selecting the option.For more information, see the section defining option-dependent surcharges.

On the left side of the option settings you can see the created items that the customer can select. With the button Create element (6) you can add further elements. If you click on one of the elements (4), you have the possibility to make further settings for the element. 

 

In addition to a name and an order number, you can define your own surcharge here, just like in the option settings. The surcharge of an element is calculated in addition to the surcharge of the option.

Display in the frontend: 

If it is a mandatory option, the No selection element is not available.

Display in the frontend as drop-down menu: 

If it is a mandatory option, the No selection element is not available.

Image upload

The image upload offers the possibility for your customers to upload their own images, e.g. to use them to individualize the product.


First give a name (1) to the option. The name will be displayed in the storefront and on the order documents. The checkbox Mandatory field (2) allows you to determine whether the customer must make a mandatory entry.
With the optional description (3) you can give your customers more information about the option.
In addition, you can enter an order number (4) for the option, which will then be printed on the documents.
For the configuration of the option, you need to specify the maximum number of files (5) and maximum file size (6).

For more information, see the section defining option-dependent surcharges.

Frontend view of the image upload:

As file types jpg, png and gif can be used.


Access the uploaded files:

The uploaded images are saved in the order. In the admin you can call up the custom product configuration in the order in the section items via the "..." menu. 


The configuration information is displayed in a new modal and gives you the option to download the uploaded files.

 

Picture selection

Compared to the selection field, the image selection offers you the possibility to make a selection based on images. The image selection has the exact same settings as the selection field. The only difference is that additional elements ar shown in the image and cannot be displayed in a drop down menu.

Frontend view of the picture selection:

If it is a mandatory option, the No selection element is not available. .

Checkbox

With the checkbox you can offer your customers an option, which they can select or deselect with the checkbox. Here you can enter an order number next to a name and a description and add a corresponding surcharge.


Frontend view of the checkbox: 

 

File Upload

The file upload offers the option to upload PDF files. 


The configuration of the file upload is identical to the image upload.

Frontend view of the file upload:

 

Date field

With the date field you give the customer the possibility to add a date to the order. This can be, for example, a date for an engraving or an event date.
 


Beside the usual settings for this option, you enter a placeholder (1) which is displayed in the date field before the customer has selected a date. You can also specify an earliest date (2) and a latest date (3).


Frontend view of the date field:

 

Colour selection

With the colour selection the customer has the possibility to choose one or more colours for the article. Similar to the selection field or the image selection, you can also add sub-elements to the colour selection option, each of which stands for one colour.


After you have added one or more sub-elements to the option on the left side, you can assign a color (1) to the element in addition to the name and order number. You can also define a surcharge for the colour selection for the complete option as well as for the individual elements.


Frontend view of the colour selection:

If it is a mandatory option, the No selection element is not available.
 

HTML editor

The HTML editor offers the possibility to enter a text with simple formatting functions. The text entered is transmitted in the same form when the order is placed, no conversion takes place.

Apart from the name for the option, no further mandatory information is required.
Optionally, the entry can be marked as a mandatory option in the HTML editor. In this case, the customer can only add the product to the shopping cart if he or she has made an entry.
In addition, a description can be stored to provide the customer with further information.
The option product number can be optionally maintained and is then shown in the order confirmation and invoice.

Information about the possible surcharges for the option can be found here.

Frontend view of the HTML editor:


Access to the data entered by the customer:

You can see the customer's entries in the order in the corresponding position. You can call up the configuration using the "..." menu.

Text area

The text area lets the customer add text to the article. Compared to the text field, the text area will take pagination into account. The customer has the possibility to transfer multi-line texts here.


Here you need to specify how short (2) or how long (3) the text entered by the customer may be. You can also specify a placeholder (1), this will be displayed as long as the customer has not yet entered any text.

Frontend view of the text erea:

 

Text field

With the text field you offer the customer the possibility to add a single-line text to the article. This can be the text for an engraving or similar.


To do this, you specify how short (2) and how long (3) the text may be at most. As with the text area, you also enter a placeholder (1), which is displayed as long as the customer has not yet entered any text.

Frontend view of the text field:

 

Number field

The number field add the possibility for the customer to add a number to the product. This can be, for example, the number of a certain item.


The minimum value (1) and maximum value (2) indicate which data can be entered in this field by the customer
The step size (3) determines the steps in which the numbers can be entered. Decimal places are also possible. Example: Step size 0.5 - Inputs 0; 0.5; 1; 1.5; 2; 2.5 etc. can be used.
The default value (4) indicates which value is pre-selected 


Frontend view of the number field:

 

Time field

In the time selection field you can let the customer specify a time. This could be the start time for an event, for example.


The placeholder (1) indicates how the field is filled before the customer enters it. In addition, you use the start time (2) and end time (3) to specify the period of time in which the customer may select a time.

Frontend view of the time field:

 

Define option-based surcharges

You have the ability to define additional surcharges for each option. To do this, you can use the corresponding functions in the configuration of the individual options to levy either absolute or relative surcharges.

Absolute surcharges

 

 

Use the Relative surcharge button (1) to switch between entering absolute and relative surcharges for the selected option. However, only one of the two types of surcharges is available for each option.

Before you can enter the amount of the surcharge, it is necessary to select the tax rate (2) for the surcharge. Then you can enter the gross price (3). If the lock symbol is closed between gross and net price (4), the net price will be determined automatically based on the values entered. To enter a different net price, click once on the lock symbol to open it. The net price is no longer bound to the gross price.

The extended surcharge (5) is only available for absolute surcharges after selecting a tax rate and offers you the possibility to define your own surcharges for the different currencies stored in the shop using rule builder.


With the checkbox Surcharge once per order (6) you can determine whether the surcharge should only be calculated once in an order, even if the option is used several times.


After you have selected a tax rate, the function of currency dependent prices (7) is also available. Here, you can define a separate surcharge for each currency stored. In the standard system, the price of the standard currency is inherited and calculated using the conversion factor stored in the currencies. If you want to define different surcharges for a currency, you can cancel the inheritance by clicking on the chain symbol in front of the currency name and enter your own surcharge.

 

Relative surcharges

Relative surcharges are calculated dynamically based on the product price and the stored percentage rate for the surcharge.


To use a relative allowance, activate the Relative allowancecheck box (1).

To calculate the surcharge, store a tax rate (2) and the relative surcharge (3).

If you want to use more detailed configurations for the surcharge, you can activate the Extended Surcharge (4).
Here you have the option of defining different surcharges using rules that are setup with the rule builder.

With the checkbox Surcharge once per order (6) you can determine whether the surcharge should only be calculated once in an order, even if the option is used several times.

Exclude options from each other

If you have created at least 2 options, which are not marked as mandatory options, the possibility for mutual exclusion of options is shown.


To create an exclusion combination, click the Add excluded combination button. In the modal that now opens you can do the further configuration.


First, give a name for the combination, so that you can later on recognize, what you have configured here.

For the actual configuration you can now choose from the options that are not mandatory or multiple options.
With these options you can also choose whether the exclusion should take place if the customer has made an entry there or if the field is empty. Thus it is also possible to combine options with each other and to require an entry in one field if another field has also been filled.

Assign template to a product

After you have created a template with the desired options, you can assign it to a product so that the customer can individualize this product.

To assign the product configuration to a spefic product so that this can be individualization. In the tab General you will find the menu item Custom Products, where you can now assign a product template from Custom Products.
 

Frontend

Normal mode

In the frontend the options from Custom Products are displayed in the standard respsonsive theme above the Add to shopping cart button.
 


Here, the individual options of the product template can be folded out (1) and edited individually by the customer. 
If an option is a mandatory field (2), this is displayed accordingly. Any surcharges (3) for an option are also displayed. (Surcharges for an element within an option are displayed next to the element). If a customer has selected an option or an element with a surcharge, this is summarized in the Per Unit Surcharges (4) overview below. The customer now has the possibility to share the configuration of a Custom Products product via link (5). In addition, the button can be used to determine whether this link can only be called up once or not.

Step by step mode

 
If you have activated the step-by-step mode in the product template, the available options are not directly displayed in the frontend. Instead, the area for customization (1) of the product is located above the In the shopping cart button. By clicking on the Configure product button (2), the customer is then guided step by step through the options. If a customer has selected an option or an element with a surcharge, this is summarized in the Per unit surcharges (3) overview below. The customer now has the possibility to share the configuration of a Custom Products product via link (4). In addition, the button can be used to determine whether this link can only be called up once or not.
 
The customer is guided step by step through the options and can then place the item in the shopping cart once all mandatory options have been filled out. 

Display of Custom Products options on the invoice

The individual Custom Products options are listed as separate items in the accounts. If you have assigned a separate product number for the option, this is also displayed.

 


 

Was this article helpful?