Custom style Shopify Checkout Extension UI using react

Retired Boards Appdev Extensions

Topic summary

A developer has built a countdown timer checkout extension for a Shopify Plus client using React and checkout extensibility UI. The client now requests custom styling for the timer.

Current Challenge:

  • Developer wants to implement Tailwind CSS or custom styles on the checkout extension components
  • Shared images show the desired design (styled timer banner) versus current implementation

Resolution:

Status: Question answered with official workaround provided, though this may limit styling flexibility compared to Tailwind.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Hi Dev Community,

I have developed and implemented a simple countdown timer on checkout for my Shopify Plus client using checkout extensibility UI + react. Now the client wants us to style the timer. I’d like to use tailwind, is there any way to add a class using tailwindcss or even just style the checkout extensions UI components?

This is what I got so far

eiziekiel23_0-1719989193917.png
eiziekiel23_0-1719989193917.png1912×1006 56.3 KB

and this is the styling we are looking to implement (hopefully with tailwindcss)

4MPS-Timer-Banner-June272024-DesktopMobileView-01-01.jpg
4MPS-Timer-Banner-June272024-DesktopMobileView-01-01.jpg2508×900 120 KB

2

Hi Eiziekiel23,

It’s not possible to use tailwind classes on elements in checkout extensions - for custom styling your best option would be the branding API.