checkout.scss not working?

Highlighted
Shopify Expert
90 0 28

Website: http://pro-sports-floors.myshopify.com/
Using theme: Supply

I need to change a couple things (colors, size of logo) on my checkout page and used checkout.scss.liquid, as usual, but the website seems to be ignoring any css I've added to checkout.scss.liquid. I noticed the checkout area has changed to a new version. Does that mean I need to do something different? Any help would be great!

16 Likes
Highlighted
Tourist
4 0 0

I am having the same problem, and to be honest I don't understand how Shopify makes this sort of changes without letting us know. The last checkout upgrade was much more organized, but this time there are no updates in the documentation or about the checkout.css.liquid not working any more. I would also highly appreciate any help!! Cheers

0 Likes
Highlighted
Shopify Staff
Shopify Staff
5704 1 318

The new checkout we are rolling out — that has been rolled out to your store — is not customizable with a stylesheet, it however contains additional checkout settings on your Customize theme page that let you customize your checkout without knowing CSS.

Only customers who have a Plus account can customize their checkout CSS.

0 Likes
Shopify Staff
Shopify Staff
5704 1 318

All your theme settings for the Checkout alone:

 

0 Likes
Highlighted
Shopify Partner
1 0 0

Hi Caroline,

Are you saying this is no longer correct? https://docs.shopify.com/manual/configuration/store-customization/page-specific/checkout-page/advanc...

How can theme developers access Plus feature before turning their store on?

Is there an announcement of this change?

Thanks

Michael

0 Likes
Highlighted
Shopify Expert
90 0 28

So now we have even less options to customize the checkout than before? I appreciate being able to change some things in the theme customization, but I need to access the CSS to change a few things that aren't in the theme customization, especially the logo size. The logo size is restricted to a very small width, which makes the logo look horrible/hard to read if it's long. Please help!

4 Likes
Highlighted
Shopify Staff
Shopify Staff
22 0 1

@Michael - There will be an announcement coming next week. Right now, only newly created shops have the improved checkout experience activated. In order to get the flag added, you will have to contact the store's Plus account manager, and they will gladly activate it for you.

 

@Amy - The new customizations are extremelly flexible and cover most of the use cases we've encountered. We've temporarily removed SCSS support to allow us to keep working on iteratively improving the checkout without breaking anyone's customizations. We will reintroduce SCSS for all shops later in time.

That said, your feedback on logo size is interesting. This is something we could look at adding at the theme customization level.

Please let me know if you have any further comments or feedback, happy to discuss!

-- Jonas

0 Likes
Highlighted
Shopify Expert
90 0 28

Jonas - Thank you for the information! I'll be on the lookout for more updates and will let my clients know that Shopify is making changes so we need to be patient. The logo width is my main problem with the new checkout area as I really need to be able to be able to control the max-width (like the header logo in the theme customization), and I also need it to change sizes for different screen sizes for responsive sites.

2 Likes
Highlighted
Tourist
3 0 4

It is very frustrating that there was no annoucement before the new cart was rolled out. 

Is there a date for when "later in time" is? When will developers again be able to use SCSS on the checkout. 

Is there a way to set the background color of the header? How about control the size and position of the banner image?

4 Likes
Highlighted
Shopify Expert
9925 103 1763

When will developers again be able to use SCSS on the checkout. 

As far as I know there's no plan to bring it back once the new checkout is launched. Ready (and hopeful) to be wrong here.

Is there a way to set the background color of the header? How about control the size and position of the banner image?

The only option I see would be to use a coloured background image. Position is centered.

.header {
  background: #333333 url(//bg-url-here...) center center;
  background-size: cover;
}

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes