Signup

Changing icon colors

You can now easily change the color of the icons by using a little code within your theme. Follow the guide below to get started.


Login to Shopify and click Online Store


Click Actions


Click Edit code


Open your themes stylesheet, normally called assets/theme.scss.liquid

Scroll to the bottom of the file and add the following code, changing the colour values as required


// Store Pickup + Delivery - Default
.checkoutMethod .pickupIcon {
  fill: red;
}
.checkoutMethod .deliveryIcon {
  fill: green;
}
.checkoutMethod .shippingIcon {
  fill: blue;
}

// Store Pickup + Delivery - Hover
.checkoutMethod:hover .pickupIcon {
  fill: pink;
}
.checkoutMethod:hover .deliveryIcon {
  fill: pink;
}
.checkoutMethod:hover .shippingIcon {
  fill: pink;
}

// Store Pickup + Delivery - Active
.checkoutMethod.active .pickupIcon {
  fill: black;
}
.checkoutMethod.active .deliveryIcon {
  fill: black;
}
.checkoutMethod.active .shippingIcon {
  fill: black;
}

Click Save


S
Sam is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.