How to change the style and appearance of the delivery date picker on your Shopify store
Learn how to customize the style and appearance of your Shopify delivery date picker using the Flare app. This allows you to match the widget to your store’s branding — adjusting fonts, borders, spacing, colors, and more.
🧠 What you’ll learn
- How to access Flare’s styling controls
- How to edit borders, padding, font sizes, and other layout elements
- How to preview your changes and publish to your live theme
📘 Overview
Want your delivery date picker to feel on-brand? You can update its appearance with a few clicks — no coding required.
Flare gives you full control over styling the widget, so it matches your design and improves the user experience. This is perfect for:
- Premium brands looking for pixel-perfect design
- Mobile-first themes needing tighter spacing
- Gifting or seasonal stores wanting visual polish
🛠 Step-by-step instructions
- Install the Flare app from the Shopify App Store
- Complete Step 1 of setup to add the date picker to your theme
> Need help? See:
- From the Flare dashboard, locate the white card at the top of the page
- Click Customize
- Then click Edit Styling
- On the left, adjust visual settings such as:
- Border color
- Width & padding
- Font size
- Corner radius
- Background & text color
- Use the live preview on the right to see how changes look in real-time
- When happy, click Save in the top right corner
- Go to Online Store > View your store to confirm styling on the live site
✅ That’s it! Your delivery date picker now matches your brand.
💡 Tips & notes
- Use brand hex codes for accurate color matching
- Tighter padding can improve mobile layouts
- Want to change the position of the widget? See how to change the picker position
🔗 Related guides
How to change the text label of the date picker
How to change the position of the date picker
How to add a delivery date picker to your cart page
How to make the calendar auto-select the earliest available date
❓FAQs
Will the style apply to all pages?
Each picker location (cart, product, drawer) has its own styling settings — you can customize them separately.
Can I match my theme’s font?
Yes — if your theme uses a standard web font or Google Font, you can enter it in the styling panel.
What if styling doesn’t show on my store?
Ensure you’ve clicked Save, and try refreshing your storefront. If it still doesn’t update, check if your theme overrides Flare’s styling.
🧾 Use cases
- Luxury and fashion brands matching minimalist design
- Seasonal stores adding festive styling for holidays
- Mobile-first brands adjusting for tight spacing and legibility
✅ Need help?
Still stuck or not seeing the update?
Message us via the in-app chat or email support@getflare.co.uk — we’re happy to help!
Updated on: 17/06/2025
Thank you!