Cannot style Add To Cart button in Shopify components

[colorful_tiger]

No option to apply styling to Add to cart button using Shopify integration

[zonal_mammal]

Hi Chris,
The code component needs to utilize className prop for it to be styled from studio. Let’s assume the AddToCart component looks like this

function AddToCard({children, ...props}) {
 
 return (
   <button>
     {children}
   </button>
 )
}

To enable styling for the above component we need to:

1. Destructure className prop from component props
2. Use it on the html element that we want to style
   Final Code would look something like this

function AddToCard({className, children, ...props}) {
 
 return (
   <button className={className}>
     {children}
   </button>
 )
}

[colorful_tiger]

Thanks @zonal_mammal I was more flagging it for Plasmic as this is using their direct integration, so there should be a className prop to support this within the app.

[zonal_mammal]

Ah Alright
Btw which package are you using from the component store?

[colorful_tiger]

Shopify (nextjs-commerce)

[colorful_tiger]

It’s a good start for this integration, I’ve not yet fully tested how far you can go with it in terms of payments etc using Shopify.

[zonal_mammal]

I just reviewed the existing implementation of Add to Cart Button, it supports children slot. Instead of styling the AddToCartButton direclty, you can style the children slot element to design your required UI

Sharing this comment, if it’s blocking you from designing the UI. Otherwise, Plasmic team can share better insights on this.

[samuel]

Thanks for the reply Asin! Sorry if the UI isn’t very clear

The “AddToCartButton” component is just a wrapper with the logic implemented in it. Your styled button should be added to the children’s slot.