How to customize styling of a Shopify React Component

How to customize styling of a Shopify React Component

ginacostanzo13
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: 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

Reply 1 (1)

sophiyasmith
Visitor
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.