Customize Addons: Match Your Store’s Theme Environment

You can easily add CSS for customizing the addons on your own.

For that, you need the create the required CSS & place it in the app’s Custom CSS setting, and save it.

You can change the font color, font style, and checkbox colors to match your store’s Theme.

Note: Edit code as required before implementing

---

You can use the below CSS (Update as required)

                             /* for addons title*/

.spice-spa-addon-product-title, .spice-spa-addon-product-title *, .spice-spa-addon-product-title .spice-spa-addon-product-link {
    font-family: inherit!important;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 600;
    text-decoration: none;
    color: #000!important;
}

---

                             /* for addons price*/

.spice-spa-addon-product-price {
    font-family: inherit!important;
    font-size: 14px!important;
    color: #000!important;
}

---

                              /* for checkbox*/

span.spice-spa-addon-checkbox-text {
    border-color: #000;
}
input.spice-spa-addon-checkbox-input:checked+span.spice-spa-addon-checkbox-text {
    background-color: #000;
}

/* for cart addons*/

.spicegems-addon-product-title {
    font-family: inherit!important;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 600;
    text-decoration: none;
    color: #000!important;
}
.spicegems-addon-price {
    font-family: inherit!important;
    font-size: 14px!important;
    color: #000!important;
    font-weight: 600;
}

 .sg-primary-btn{
   color: #fff!important;
    background-color: #000!important;
    border-color: transparent!important;
}

---

And if you feel stuck anytime, reach us at help@spicegems.com

---