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 {

}

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

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 3

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 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

Create product bundles

Accepted Answer

Bundling feature allows you to attach an add-on product to the option selection. You can add an additional cost to your main product.

Step 1. Create a product to be an add-on on your Shopify Products page (for example: a pair of socks for $5). Include an image and set the price for the add-on. This product must be available on the Online Store sales channel for the feature to work properly.

Step 2. In the Dashboard, create an option set assigned to your main product (for example: a t-shirt) that needs the socks option. Make sure to label your Options set so you know which existing Option set is which for future management.

Step 3. Add a Label on Product to inform customers about the sock option for their t-shirt.

Step 4. Change the Label on Cart value to something more descriptive. Be sure to keep the Label on Cart values unique, as they will overwrite each other if they match. In this example, the field name is Socks.

Step 5. In the Option Values section, write a descriptive option informing customers that the sock option is an extra charge in addition to the main product.

Frequently Read Articles

Browse All Categories