Shopify just rolled out a subtle but impactful tweak to the checkout experience: the footer now shows a single “Terms and policies” link instead of a separate link for each policy. When shoppers click the link, a modal appears where they can choose any of the store’s policies—return, privacy, shipping, and more. The change is automatic, requires no action for most merchants, and streamlines the checkout UI while keeping legal compliance intact. In this post we’ll unpack the details, explain who’s affected, and highlight the only scenario where you might need to intervene.
What Changed in the Checkout Footer
Previously, the checkout footer displayed a separate hyperlink for each policy you’d defined in your store settings. That layout could become cluttered, especially for stores with multiple policies. The new design replaces those individual links with a single, consolidated “Terms and policies” anchor. Clicking it opens a modal window that lists every active policy, letting customers read the one they need without leaving the checkout flow. The underlying policy content, URLs, and order‑processing logic remain unchanged—Shopify simply altered the presentation layer.
Who Is Affected?
Merchants (standard plans) – If you run a regular Shopify or Shopify Advanced store, the update is entirely hands‑off. Your policies stay where they are, and the new footer appears automatically across desktop and mobile checkout. No theme edits, no Liquid changes, and no extra testing required. The only visible difference is the single link instead of many.
Developers & Theme Authors – The change lives in Shopify’s checkout rendering engine, not in theme code. That means existing checkout‑related customizations (e.g., CSS overrides targeting individual policy links) may need a quick review to ensure they still apply to the new markup. The underlying HTML class names have been updated, so any selector that explicitly targets a[data-policy-id] will still work, but selectors that rely on the number of links (e.g., :nth-child) may no longer match.
Shopify Plus merchants – Plus stores retain full control over the checkout UI via Checkout UI extensions. While the default footer still shows the consolidated link, Plus merchants can now hide it entirely and replace it with custom policy links, custom wording, or even a completely different UI component. This flexibility is the only scenario where you’ll need to take action.
Action Required for Merchants
For 99.9% of merchants, there is nothing to do. The change rolls out automatically, and the modal displays your existing policies exactly as before. However, it’s a good practice to:
.checkout-footer__terms-and-policies if you want to style the link.If you notice any visual glitches, a quick CSS tweak in your theme’s checkout.scss.liquid (or via the Theme Editor) will resolve them.
Customizing the Footer on Shopify Plus
Shopify Plus merchants who want a fully bespoke footer can hide the default link and inject their own UI using Checkout UI extensions. The process involves two steps:
checkout.extension block that sets visible: false for the built‑in termsAndPolicies component.checkout GraphQL API and displays them however you like.Below is a minimal example of a Checkout UI extension that replaces the default link with a custom list of policy links.
javascript
import {extend, CheckoutApi} from '@shopify/checkout-ui-extensions';
extend('Checkout::DynamicRender', (root, {extensionPoint}) => {
// Hide the built‑in terms & policies link
root.appendChild(extensionPoint.hideComponent('TermsAndPolicies'));
// Create a container for our custom links
const container = root.createComponent('Block', {spacing: 'extraLoose'});
root.appendChild(container);
// Fetch policies via the Checkout API
CheckoutApi.getPolicies().then(policies => {
policies.forEach(policy => {
const link = root.createComponent('Link', {
external: true,
url: policy.url,
openInNewTab: true,
}, policy.title);
container.appendChild(link);
});
});
});
After deploying the extension, the checkout will no longer show the generic “Terms and policies” link. Instead, shoppers see the list you defined, fully styled to match your brand. Remember to test the extension in a staging checkout before going live, as UI extensions are cached per session.
Impact on Theme Developers
Theme developers who have previously added CSS rules targeting the old footer markup should audit those rules. The new markup uses a single anchor with the class checkout-footer__terms-and-policies. A typical selector update looks like this:
css
/* Old selector */
.checkout-footer a[data-policy-id] { color: #555; }
/* New selector */
.checkout-footer__terms-and-policies { color: #555; }
If you built any JavaScript that listened for click events on individual policy links, switch to listening for the modal’s open event (checkout:terms-and-policies:open) instead. This ensures compatibility with the consolidated UI.
Best Practices & Quick Checklist
Conclusion
The single “Terms and policies” link simplifies the checkout footer, reduces visual clutter, and keeps the legal information readily accessible. For most merchants the update is invisible—apart from the cleaner UI—while developers get a chance to tidy up selectors and Plus merchants gain a new hook for deeper customization. Take a few minutes to run through the checklist above, and you’ll be ready for a smoother checkout experience tomorrow.
Ready to optimize your checkout? Start testing the new footer today, and if you’re on Shopify Plus, explore Checkout UI extensions to make the policy section truly yours. Need help implementing the extension? Reach out to a certified Shopify Partner or drop a comment below!
