Change colour of varient pills to differentiate three discounts on one product.

Store Design
, ,
1

We would like to offer three payment options depending on where stock is located.

  • in stock for products in our warehouse

  • small discount for products coming to the warehouse

  • larger discount for products that have to be ordered, and thus a longer lead time.

I am not sure how to go about this, but thought of creating three variants. That works as a quick work around, but I would like to have each option be a different colour to attract attention.

Having said that, I would also not like our normal product variants to then display these colours. Some products have variants and some don’t. So this would be a custom variant if anything.

Any other ideas or if someone knows about this, any help would be appreciated.

2

Hi,

Hope this will help

  • Need add Variants in Shopify
  • At css file need add custom CSS for variant colors

Css code example

/* Default variant pill style */
input[type="radio"][name="options"] + label {
    background-color: #f5f5f5; /* Normal color */
    color: #333;
    border: 1px solid #ddd;
}

/* In Stock variant (Green) */
input[type="radio"][value="In Stock"] + label {
    background-color: #4CAF50 !important;
    color: white !important;
}

/* Coming Soon - Small Discount (Yellow) */
input[type="radio"][value="Coming Soon – Small Discount"] + label {
    background-color: #FFC107 !important;
    color: black !important;
}

/* Pre-Order - Larger Discount (Red) */
input[type="radio"][value="Pre-Order – Larger Discount"] + label {
    background-color: #F44336 !important;
    color: white !important;
}
3

Hi @Nick_GC

Your idea of using three variants is a great workaround! To style them differently without affecting other product variants, you can use custom CSS and Shopify’s Liquid code.

  1. Assign unique classes to these specific variants by adding a tag or metafield.
  2. Use Liquid to detect if the variant matches your special stock-based options and apply different CSS styles.
  3. Add custom CSS in your theme file to color only these variant pills while leaving others unchanged.

Alternatively, if you’re open to using an app, Variant Options Swatch King or a similar app might help with advanced styling