Upgrade your online checkout
A new version of Shopify checkout is ready for you to upgrade to. This new version contains a number of visual improvements that will affect the look and feel of your checkout.
For this upgrade, you and your developers can review the list of upgrade changes and preview these changes to determine which ones could affect your customer's experience. Depending upon the customizations that you have made to your checkout, you might need to make changes to your checkout.liquid and checkout.scss.liquid files before you can upgrade. After you've made any necessary changes, preview those changes and thoroughly test (preview) your checkout.
You have until March 4th to make any changes required to your checkout.liquid file and test (preview) the changes against the new Shopify checkout. If you haven't upgraded your checkout by March 4th, 2019, then your store will be upgraded automatically to the new version of Shopify checkout.
To prepare for this upgrade, you need to do the following:
- Preview your upgraded checkout and test the checkout experience.
- After you are satisfied with your changes, upgrade your store to use the new Shopify checkout.
Preview your checkout and test for errors
Preview the changes that you have made to your online store's checkout. That is, pretend that you are a customer and create test checkouts. If you run into any errors during these tests, then some of your checkout customizations are conflicting with other improvements in the new Shopify checkout. If this is the case, then you need to make changes to your checkout.liquid and checkout.scss.liquid files before you upgrade.
- Duplicate your current theme:
- From your Online Store, click Themes.
- Click Actions and then click Duplicate: A duplicate (and unpublished) version of your current theme is created.
From More themes, find your duplicated theme, and then click Actions > Edit code. Make your edits and test them using this duplicate and unpublished version of your theme.
Open the checkout.liquid file.
Preview the checkout.liquid file from your duplicated theme using the new version of Shopify checkout:
If you don't encounter any errors during your tests, then your checkout is compatible with the new version of Shopify checkout. You can upgrade to the new version of Shopify checkout and update your theme.
Upgrade to the new Shopify checkout
Upgrading your checkout is a two-step process that requires you to upgrade the Shopify checkout and replace the current, published theme with the duplicate copy that contains your changes.
Choose a slower time of day to upgrade, such as early morning, late evening, or on the weekend, to minimize any potential disruptions.
From the Checkout upgrade page, click Upgrade checkout (this button is located at the bottom of the page).
Publish your duplicate (and now updated) theme.
- From your Online Store, click Themes.
- Find your duplicate theme and click Action > Publish.
Your checkout is upgraded and your duplicate theme is now your current theme.
What's new in Shopify checkout
The new version of Shopify checkout contains the following changes and new features.
Visual (HTML and CSS) changes have been made to how automatic discounts and script discounts appear in the order summary. For example, an icon appears next to line items that are affected by the automatic discount:
Small visual (HTML and CSS) changes have also been made to the icons that indicate that a discount code is applied to a line item.
International support for address fields
Changes have been made to the countries.js file to make it easier for your customers to fill out their addresses. The countries.js file controls how address fields are formatted and which fields appear depending upon the customers country.
Changes to countries.js include:
Updating the list of provinces and states of the supported countries.
Adjusting the width of some address fields.
If you have customizations that use countries.js, then you need to check that those customizations work in the checkout preview. If you have customizations that add or hide address field, then you could have to update them.
Auto-completion for address fields
The auto-completion feature now uses a Shopify service to send data to Google. As a result, the checkout autocomplete binding has shifted from relying on
data=”google_autocomplete_*” to using
If you have made customizations to the autocomplete feature, then you might need to rename references from
If you have added your own autocomplete feature (that is, you have added custom code that replaces the Shopify autocomplete feature), then it will continue to be used in your store (so these autocomplete changes shouldn't affect your store).
Address autocompletion is supported for the following countries:
- Australia (AU)
- Beligum (BE)
- Brazil (BR)
- Canada (CA)
- Switzerland (CH)
- Germany (DE)
- Denmark (DK)
- Spain (ES)
- France (FR)
- Hong Kong (HK)
- India (IN)
- Italy (IT)
- Japan (JP)
- Luxembourg (LU)
- Netherlands (NL)
- New Zealand (NZ)
- United States (US)
- Singapore (SG)
Accessibility enhancements for address fields
Visual (HTML, SVG, and CSS) changes have been made to the address fields that use dropdowns (for example, the Country field). These changes improve the the experience of customers who use accessibility software:
Credit card icons
Visual changes (HTML and CSS) have been made to the credit card icons that are appear when a merchant enters their credit card information. When Shopify detects the credit card type, it highlights the credit card icon.
Shopify Pay changes
Visual (HTML and CSS) changes have been made to the Shopify Pay verification pop-up that prompts your customers to enter their Shopify Pay code:
Order status page
Visual (HTML and CSS) and content changes have been made to the Order Status page. These changes include reordering content and updating content. In addition, your mobile customers can now choose to use the Arrive mobile app to track the shipment of their packages:
Policy and Terms of Service:
Refund Policy, Return Policy, and Terms of Service content now appears in an iFrame that appears inside the modal window:
Express checkout buttons
Visual (HTML and CSS) changes have been made that affect how the express checkout options appear. For example, these options are now grouped within a box and some of the buttons (such as the one for Google Pay) use IFrames.
The new checkout checks your customer's browser for payment preferences and for sign-in information and uses this information to order the buttons and where possible sign in your customer: