🎨

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

#1 Elements customize code for Text

Bold Text *
Change Text size *
Change Text Color
Change font

#2 Elements customize code for Options

Change border-color
Add background color
Maximize width and height
Create more blank space
Delete blank space
Create shadow
Round the border
Add border
Delete border
Align right, left, top, bottom

#3 Additionally - Advanced design for Swatch options

Enlarge Swatches

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

Round Swatches

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

Vertically-displayed Swatches

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

Horizontally-displayed Swatches

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

Horizontally-displayed Swatches without labels

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

Tow-Column Swatches

"% 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;
}

Three-Column Swatches

"% 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;
}

Faded hover effect on swatches

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

Add bottom spacing to swatches

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

Change border color of swatches

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

Change border color of swatch after selecting

#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;
}

Change color of the tick on swatches color after selecting

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

Change color of the tick on swatches image after selecting

#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;
}