Advanced customizations

Coding knowledge

Advanced customizations require CSS coding knowledge. If you do not have coding knowledge, we recommend you hire a Shopify Expert. For basic customization (such as colors), you can use the app block settings instead.

Shopify Plus

Customizations are only possible for the cart widget. If you are on the Shopify Plus plan, we recommend you use the checkout extension instead. The checkout extension allows for a better user experience and automatically re-uses your branding. Learn more.

The app widget uses Shadow DOM to ensure broader compatibility with themes. To allow you to create advanced customizations, we expose shadow DOM parts that you can use to target a specific element. Learn more about Shadow parts.

Here are the shadow parts currently exposed:

box: div that represents the widget primary box
header: div that wraps the heading and optional disclaimer.
heading: element for the widget heading.
disclaimer: element for the widget optional disclaimer below the heading.
fields: div that wraps all the selector fields
select-wrapper: div that wraps the select HTML element
no-delivery-message: div that wraps the no-delivery message that appears when the customer selects a shipping country that does not allow delivery date selection.

Here is an example CSS code showing how to use shadow part to override style:

bear-delivery-date-picker::part(heading) {
  /* Write custom CSS */
}