Choosing a design

Shipping Bar → Bar offers twelve templates:

• Classic — a full-width bar: the message first, the progress after it.
• Centred — the message centred above a slim progress line.
• Edge line — a thin progress line along the very edge of the screen with a small floating message. Takes almost no vertical space.
• Floating pill — a rounded pill that floats over the page and stays in view as it scrolls.
• Card — a raised card with an icon badge, message and progress beneath.
• Gradient — a bold gradient fill with a slow shimmer.
• Milestones — a segmented track that lights up as the cart grows.
• Delivery van — a van drives along the track towards the parcel.
• Tide — no separate track. The bar itself fills with your accent colour, and a line along its top edge stops where the cart has got to.
• Split — the bar cut in two: the message on one side, and on the other a gauge the full height of the bar that fills as the cart grows. This one runs edge to edge rather than following your theme's content width, because a two-tone bar that stops short of the screen edge reads as a loose panel.
• Underline — the quietest of the twelve. No separate track: the progress is a thin line along the bar's inside edge, the one facing your content, with a line of the same colour down one side.
• Dial — a small block in the corner of the screen with a ring around the icon instead of a bar. Like the Edge line, Floating pill and Card it always floats.

Each has its own palette for while the shopper is spending and for once free delivery is unlocked, so crossing the line can change the whole bar's colour. On a site in a right-to-left language every template mirrors itself: the message starts at the right and the progress fills from the right. The preview above the picker is a real bar drawn with your settings and an example cart. It follows what you are doing: click into a message and it shows the bar at that moment, with your words as you type them; pick an After the goal colour and it shows the bar once the goal is reached. A line under the preview says which message it is showing. The font you choose is shown too.

Font is your theme's own font, which loads nothing more, or one of ten Google fonts. A Google font is fetched from Google's servers (fonts.googleapis.com and fonts.gstatic.com) by each visitor's browser, which tells Google that visitor's IP address and browser, as any Google font does. If your privacy policy lists the services your shop uses, add Google Fonts to it, or keep your theme's font. The page never waits for the font: the bar shows in your theme's font for a moment until it has arrived.