How to create Options.
- You can create the following types of option through our “Custom Product Options” application:
- Selection Dropdown
- Multi-select Dropdowns
- Text Boxes
- Text areas
- Radio Buttons
- File Upload
Let’s get started.
- At first, navigate to “Apps” in your store and look for the “Custom Product Options by Hulk Apps” application and open it.
- You ‘ll observe a screen displaying multiple option, you need to click on “Options” to create the option for your products.
Creating Different type of Options:
- Here, click on “Add New” button and then, a pop-up will appear where you need to enter “Option Display Name”, “Option Unique Name”, “Option Type” and “Option Values”.
- After filling all the details and selecting the option type as “Swatch”, you need to add values for it.
- Here we’ll be adding multiple colour swatches. Add the name of the swatch.
- If you need to add the price on this option selection, then check the ‘$’ box.
- You can select the colour of your choice by selecting colour option.
- You can event upload the image of your choice by clicking on “Select” option.
- Now Save the “Option” once you are ready.
- Once you save the option the “Pop-up” will be closed and you will again be on the ‘Option’ screen, where you can add other options.
- You can create unlimited options from our application. Let’s create the other options with same procedure as we followed above.
File Upload Option:
- In this example let us create a “File Upload” option. Fill all the needed values in the respective fields and select the “File Upload” option in “Option Type” and Save it.
- You can follow the same steps to create all the other options available in our application.
NOTE: Please make sure that option names are not repeated.
NOTE 2: Please do not keep the “Option Display Name” and “Option Unique Name” similar.
NOTE 3: Tooltips are optional, if you don’t need the tooltip to be displayed for the particular option then please leave the field blank.
Assigning options to Products:
- On the application home screen click on the “Options Set” option.
- Here we need to create a set of the options. Select the options you need to be displayed for the products together.
- Suppose I have created 5 options, (A, B, C, D, and E). Now I need A, B, C to be displayed on specific products. Then I will create a “options set” and select options A, B and C and then select the product that I need to be displayed it on. And now I need all these 5 options to be displayed on other products, then I’ll create another “Options set” and select the options and then select the particular products on which I need these options to be displayed on.
- Now, see an example for the same below.
- I have created 6 different options. (Textbox, Upload file, Checkbox, Swatches, Radio Button and Dropdown.)
- Now, let us assume that I need “Textarea” and “Radio Button” option on only 2 products of my store.
- So, I’ll creating a “Options Set” for the same.
- Name the “Options Set” so that it would be easier to identify for you in future. I’ll select both the options in an option set.
- Now, I’ll select the products on which I need these options to display together. And “Save” the “Options Set”
- Now, navigate to the particular product page and you will view these options there.
- So, this is how we assign the created options to the product.
Setting up conditions to hide/show options on option selection:
- Navigate to our application and click on “Conditions” option.
- Now here, at first you need to select the “Options Set” you need to set conditions for. And click on “Add new” option.
- A pop-up will appear where we need to add “Rules” and “Action”.
- Now here, for example on the “Radio button” option selection I want the “Textarea” option to appear. I’ll set the condition as If “Radio button” option is “equal to” “Yes” then “Show” the “Textbox” option. And “Save” the condition.
- Now, let us check the same on the “Product Page” where this options are applied. Below you can observe that when no option is selected then there isn’t any other option else then “Radio button”.
- Now, when I select the “Radio button” option as “Yes” then a “Textarea” option is appeared. Exactly as we configured in conditions.
- Now, on the selection of “No” option is selected for “Radio button” then the “Textbox” option will again disappear.
Similarly, we can set the conditions as per our preference and “Show/Hide” the options as we need.
ABOVE IS THE FULL TUTORIAL OF OUR "CUSTOM PRODUCT OPTIONS" APPLICATION.