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

Did this answer your question?