Customisation Limits
Shopify restricts checkout customisation significantly on standard plans. You can change colours, fonts, and add a logo. You cannot change the checkout layout, add custom JavaScript, or modify form fields on standard plans.
Shopify Plus merchants have access to checkout.liquid (legacy) and checkout extensibility (current), which allow significantly more customisation including custom UI components, additional fields, and post-purchase pages.
Branding Your Checkout
Even on standard plans, you can apply your brand colours, logo, and typography to the checkout. Go to Settings, then Checkout, and scroll to Style. Upload your logo, set your brand colour, and choose whether to use a background image or colour.
Use your primary brand colour as the checkout accent colour (the colour of buttons and links). Ensure there is sufficient contrast with white text for accessibility compliance.
Adding Custom Fields
Shopify Plus merchants can add custom fields to the checkout using checkout extensibility. Common use cases: a gift message field, a company name field for B2B orders, a delivery preference field, or a 'how did you hear about us' survey question.
Custom fields data is stored as order attributes and is visible in the order detail view in your admin.
Checkout Scripts (Plus)
Shopify Scripts (available on Plus) allow custom Ruby scripts to modify line item prices, shipping options, and payment methods. These are being deprecated in favour of Shopify Functions. If you are currently using Scripts, plan your migration to Functions.
Common script uses: tiered discount logic, B2B pricing rules, hiding payment methods for specific customer groups, and shipping rate filtering.
Checkout Extensibility
Checkout Extensibility is the modern Plus customisation system using checkout UI extensions. Extensions are React components that render within defined extension points in the checkout. They can display custom content, collect additional information, and respond to checkout state changes.
Key extension points: above the order summary, below the shipping method, above and below the payment section, and the post-purchase page.
Testing Changes
Use a test payment gateway (Bogus Gateway in developer settings) to place test orders and verify your checkout changes display correctly. Test with and without discount codes, with multiple items, and with different shipping regions.
For Plus merchants using checkout extensions, use Shopify's checkout preview functionality to test extensions before publishing them to live traffic.
