How to add “:” character after variant name in Variant element

Author: Anna Nguyen 47 views

On the Variant Picker element, normally, it will show “Color White“, or “Size Uk3” like this:

In case you want to have a “:” character after the variant name, it will show “Color: White“, or “Size: Uk3“. Please open the element setting -> Advance -> Attributes -> Custom CSS for this element to add the below CSS code to:

span.ecom-product-variant--option-label-text:after {
    content: ":" !important;

Then this is the result:

Leave a Comment

Start a free trial and enjoy 3 months of Shopify for $1/month on select plans.