Styling the widget

Most options live in ShipsBy → Appearance, with a live preview that updates as you type; alignment and text size are block settings in the theme editor. Basic styling is available on every plan; options marked Growth need a paid plan.

Colors & layout

• Colors Growth — by default the widget inherits your theme's colors so it blends in out of the box. Switch to custom colors to set a text color, an accent color (used for the countdown line) and a background color, with a corner radius from 0 to 24 px.
• Alignment — left (default), center, or right, and text size — small, medium (default) or large. Set both in the block's settings in the theme editor.
• Truck icon — show or hide.

Date formats

Choose how dates render in the estimate:

Countdown Growth

• Toggle the order-deadline countdown on or off independently of the date range.
• The countdown ticks live in the visitor's browser (e.g. “Order within 3h 12m”) and rolls over cleanly at your cutoff to the next day's estimate.

Widget text

The widget shows two lines: the dispatch line — “Ships today” or “Next dispatch Mon, Jul 20”, prefixed with “Order within 3h 12m ·” when the countdown is on — and the delivery window, “Arrives between Tue, Jul 14 and Thu, Jul 16”. The wording comes from ShipsBy's built-in translations below and isn't editable.

Translations

ShipsBy ships complete widget translations for English, French, German and Spanish, including localized date formats. The widget follows the storefront language your visitor is browsing in (via Shopify's locale). Other storefront languages show the English text, with dates still formatted for the visitor's language.

Custom CSS (optional)

The widget's markup uses stable, prefixed class names (.shipsby for the container, .shipsby__countdown and .shipsby__dates for the two lines, .shipsby__icon for the truck). If you want pixel-perfect control, target those from your theme's custom CSS — they won't change between app updates.