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 on the customizations that you've made to your checkout, you might need to make changes to your
checkout.liquidfile before you can upgrade.
- When you're 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.
Pretend that you're 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 that's the case, then you need to make changes to your
checkout.liquid file before you upgrade.
- From the Shopify admin, go to Online Store > Themes.
- Click Actions and then click Duplicate.
- 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.
checkout.liquidfile 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.
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).
If you encountered errors when first previewing your theme, then first ensure that they've been resolved (refer to Resolving errors above). Then, publish your updated duplicate 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:
- Tipping at checkout
- Pickup and local delivery
- Additional international fields
- Track order with Shop button
- Order status page updates
- General file changes
- Skeletons/loading states
- Error messaging
- Data attribute changes
- Accessibility improvements
Multiple sections have been added to the Shopify Checkout so that you can offer subscription products while maintaining your checkout customizations. These sections will let you sell subscription products and process recurring payments directly within Shopify Checkout.
Learn more about subscriptions in the Shopify Help Center.
- When subscriptions are enabled, shipping methods used for subscriptions are displayed separately from those of one-time purchases.
.product_description_variant Span.product_description_selling_planappears as an additional line item property if there is a subscription associated with the product.
- A recurring total with an accompanying tooltip appears below the total in the order summary.
- Subscription shipping options are displayed when a subscription product is included in the order.
New post-purchase upsell apps are available in the Shopify App Store. These apps present post-purchase offers to your customers directly inside Shopify Checkout, and modify their completed order to include the upsold product without re-entering any billing or shipping information.
This checkout upgrade includes changes to your checkout files that allow post-purchase upsells to work with your customized checkout.
- When a valid post-purchase app is installed in the Shopify admin, customers will receive post-purchase offers.
Tipping at checkout
Tipping options can be used to let customers include a tip with their online order, or to collect donations instead of tips. When tipping is enabled, an Add tip section appears on the payment method step of checkout. The Add tip section includes three pre-selected tip options in addition to a field to enter a custom tip amount.
- When tipping is enabled, an Add tip section appears on the payment method step of checkout.
Pickup and local delivery
Local pickup and delivery are new delivery methods that let customers receive their orders locally. When these delivery methods are enabled, customers can select local pickup or delivery on the shipping step of checkout.
- Additional fields for local delivery appear when local delivery is enabled and selected by the customer.
- If local pickup is enabled, then a delivery method section is shown to the customer on the Information page in the checkout. If shipping is not available, then only pickup information is displayed.
- Delivery methods are displayed as distinct tabs.
- Selecting Ship prompts customers to enter their shipping information, and displays available shipping methods when Continue to shipping is clicked.
- Selecting Pick up displays a list of pickup locations. Customers click the radio button for the desired pickup location and then click Continue to payment.
- If customers select Pick up in the shipping step of the checkout, then shipping information is not collected. Customers are required to enter billing information in the payment step of the checkout.
- Local delivery instructions appear on the order status page. These can be edited by going in your Shopify admin to Settings > Shipping and delivery. In the Local pickup section, find the location you want to edit and click Manage.
- The order status page has been updated to show the progress of deliveries and pickups. Messages are displayed when:
- an order has been prepared and is ready for delivery.
- a delivery has been completed. This message also provides a link to re-order the same items.
- a pickup order has been confirmed, indicating that the customer will receive an email when it's ready to be picked up.
- a pickup order is ready to be picked up.
- a pickup order has been picked up.
Additional international fields
Some countries have unique shipping regulations you need to meet for your shipments to reach your customers. Additional fields are now available for countries with unique shipping regulations. These new fields appear on the payment method step of the checkout.
Learn more about additional international fields.
- Additional checkout fields appear only to customers in Brazil, South Korea, Italy, and China.
Track order with Shop button
The Track order with Shop button on the order status and thank you pages has been updated with a new design.
Learn more about the Shop app.
- A text button has been added that prompts customers to track their purchase on the Shop app.
- Parameters have been added to display Shop Pay tracking.
- Rendering for the Track order with Shop button for the following cases:
- attempted delivery
- in transit
- out for delivery
Order status page updates
Several updates have been made to the order status page.
- A dedicated section for gift card information has been created that displays when a gift card has been purchased.
- Subscriptions information has been added.
- The class
icon-svg--align-text-bottomhas been removed.
data-step="thank-you"has been changed to
- An order status card has been added.
General file changes
address_field_labelhas been changed to
- If the customer is on the thank you step and has the QR bundle,
- A check has been added to make sure the customer has access to the checkout.
- Gift cards are now displayed with
- Contact information direction has been fixed with
- Shipping information has been moved to
- The display of multiple shipping lines in the order summary sidebar is now supported.
tr.total-linewill only be displayed if there are updated totals.
- Generic payment lines are now supported.
- Changing currency during checkout is now supported.
#payment-gateway-subfieldsnow has classes:
.radio-wrapper content-box__row .content-box__row--secondary
- Credit card tooltip has been adjusted and is now in
- The Aria label has been removed from the shipping rates full description.
- Shipping rates form fields have been moved to
The loading states for checkout pages have been updated, adding skeletons that are visible while the page loads, or selectively hiding some elements until loading is complete. These changes optimize load times.
- Objects hidden while loading:
- Objects that show a skeleton while loading:
New error messaging has been added to the checkout.
- A civic number warning has been added to the address field.
- A warning indicating that there are no shipping rates available for a cart, destination, or country has been separated into two distinct warning messages: one warning message indicating that there are no rates available for a cart or destination, and a separate warning indicating that there are no rates available for a country.
- A warning banner has been added to the checkout when completing a purchase is attempted in a development store.
- A notice has been added that appears when the customer will not be charged during checkout.
- A warning banner has been added to indicate an authentication change error.
- An error message has been added to indicate when shipping methods are unavailable at the shipping step of the checkout.
Data attribute changes
Trekkie has been removed from the following objects:
- Checkout input fields:
Several changes have been introduced to the checkout to ensures compliance with web accessibility standards. This makes it easier to navigate the checkout process for customers using accessibility technology, such as screen readers.
ulfor the following:
- The tool-tip has been removed from
- In Shop, the input label has been changed to refer to the phone.
h3headings when waiting for taxes.
h3headings when redirecting.
- When loading shipping methods, the
ptag has been changed to an
- Autocomplete now refers to
mobile telinstead of
div[data-announce-change]with the following:
aria-labelledbyto match the id of the header element
aria-describedbyto match the id of the content container element
div.content-box blank-slatewith the following:
aria-labelledbyto match the id of the header element
- Express Checkout grid has been improved to use
lielements instead of
- Updated the order summary with the following:
- improved clarity on sale price and regular price
- changed span to
- Updated payment detail methods with the following: