To change the way your widget looks, you can add your own custom colors and custom images to the pickup, local delivery and shipping buttons.
These settings only apply to the legacy version of the cart widget. In the Settings > Appearance page, you can choose which version you use in the banner at the top.
You can move to the new version by clicking Try new widget, or revert back by clicking Switch back.
Add custom colors
In Settings, click Appearance.
In the Widget colors section, choose if you want to modify the Active or Inactive checkout method.
Active means the checkout method currently selected by the customer.
Inactive means the checkout method/s that have not been selected.
Add the colors for the background, text, icon and border.
You can select the colors manually or input the hex color code.
The changes you're making will be visible in the widget preview on the right side.
Click Save.
The new colors will now be visible in the widget.
Add custom buttons
These buttons completely replace the existing buttons, including the button titles. We recommend including the text for "Store pickup", "Local delivery" and "Shipping" in your new buttons.
Click Settings, then Appearance.
In the Widget icons section, click Upload custom buttons.
Upload your custom images for each button.
The uploaded file will replace the entire button, not just the icon. If needed, include text with the checkout method name.
You can see the how it will look like in the widget preview on the right.
Click Save.
You can now test and check out your new widget buttons.
Accepted file types
Not all files can be added as buttons, only files in these formats can be uploaded:
PNG
JPG
JPEG
Suggested dimensions
Choose the correct template based on the number of methods you offer:
All 3 methods (pickup, delivery, and shipping)
Recommended size: 200px × 160px
Download this button template for 3 methods.
Any 2 methods
Recommended size: 400px × 160px
Download this button template for 2 methods.
1 method only
Recommended size: 600px × 160px
Download this button template for 1 method.
Notes
For any other changes, you can customize the widget appearance with CSS.
The text for each shipping method will be removed when adding a custom button—if you'd like any text, you will need to add it within the button.
It might not look right if your store hides buttons using conditional activation. You may need to adjust the dimensions to achieve the desired look or size.
These suggested dimensions are a starting point. Since themes can differ, you may need to make additional adjustments. Consider working with a graphic designer or someone familiar with Photoshop to fine-tune the icon size, font size, and borders.