Upgrade your online checkout
You can customize your online checkout to extend your brand, change messaging, serve up offers, and make other improvements to your customers' experience. To make sure that your customizations are compatible with ongoing changes made by Shopify, you need to update your checkout periodically.
To prepare for this upgrade, you need to do the following:
Preview the new checkout and test your customer-facing checkout experience.
Depending upon the customizations that you have made to your checkout, you might need to make changes to your checkout.liquid file before you can upgrade.
After you are satisfied with your changes, upgrade your store to use the new Shopify checkout.
Preview your checkout and test for errors
Before you upgrade your store to use the new version of the checkout, make sure that you preview the changes. That is, pretend that you are a customer and create test checkouts. If you find any errors during these tests, then some of your checkout customizations are conflicting with other improvements in the new version. If this is the case, then you need to make changes to your checkout.liquid file 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 Shopify checkout:
If you have errors or notice issues in how the checkout looks visually, then you need to edit your checkout.liquid file to address them.
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 fields, 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 SAR China (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:
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 then uses this information to order the buttons and where possible sign in your customer:
Policy and Terms of Service:
Refund Policy, Return Policy, Legal Notice, and Terms of Service content now appears in an IFrame that appears inside the modal window: