What are VPC Conditional rules?

These conditional rules are the rules that limit your customers to specific options or actions at the front end, based on their current choices, within the Visual product configurator.

This is useful in several cases where you only want the user to choose within a certain set of options while configuring the product at the front end.


  1. Conditional rules must have a configuration they are tied to, so the first thing you need to do is to create a configuration and ensure it has different components and options that will be manipulated within the conditional rules to achieve what you need.
  2. Go to the Product Builder >> Configurations menu page that lists all the configurations you have created previously. Scroll to the configuration you want to create conditional rules for and click the button for “Manage conditional rules” in its column.
    Configuration to be selected to add conditional rules[image showing configuration and the “Manage conditional rules” button]
  3. Once the page loads, select the checkbox titled “Enable Conditional logic”.
    Enable Conditional logic checkbox for conditional rules[image showing the “Enable Conditional logic” checkbox]
  4. Once it is ticked, a new row appears under the initial one, titled “Rules”.
    5 new columns for a conditional ruleThis row shows 5 new columns, with the following titles and explanation:

    1. Action: this determines the action you want to take place once the rule condition is met. You have three (3) options: Show, Hide, or Select. For the option you set in the ‘Option column below, ‘Show’ will show the option, ‘Hide’ will hide the option while ‘Select’ will choose the option on the user’s behalf.
      Rules 3 and 4
      Rules 3 and 4 for the Watch Demo example for Conditional rules
      [Image of the 3 choices for this Action field]
    2. Scope: This defines what area that the rule will operate within, or that the rule is limited to. You have four (4) choices: Option, Component, Group per component, All groups. Whatever choice you make determines what will be displayed in the next field.The Scope list for the conditional rule
      [Image of scope list]
    3. Apply on: is to allow you to choose what aspect of the configuration that your rule will be active on. The options in the field depend on the scope you have chosen in the previous field. Apply column in conditional rule
      [Image of Apply on the field]

      The items listed are picked from what you have created in your configuration previously e.g. options, components etc.

    4. Option: contains all the conditions you want to in place before the rule can come into action. It usually consists of a word ‘IF’ with a list containing all the configuration options you have created in the configuration. You can add more conditions by clicking the “+” button on the extreme right, or remove a particular condition by clicking the “-” button at the same location. Two options for a conditional rule
      [image of 2 options]
    5. Status: this works with the “Option” field, and it defines the state you want the Option to be in. There are two possible values: “Is selected” and “Is deselected”.Status of the option in the conditional rule
      [Image showing possible status states in an option in a conditional rule]
  5. Under the previous row lies two important fields:
    1. Enable reverse rule: allows you to enable the inverse rule. This is for situations where you want the opposite action to occur when the rule is reversed.
    2. Conditions relationship: specifies the connection between the options and statuses you have added to the rule. The value is either “AND” or “OR”.Conditional relationship options
      [Image showing conditional relationship options]
    3. Remove rule: allows you to delete the whole rule (be careful with this button as there is no UNDO).
    4. Add Rule button: allows you to add another rule to the configuration
  6. Remember to SAVE or UPDATE when you are done with the creation.


The Watch Demo
The Front end view of the Watch Demo

Using our Watch demo as an example, let us illustrate the setting up of the conditional rules. The watch demo showcases a watch that has a total of five components:

  1. Size: the size of the watch dial.
  2. Cases: one for 40mm size and another for 44mm size.
  3. Straps: one component for 40mm in size and another for 44mm in size.

Each of these five components has options that will be used within the conditional rules segment.

The conditional rules we put in place ensure that when the front end user picks a size, s/he can only see the corresponding cases and straps e.g. if size 44mm is picked, only the cases for 44mm and the straps for 44mm are visible. This ensures that the customization is accurate in detail and there are no mistakes in the creation of the order by the user.

Conditional rules set up

Following the steps outlined earlier, we create the rules that will be applied to this configuration. Four rules are created, explained below:

  1. Rule 1: hide the “cases for 44mm” component if the “Size > Default case 40mm” option is selected.

    Rules 1 and 2
    Rules 1 and 2 for the Watch Demo example for Conditional rules
  2. Rule 2: hide the “cases for 40mm” component if the “Size > Default case 44mm” option is selected.
  3. Rule 3: hide the “straps for 44mm” component if the “Size > Default case 40mm” option is selected.

    Rules 3 and 4
    Rules 3 and 4 for the Watch Demo example for Conditional rules
  4. Rule 4: hide the “straps for 40mm” component if the “Size > Default case 44mm” option is selected.

For each of the rules, enable “Reverse rule” and set “Conditions relationship” to “AND”.

Here is a glimpse of the front end:
vpc 44 conditional rules watch demo 02

[The Watch configurator, with the option for the 40mm size selected. Only the cases and straps for 40mm are available for selection.]

vpc 43 conditional rules watch demo 01

[The Watch configurator, with the option for the 44mm size selected. Only the cases and straps for 44mm are available for selection.]

This example shows that you can manipulate what the front end user sees in the configuration, to ensure the customisation process is less confusing and more straight forward.