Customize Swatches

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 code snippet.

#avpoptions-container > div {
clear: both !important;
}

#avpoptions-container .avp-productoptionswatchwrapper {
text-align: left;
float: left;
}

Three-Column Swatches

#avpoptions-container .avp-productoptionswatchwrapper {
display: inline-block;
width: 33.3%;
}

When applying the three-column format, if the option title and values are center align on a product page, please also insert the following code snippet.

#avpoptions-container > div {
clear: both !important;
}

#avpoptions-container .avp-productoptionswatchwrapper {
text-align: left;
float: left;
}

Faded hover effect on swatches

#avpoptions-container .avp-productoptionswatch:hover {
opacity: 0.5;
}

Add bottom spacing to swatches

#avpoptions-container .avp-productoptionswatchwrapper {
padding-bottom: 5px !important;
}

Change border color of swatches
Change the hex color #000000 to the hex color you want.

#avpoptions-container .avp-productoptionswatch {
border: 1px solid #000000 !important;
}

11.** Apply black border on selected swatch**
Change the hex color #000000 to the hex color you want.

#avpoptions-container .avp-productoptionswatchwrapper input[type="radio"]:checked + .avp-productoptionswatch,
#avpoptions-container .avp-productoptionswatchwrapper input[type="checkbox"]:checked + .avp-productoptionswatch {
box-shadow: 0px 0px 0px 1px #000000 !important;
}

Apply thicker border on selected swatch

#avpoptions-container .avp-productoptionswatchwrapper input[type="radio"]:checked + .avp-productoptionswatch,
#avpoptions-container .avp-productoptionswatchwrapper input[type="checkbox"]:checked + .avp-productoptionswatch {
box-shadow: 0px 0px 0px 2px currentColor !important;
}

Updated on: 05/08/2022