Checkout CSS

Shopify Expert
351 0 38


I'm a huge supporter and try not to be a pain.  BUT having been forced now to spend good time normalizing and rebuilding two checkout stylesheets, there are a few things I think you could do to be more considerate of my time and make it a lot easier on customization since we can't affect the html:

1) you probably hear this a dozen times a day - but can we get a single stylesheet?

2) my !important is stronger than your !important, but even better is if you didn't use !important so often.  Can we reserve that game for things you really don't want changed and things I still really want to change ... instead of font sizes and font weights? I need to create consistent brand id from shop to checkout and font-weight should be a simple component for me to style, why am I having to override font-weight with an !important?

3) Until we get a single CSS, I'm trying to style as much as I can for checkout.css and then making only minor over-rides for mobile.  However, your base css I have to override tends to style the same elements with two different calls depending if desktop or mobile - so I'm having to 'restyle' the same thing in checkout.css vs.

#thumbs div vs. #thumbs div.image

(#thumbs div.image doesn't even exist in desktop checkout.html)

Or, in checkout.css vs.

#overview h2 vs. #products h2

at one point you even have it written as

... #products h2, #overview h2 ...

but I only see one h2 in #overview no matter how you define it.  Surely we can be more consistent/DRY?


Thank you for continually improving and keeping in mind that we cannot affect the HTML, IDs, and classes like many of us are used to - so as much as you can do to support a streamlined workflow the best.