Shopify now uses a responsive checkout. A great step forward… but what do you need to know that isn’t covered in their launch post? Read on to find out.
The Benefits
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 Downsides
- 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.
Click here to download the new CSS file.
For your reference, in it is this code:
.shop__logo {
max-width: 100%;
}
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:
.shop__logo {
max-width: 100%;
}
Save.
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, how much does it cost to hire a shopify expert?, how to reduce shopping cart abandonment, 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.
Thanks for your guide!
I have a question, my website is in spanish and I realized that some translations are not correct, but I can’t find the way to change them, any suggestions?
Hi Sandra, sure thing — please see this post, it’ll show you exactly where to update 🙂
https://www.blackbeltcommerce.com/shopify-checkout-how-to-change-checkout-text/
Thanks!
Great update, thanks Tristan.
When I updated to the new checkout, I had to go to Customize theme > Checkout > Logo and select the logo image I wanted to appear on the checkout page from the drop-down menu to get my logo to appear. Before I did that there was no logo at all on the new checkout page.
Hi Jenn,
Thanks for reading! Good to know. Seems like they need you to select the logo first, rather than it just defaulting to your store’s logo. Good to know 🙂
Hello, How do I remove the logo and shop description from appearing. I have all that info in the shop banner background image ?
Hi Julie,
Please try this — follow the guidelines above to add a new checkout.scss file to your store, then add this to it:
.shop__logo {
display:none;
}
Hope that helps!
Hi Tristan, great post! Our store is for central america, where addresses aren’t that clear. Some key fields we need to add to checkout are 2 phone numbers and references. Is there any way to add these fields or replace existing ones by these, without impacting payment gateways such as 2checkout? Thanks in advance!!
Hi Augusto, thanks for reading. Unfortunately there is no way to ‘add’ fields. You would need to replace another field. I’d suggest to see if there’s anything you don’t need (e.g. second address field) and replace the text for that instead. Hope that helps!
Hi Tristan,
I don’t know why I’m not finding any information about this anywhere else but, for those who need a multilingual checkout on a single shop, there is a simple language switcher built-in to the responsive checkout URL. Simply add “locale=en” or “locale=fr” or “locale=xx” as a URL parameter and your checkout language will automatically use the associated language from your theme language settings. Anyone withe the responsive checkout can try this. So your theme just has to add that parameter to the checkout link. No special app required. I don’t know why this isn’t common knowledge but it damn well should be.
Thanks for the tip Pierre, it’s a great one!
Hi Tristan,
How do I change the text in the second address field.
I believe it used to say Second Address but now it says Apt, Bldg, etc.
Thanks in advance
Hi there! This should help 🙂 https://docs.shopify.com/manual/settings/checkout/checkout-language
Hi,
I’m using the Responsive Checkout. There is the option to enter an address, city and country… but I need a ‘county’ field added to the shipping address section. Is there a way to add this? Thanks.
Hi there! You should have a “State/Province” field as well — that’s the one I’d suggest you use. There’s no way to ‘add’ fields to the checkout unless you’re on Shopify’s Enterprise plan called “Shopify Plus”, but you could change the label of State/Province to Country if needed, under Settings > Checkout > Language. Hope that helps!
i want to add the header and footer in checkout page same as the other pages …
how i can i do this can you help me???????
Hi KJ – the Shopify checkout can’t be edited unless you’re on the Shopify “Plus” top-level enterprise plan. As such, I don’t think this would be doable. In any case, normally it’s not the best idea to have the header and footer in the checkout, as it can distract users and take them away from the payment process right when they are about to pay 🙂 Hope that helps to clarify!