Question 1

Customize Options

Accepted Answer

Access our app, go to Design. You may need some CSS knowledge to customize the look of your options. Nevertheless, our team is always ready to customize it for you for FREE. Don't hesitate to contact us via in-app Live chat, or email help@avisplus.io.

Label

avpoptions-container div > label {

Q: Conditional Logic - Option B is shown/ hidden according to the value of option A

Scenario: Only if customers choose to color their white mug, option for mug color (yellow, red, green,…) will show. Step 1. To begin, you need to create your primary option (Option A). In this case, we created a checkbox option asking if the customer would like their mug color customized or not. <img src="https://storage.crisp.chat/users/helpdesk/website/1bc4f0d1667ddc00/screen-shot-2022-01-05-at-0108_vsx5hi.png" alt="" /> Step 2. Then, create the second option as a Swatches Input Type (Option B). Go through the process and upload images or pick colors per each swatch value. <img src="https://storage.crisp.chat/users/helpdesk/website/1bc4f0d1667ddc00/screen-shot-2022-01-05-at-0024_zi2b4f.png" alt="" /> Step 3. Lastly, click on Show Advanced Options under the second option (Option B). Then, click on the correct Label on Cart and make sure that it contains your affirmative value above. Pick the Label on Cart of the option that you would like your second (Option B) option to depend on. <img src="https://storage.crisp.chat/users/helpdesk/website/1bc4f0d1667ddc00/anh3-1_1qb0wl.png" alt="" /> Step 4. Click on Save and you're all set. Well done! <img src="https://storage.crisp.chat/users/helpdesk/website/1bc4f0d1667ddc00/screen-shot-2022-01-05-at-0119_1l05mk7.png" alt="" />

}

Text

avpoptions-container input[type="text"] {

}

Large Text

avpoptions-container textarea {

}

Number

avpoptions-container input[type="number"] {

}

Radio Button

avpoptions-container input[type="radio"] {

}

6.** Checkboxes**

avpoptions-container input[type="checkbox"] {

}

Radio Buttons and Checkbox Values

avpoptions-container span label {

}

Drop - Down Menus

avpoptions-container select {

}

Spacing between options

avpoptions-container > div {

}

Placeholder Text (Text, Large Text, Number)

avpoptions-container input[type="text"]::placeholder {

}

avpoptions-container textarea::placeholder {

}

avpoptions-container input[type="number"]::placeholder {

}

Tooltip

avpoptions-container .avp-tooltiptext {

}

Tooltip (below field)

avpoptions-container .avp-helptext {

}

Question 2

Customize Swatches

Accepted Answer

Access our app, go to Design. You may need some CSS knowledge to customize the look of your options. Nevertheless, our team is always ready to customize it for you for FREE. Don't hesitate to contact us via in-app Live chat, or email help@avisplus.io.

Large Swatches Default width and height is 32px.

avpoptions-container .avp-productoptionswatchwrapper {

width: 40px !important; height: 40px !important; }

Round Swatches

avpoptions-container .avp-productoptionswatchwrapper {

border-radius: 50%; }

Vertically-displayed Swatches

avpoptions-container .avp-productoptionswatchwrapper {

display: block !important; }

Horizontal Swatches

avpoptions-container .avp-productoptionswatchwrapper {

display: inline-block; margin-right: 5px; }

Horizontal Swatches without labels

avpoptions-container .avp-productoptionswatchwrapper {

text-indent: -1000px; overflow: hidden; display: inline-block; position: relative; width: 36px; height: 36px; margin: 0 5px 5px 0; }

avpoptions-container .avp-productoptionswatch {

position: absolute; top: 1px; left: 1px; }

Two-Column Swatches

avpoptions-container .avp-productoptionswatchwrapper {

display: inline-block; width: 50%; }

When applying the two-column format, if the option title and values are center align on a product page, please also insert the following cod

Question 3

Add-charge for specific variants

Accepted Answer

While you create options in the Options (Step 1), you will see a pop-up window for Option detail. In the field "Option values", find the value you want to add charge and fill the desired extra price. In this example, I want to add $2 for the medium-size picture and $4 for the large-size one.

If your default currency is USD, it will be 2USD and 4USD additional charges. Finally, click on Save.

Question 4

Create Option Template

Accepted Answer

|| Option Template is option that you can use for multiple Option Set.

Step 1: In Option Template tab, click on Create Option Template.

Step 2: Fill in the Option Template detail

${color}[#ff0000](Option name): The Option name will not display on the storefront product page. This data is shown on the back end only and can help you keep options organized. ${color}[#ff0000](Label on Product): The Label on Product is the title for your option. It is the text appearing above the option field on the storefront product page.

${color}[#ff0000](Label on Cart): The Label on Cart is the text appearing on the Cart summary screen, Checkout, and Order detail page, next to what customers have inputted or selected for the option. This value needs to be unique for each and every one of your options.

${color}[#ff0000](Option Type): The Option Type includes 10 types that you can choose according to your needs: Radio Buttons, Checkboxes, Drop-Down Menu, Swatch, Text, Large text, Number, DateTime, Color Picker, and File Upload.

Step 3: Click Save button to s

Question 5

Step 1. Create Option Set

Accepted Answer

|| Option Set = a set of options that you can use for specific products.

Step 1.1. In the Option Set tab, click on Create Option Set.

Step 1.2. After clicking on Create Option Set, a new Option set will show up. You can edit the Option Set's name here.

Click on Add Option to create a new option in your Option Set.

| Click on Select From Option Template to use the Option Template that you have created. |

Step 1.3. Fill in all the option detail needed here then hit Save to finish the Option setup.

|| These are the terms you will see and what they mean: || * Option name || The Option name will not display on the storefront product page. This data is shown on the back end only and can help you keep options organized. || * Label on Product: || The Label on Product is the title for your option. It is the text appearing above the option field on the storefront product page. || ![](https://storage.crisp.chat/users/helpdesk/website/1bc4

Question 6

Conditional Logic - Option B is shown/ hidden according to the value of option A

Accepted Answer

Scenario: Only if customers choose to color their white mug, option for mug color (yellow, red, green,…) will show.

Step 1. To begin, you need to create your primary option (Option A). In this case, we created a checkbox option asking if the customer would like their mug color customized or not.

Step 2. Then, create the second option as a Swatches Input Type (Option B). Go through the process and upload images or pick colors per each swatch value.

Step 3. Lastly, click on Show Advanced Options under the second option (Option B). Then, click on the correct Label on Cart and make sure that it contains your affirmative value above. Pick the Label on Cart of the option that you would like your second (Option B) option to depend on.

Step 4. Click on Save and you're all set. Well done!

Frequently Read Articles

Browse All Categories