Toggle
Switch between 2 variants
Last updated
Was this helpful?
Switch between 2 variants
Last updated
Was this helpful?
Toggle option set allows users to switch between 2 variants. There will be some cases where you will need this type of option set, such as hiding or showing things in your configurable product, but you can use this toggle for different non-visual options, which does not reflect a change in the 3D view.
In the below example, we will create a 'toggle' button to show or hide the available colors for chairs.
Adding a Toggle block is done the same way we add other types of option set. Go to the "Create Options" tab and click the drop-down button on the top right of the screen and select Toggle. After selection, click "Add block" to add it to the list of blocks in the configurator.
Before adding Toggle to the blocklist, the platform will prompt you to define it by writing a title and add the first variant. You can also hide or show the title in the front configurator.
After clicking "Add variant", a pop-up window will appear where you define your variant.
In this variant we will say that the chairs are visible, therefore we call this variant "Show" in both Title and Variant Name, then we click "Save" located at the bottom right of the screen. We repeat this process by adding another variant within the Toggle option set, naming it "Hide".
Click the "Save" button and see both variants inside the Toggle button edit page.
NOTE: You can add only 2 variants in one Toggle button.
Now click "Save" in the bottom right screen and you can see the toggle button in the block list.
Click "Preview" to see how it looks in your configurator.
NOTE: No need to select a 3D model or material since it will have a linked with ‘Materials’ option set already added.
IMPORTANT: As you click on the 'Toggle' button in 'Preview' mode, you will find that it does not hide the chair colors as you will need to add a restriction in the chair color options (Material) linked with the new Toggle button, in this case the 'Show' variant. This will be discussed in more detail in the chapter.
