How to customize styling of a Shopify React Component

How to customize styling of a Shopify React Component

Shopify Partner
2 0 0

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:

Stepper documentation: 


Screenshot 2023-11-30 at 5.34.10 PM.png

Reply 1 (1)

1 0 0

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.