📎
Customize Options Swatches
Customize the look of product options to match your brand image.
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. Feel free to let us know via in-app live chat, or email us: [email protected].

#avpoptions-container > div > span > label >
span.avp-productoptionswatch {
zoom: 1.5 !important;
}

#avpoptions-container > div > span > label >
span.avp-productoptionswatch {
border-radius: 50% !important;
}

#avpoptions-container > div > span > label {
display: block !important;
margin-bottom: 0.5rem !important;
}

#avpoptions-container > div > span > label {
display: inline-block !important;
margin-right: 0.5rem !important;
}

#avpoptions-container > div > span >
label.avp-productoptionswatchwrapper >
span:last-child {
display: none !important;
}

"% is a relative value that can be adjusted according to the options length"
#avpoptions-container > div > span > label {
display: inline-block !important;
width: 50% !important;
}

"% is a relative value that can be adjusted according to the options length"
#avpoptions-container > div > span > label {
display: inline-block !important;
width: 33.3% !important;
}

#avpoptions-container > div > span > label:hover {
opacity: 0.5 !important;
}
#avpoptions-container > div > span > label {
padding-bottom: 5px !important;
}

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

#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 #E70D0D !important;
}

#avpoptions-container input:checked + .avp-productoptionswatch::before {
background-color: #000000 !important;
}
#avpoptions-container input:checked + .avp-productoptionswatch::after {
background-color: #000000 !important;
}

#avpoptions-container input:checked +
.avp-productoptionswatch-box .avp-productoptionswatch::after {
background-color: #000000 !important;
}
#avpoptions-container input:checked +
.avp-productoptionswatch-box .avp-productoptionswatch::before {
background-color: #000000 !important;
}