How can I add custom CSS rules to the Cleanslate Class?

How can I add custom CSS rules to the Cleanslate Class?

Shopify Partner
19 0 5


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

Replies 9 (9)

6 0 2

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

2 0 0

Same here! Did you find any solution in the meantime?

2 0 2

Same problem here!

2 0 0

Good to hear. Hopefully someone will fix this at some point. 

It's such an easy thing to do.

Shopify Partner
19 0 5

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

New Member
4 0 0

Hey, Dylan. I know this thread is old, but I'm trying to apply styles to the additional checkout buttons on this page:

I want them to have the same border radius as the regular checkout button. Do you know how to do this? thanks


2 0 0

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



1 0 1

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.

Shopify Partner
11 0 2

Came in handy! Thanks!