Styling the date picker
Updated 19 August 2026
Make the picker match your brand from Storefront experience in the Flare navigation. No code needed. Changes appear in the Live preview beside the settings as you edit.
Styling applies to the theme locations. Set Editing to Product page, Cart page, or Cart drawer first. The checkout picker uses Shopify's own checkout styles, so it has no Appearance section.
What you can change
Open the Appearance section. It holds:
- Border colour, Text colour, and Background colour
- Corner radius, from 0 to 50
- Space below selector, from 0 to 100
- Text size, from 10 to 28
Defaults are a neutral light look: white background, black text, grey #A5A5A5 border, 8px corner radius, 15px text. That fits most themes.
The picker inherits your theme's font family. Appearance controls the text size, not the typeface.
Tips
- Use your brand's exact hex codes for colour matching.
- Set Space below selector to control the gap between the picker and the button below it.
- Click Edit mode above the preview to click straight into the wording. Click Preview to see the picker as a shopper does.
Show or hide extras
Two more display options live outside Appearance:
- Show selected date as a line item, in the Date display section, prints the chosen date under each product in the cart and at checkout. The label is Product line item label in Storefront copy (default "Estimated Delivery").
- Hide "Powered by Flare" on calendar, at the bottom of Appearance, removes Flare's credit line. This needs the Organised plan or higher.
Saving
A save bar appears at the top of the page as soon as you change something. Click Save, or Discard to undo. The storefront updates within a few minutes.
If styling doesn't appear on your store
Click Save, then hard-refresh the storefront, or open it in a private window. If a heavily customised theme overrides Flare's styles, contact support. We'll add a scoped override for your theme.