Responsiveness, Easier to Edit, and Control of some fields in checkout
- Obviously, the responsiveness is much smoother. It will work more smoothly on various devices than the previous, standard checkout. That’s the big one. See the screenshots in their launch post (linked above) for examples.
- It comes with new settings that are automatically installed into your Theme Settings. This is a nice touch, and a much-needed break away from having to manually edit a separate style file, checkout.css. See below for screenshots.
- You can also control some important fields, like whether or not the phone number is required. See below for screenshots.
See below for some screenshots of what you will get if you upgrade to Shopify’s responsive checkout.
- The main downside we’ve found so far is that the logo tends to be too small in some cases. It only gives you one position to place it in. See below for a solution to that.
- You’ll also lose any previous CSS customizations you’d made to the checkout process, like colors, fonts, and so-on. That will all run off the new checkout style system. This can be a bummer if you’ve paid a Shopify Expert to develop it for you, as you’ll lose all the work they’ve done… BUT, it may pay off in the long run and be worth re-doing. That’s your call 🙂
- If you are using your own custom translations at checkout — including the Bilingual Shopify Theme — you will need to re-do the translations. This isn’t the end of the world but just takes a little time. You can do this by going to Admin > Settings > Checkout > Create New Translation.
What Happens If I Install It?
You can upgrade by going to Admin > Checkout. You’ll see a message at the top.
You can also downgrade later if you don’t like it.
How Can I Make My Logo Wider?
The new stylesheet for the checkout is on Shopify’s servers, using a CSS file that they have there. So unless we explicitly declare styles on our side, theirs will kick in. The new checkout needs a new CSS file, called checkout.scss.liquid (not just ‘css’, but ‘scss’, a new format). There are two options to override this:
Option #1: Use our pre-formatted file (free)
Since we’ve been receiving this question a lot, we created a free solution to solve it. Simply download this file (it only has 3 lines of code in it), then go to Admin > Themes > Template Editor > Assets, and upload it. Your logo will be applied larger. The file is called checkout.scss.liquid. If you have other CSS changes you want to over-ride Shopify’s defaults, you can add them to this file too.
For your reference, in it is this code:
Option #2: Do it yourself (same result as above).
Open a text editor like TextEdit, and create a new CSS file called checkout.scss.liquid (not just ‘css’, but ‘scss’, a new format).
In it, add this:
Lastly, go to Admin > Themes > Template Editor and upload it under assets.
Screenshots Of The Responsive Checkout Settings In The Shopify Admin
Thank you for showing interest in our Shopify Insider Blog @ Blackbelt Commerce. Please make sure to check out our products. We also have some top blog recommendations for you to check out; Total Products In A Shopify Store and Vendor Page In Shopify. As always, keep a lookout for new blog posts.
Questions? Want to add something? Feel free to post in the comments.
What are the top Shopify stores doing?
Take what we've learned and use it to your advantage.
Get our exclusive research: Insights from over 500 Shopify Stores.