You can customize any Arrives By app block using your own CSS without directly modifying your theme code.

From your theme editor go to Theme Settings > Custom CSS

Note: not every theme ships with a "Custom CSS" setting in Theme Settings. If yours doesn't have one, add the CSS below inside a <style> tag using a Custom Liquid section/block instead, or ask your theme developer to add one.

Delivery Estimate

Applies to the Delivery Estimate app block (the single-line "Arrives by" text, shown on the product page). Here are the classes you can use to target your CSS:

.arrivesby-dt	Wraps the entire Delivery Estimate component
.date-text-sm / .date-text-md	The row containing the icon and delivery date text. `-sm` is used when an offer line is also shown above it; `-md` otherwise.
.date-range	The delivery date value itself
.inline-icon	The icon shown preceding the delivery time text

Example

Add to Custom CSS. Gives the Delivery Estimate app block a light blue background with rounded corners, changes the delivery date text to red, and makes everything bold.

.arrivesby-dt {
  background-color: lightblue;
  padding: 1em;
  border-radius: 10px;
  font-weight: bold;
}
.arrivesby-dt .date-range {
  color: red;
}

Delivery Timeline

Applies to the Delivery Timeline app block (the Order / Ships / Arrives, 3-step layout with icons). It shares .arrivesby-dt as its outer wrapper, but uses its own set of classes for everything inside — the Delivery Estimate classes above (.date-range, .date-text-sm/.date-text-md, .inline-icon) do not exist in this block and will not match anything.

.arrivesby-dt	Wraps the entire Delivery Timeline component
.delivery-phase-icon-row	The row of three circular icons (Order / Ships / Arrives), including the connecting line
.delivery-phase-icon	Each individual circular icon badge
.delivery-phase-info-row	The row of three labeled dates below the icons
.delivery-phase	Each "Order" / "Ships" / "Arrives" label
.delivery-phase-date	Each date value under a label. Also individually addressable as `.delivery-phase-order-value`, `.delivery-phase-shipping-value`, and `.delivery-phase-delivery-value`

Example

Add to Custom CSS. Gives the Delivery Timeline app block a light blue background, colors the icon badges, and makes the "Arrives" date bold and colored to draw attention to it.

Note: the icon color and background are also controlled by the block's own "Icon color" / "Icon background color" settings in the theme editor, which are applied inline and take priority over Custom CSS. To override them here, use !important as shown below — or simply change the block settings instead.

.arrivesby-dt {
  background-color: lightblue;
  padding: 1em;
  border-radius: 10px;
}
.arrivesby-dt .delivery-phase-icon {
  color: #ffffff !important;
  background-color: #006699 !important;
}
.arrivesby-dt .delivery-phase-delivery-value {
  color: red;
  font-weight: bold;
}