Styling the widget

All options live in ShipsBy → Settings → Appearance, with a live preview that updates as you type. Basic styling is available on every plan; options marked Growth need a paid plan.

Colors & layout

• Text color and accent color (used for dates and the countdown). Defaults inherit your theme's body text color so the widget blends in out of the box.
• Background & border Growth — card background, border color, left accent bar on/off, corner radius.
• Alignment — left (default), center, or right.
• Truck icon — show/hide; pick the outline or filled style Growth.

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.
• Hide-under threshold: optionally hide the countdown when less than e.g. 15 minutes remain, to avoid pressuring shoppers with an unrealistic deadline.

Text templates

Both widget lines are fully editable, with variables you can place anywhere:

• {countdown} — the live time remaining before cutoff (“3h 12m”)
• {min_date} and {max_date} — the delivery window bounds

Default templates:

• Line 1: Order within {countdown}
• Line 2: arrives between {min_date} and {max_date}

Example alternative: Want it by {max_date}? Order in the next {countdown}.

Translations Pro

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), and you can edit any translated string — your edits win over our defaults.

On Free and Growth, the widget uses one language: whatever you type in the text templates.

Custom CSS (optional)

The widget's markup uses stable, prefixed class names (.shipsby-widget, .shipsby-countdown, .shipsby-dates). If you want pixel-perfect control, target those from your theme's custom CSS — they won't change between app updates.