How to customize styling of a Shopify React Component

Shopify Apps

Topic summary

A developer is building a Shopify checkout UI extension for an upsell feature and wants to customize the appearance of Text and Stepper components. Standard approaches like adding className props or inline styles aren’t working.

Key Questions:

  • Is it possible to change text color/styling and stepper size in these components?
  • Must components be rebuilt from scratch to enable custom styling?

Attached Resources:

  • Screenshot showing the components being customized
  • Links to official Shopify documentation for Text and Stepper components

A second user responded with information about integrating React packages (like Toastify) into Shopify themes using custom Babel + Webpack configuration and Tailwind, though this appears tangential to the original checkout extension styling question.

Status: The original question about checkout UI extension styling remains unanswered.

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

I’m creating an app checkout ui extension to add an upsell. I would like to be able to change the color/styling of the text as well as customize the size of the quantity stepper. Is this possible? I’ve tried adding className as a prop and inline styles directly to the component and they do nothing. Do I need to rebuild the components from scratch to allow for me to change their appearance? Photo attached. Trying to customize the Text and Stepper components.

Text documentation: https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/titles-and-text/text

Stepper documentation: https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/forms/stepper

Screenshot 2023-11-30 at 5.34.10 PM.png
Screenshot 2023-11-30 at 5.34.10 PM.png898×608 38.3 KB

2

If you are like me, coming from React into the world of Shopify, I’m sure you’ve wanted to implement a React package like Toastify into your theme. Unfortunately, is not as simple as if you were on a NextJS or CRA app but it’s definitely possible.

In this tutorial we will be creating React components using our own Babel + Webpack configuration. As a bonus, we will also be adding Tailwind. There’s a lot of steps involved so let’s get started.