Shopify just rolled out a visual refresh for the payment method section on checkout. When a store offers four or fewer payment options, the list transforms into a modern tiled layout that highlights each method with its own card‑style block. For merchants with more than four options, the classic vertical list remains unchanged. This post dives deep into the update, explains who is affected, and offers actionable steps to make the most of the new design.
What’s New: Tiled Payment Method Layout
The refreshed design is triggered automatically when a checkout meets specific criteria: the store must present four or fewer payment methods and those methods must satisfy Shopify’s internal display rules (e.g., they are enabled, have proper branding assets, and are not hidden by custom scripts). When the criteria are met, each payment method appears as a rectangular tile that includes the brand logo, name, and a subtle hover effect. The layout is responsive, stacking tiles on mobile and aligning them in a grid on desktop.
Why the change? Shopify aims to reduce friction at the final purchase step. By giving each payment option visual prominence, shoppers can quickly scan and select their preferred method, potentially increasing conversion rates, especially for stores that rely on a handful of popular gateways such as Shopify Payments, PayPal, Apple Pay, or Klarna.
Who Is Affected
Merchants – Any store that currently offers four or fewer payment methods will see the new tiled UI without any code changes. If you prefer the classic list view, you can add a fifth payment method or adjust your gateway settings to keep the list format. Conversely, stores with more than four options remain unchanged, but they can still benefit by consolidating to a smaller set of preferred gateways.
Developers – For Shopify Plus merchants using the checkout.liquid file, the underlying HTML structure has been updated. The new markup uses a div with the class payment-method-tile instead of the previous <li> list items. If you have custom CSS or JavaScript that targets the old list selectors, you’ll need to adjust those selectors to avoid breaking the layout. No API or GraphQL schema changes accompany this update, so backend integrations remain untouched.
How to Implement or Test the New Layout
.payment-method-list or ul.payment-methods, update it to the new class names. A quick fix example:css
/* Old selector – remove or rename */
ul.payment-methods { /* … */ }
/* New tiled selector */
.payment-method-tile {
border: 1px solid #e5e5e5;
border-radius: 8px;
padding: 12px;
text-align: center;
transition: transform 0.2s ease;
}
.payment-method-tile:hover { transform: translateY(-2px); }
querySelectorAll('.payment-method-list li') to querySelectorAll('.payment-method-tile'). This ensures your script runs on both list and tiled views without errors.Best Practices for a Seamless Checkout
Conclusion & Next Steps
Shopify’s refreshed payment method design is a subtle yet powerful way to modernize the checkout experience. By understanding the trigger criteria, updating any custom front‑end code, and aligning your payment strategy with the tiled layout, you can boost clarity for shoppers and potentially improve conversion. Take a few minutes this week to audit your payment gateways, test the new view on a staging store, and adjust any lingering CSS. The result: a cleaner, more inviting checkout that matches today’s design expectations.
Ready to see the tiled checkout in action? Log into your Shopify admin, review your payment settings, and drop us a comment with your results. If you need help tweaking custom code, our dev team is just a message away!
