Hello,
I’m wondering if I am not allowed to add my own CSS rules to the shopify-cleanslate class. I added my own styles the “more payment options” popup box and then about a month later I noticed they were all gone. Looks like shopify generates the subclasses dynamically and they changed, thus erasing all of the work I did. Any way to get around this? I’d really like to have my site’s color scheme be consistent.
Thank you
Did you find out how to do this Dylan? I too am looking to modify Shopify Cleanslate CSS (and get rid of the horrible yellow PayPal button)?
Thanks, Gavin
Same here! Did you find any solution in the meantime?
Same problem here!
Good to hear. Hopefully someone will fix this at some point.
It’s such an easy thing to do.
Hi there, thought I would pop in and let you guys know how I ended up getting around this (if I remember correctly.) Since shopify periodically generates the subclasses randomly, what you have to do is find the furthest nested class which doesn’t change (I believe it was shopify-cleanslate in this case) and then use :nth-child selector to create css rules for the subclasses of that element which represent the dynamic subclasses. If anyone wants me to take a look at their site and tweak the code for them I will be happy to do so. Cheers
Hey, Dylan. I know this thread is old, but I’m trying to apply styles to the additional checkout buttons on this page: https://stackcare.com/cart
I want them to have the same border radius as the regular checkout button. Do you know how to do this? thanks
hi Dylan
I am having this issue as well. the button is really overpowering and goes out of out styleguide.
I spent a couple of hours but i couldn’t make it happen
We just want to change the background colour of the dynamic button to #003031
Probably too late to help anyone in this thread, but for anyone else in the future.
What Dylan was talking about was using something like .shopify-cleanslate InsertElementHere:nth-of-type(#), where you would replace the italicized text with whatever you want to affect.
For a simple example, I want to increase the width of the “Shop Pay” button (which is a list item “li” and the first one for me), so I did:
.shopify-cleanslate li:nth-of-type(1) { flex-basis:250px !important; }
In my actual case, there were 4 buttons I wanted to affect, (Shop Pay, Amazon Pay, Pay Pal, and Meta Pay) I instead did:
.shopify-cleanslate li:nth-of-type(1),
.shopify-cleanslate li:nth-of-type(2),
.shopify-cleanslate li:nth-of-type(3),
.shopify-cleanslate li:nth-of-type(4) {
flex-basis:250px !important;
}
This will make all the buttons 250px in width on a desktop browser.
Hope this helps.
Came in handy! Thanks!
