You can format the widget using CSS. CSS should be added in Store Pickup + Delivery > Settings > Developers, under Custom styles.

  • Use the CSS below depending on which buttons or text you'd like to modify.

  • Change the hexadecimal values to the colors you need.

  • Should the CSS not be applied, add !important after the hexadecimal value

    • e.g. fill: #e6017e !important;

The CSS added should look similar to the screenshot below.

  • Inactive button icon color

#storePickupApp .checkoutMethod .pickupIcon {
fill: #e6017e;
}
#storePickupApp .checkoutMethod .deliveryIcon {
fill: #e6017e;
}
#storePickupApp .checkoutMethod .shippingIcon {
fill: #e6017e;
}

  • Active button icon color

#storePickupApp .checkoutMethod.active .pickupIcon {
fill: #fff;
}
#storePickupApp .checkoutMethod.active .deliveryIcon {
fill: #fff;
}
#storePickupApp .checkoutMethod.active .shippingIcon {
fill: #fff;
}

  • Active checkout method button background color

#storePickupApp .checkoutMethodsContainer.default .checkoutMethod.active {
background: #e6017e;
}

  • Active checkout method text color

#storePickupApp .checkoutMethodsContainer.default .checkoutMethod.active .checkoutMethodName {
color: #fff;
}

  • Inactive checkout method text color and style

#storePickupApp .checkoutMethodsContainer.default .checkoutMethod .checkoutMethodName {
font-style: normal;
text-transform: uppercase;
white-space: normal;
font-size: 1.3rem;
letter-spacing: .15em;
color: #e6017e;
}

  • Search button background color

#storePickupApp .checkoutMethodContainer .inputWithButton .button {
background: #e6017e;
}

  • Search button icon color

#storePickupApp .datepickerIcon {
fill: #e6017e;
}

Did this answer your question?