How to Use the Shopify Checkout Editor — The Complete Guide

If you have ever lost a customer right at the payment page, you already know how much the checkout experience matters. The Shopify Checkout Editor is the tool that lets you control exactly what that experience looks like without writing a single line of code.

This guide walks you through everything: what the checkout editor is, who can use it, how to navigate it, and how to make the most of every setting so your checkout converts better.

What Is the Shopify Checkout Editor?

The Shopify Checkout Editor is a drag-and-drop visual tool built directly into your Shopify admin. It lets you customize the look, content, and layout of your store's checkout pages, the same pages where your customers enter their shipping details, choose a delivery method, and complete their payment.

Think of it as the theme editor, but specifically for checkout. Instead of editing code or hiring a developer, you can add your logo, change colours, rearrange sections, add trust-building content, and install checkout apps all from one place.

The editor was introduced as part of Checkout Extensibility, Shopify's modern system that replaces the old checkout.liquid file. It is faster, more stable, and built to support third-party apps through official extension points.

Who Can Use the Shopify Checkout Editor?

This is the most common point of confusion, so let's be clear:

• All Shopify plans get access to the checkout editor for branding customisation meaning you can change your logo, colours, fonts, and background image on any plan.
• Shopify Plus merchants get the full checkout editor experience, including:
  • Adding, removing, and reordering checkout sections
  • Installing checkout apps (like upsell widgets, loyalty rewards, custom fields, and address validators)
  • Creating multiple checkout profiles for different customer segments or regions
  • Full control over the checkout, Thank You, and Order Status pages

If you are not on Shopify Plus, you will still benefit from the branding controls, but the advanced layout editing and app extension slots require a Plus subscription.

How to Access the Shopify Checkout Editor

Getting to the checkout editor is straightforward:

1. Log into your Shopify Admin
2. Go to Online Store in the left sidebar
3. Click Themes
4. On your current live theme, click the Customise button
5. In the top centre dropdown (where it says "Home page" or your current page), click it and select Checkout

You are now inside the checkout editor. The interface looks very similar to the regular theme editor a preview in the centre, a panel on the left with sections and settings, and a toolbar at the top.

Understanding the Checkout Editor Interface

Before you start making changes, it helps to know what you are looking at.

The Preview Panel

The large area in the centre shows a live preview of your checkout. You can click between the three main checkout steps using the top navigation:

• Information - where customers enter their contact details and shipping address
• Shipping - where they choose a delivery method
• Payment - where they enter card details and place the order

There is also a Thank You page and an Order Status page, both accessible from the same dropdown at the top. These are the pages customers see after completing a purchase.

The Left Sidebar

This is where all your editing controls live. It is split into two tabs:

• Sections - the building blocks of your checkout layout. Each section is a distinct area of the page, and you can add, remove, and reorder them (on Plus).
• Theme Settings - global styling controls like colours, typography, and spacing that apply across the entire checkout experience.

Customising Checkout Branding

Whether you are on a basic plan or Plus, branding is available to everyone. Here is how to make your checkout feel like a natural extension of your store.

Adding Your Logo

1. In the left sidebar, click Header
2. Click Logo
3. Upload your logo image SVG or PNG with a transparent background works best
4. Adjust the logo width using the slider (aim for something that looks balanced, not too large or too small)

Setting Your Colours

Go to Theme Settings → Colours. You will find controls for:

• Accent colour - used for buttons, links, and key interactive elements. Set this to your brand's primary colour.
• Error colour - what shows when a field is filled incorrectly. Keep this red or a clearly visible warning colour.
• Background - the page background. White or very light grey works well for trust.
• Form fields - the background colour inside input boxes.

Typography

Under Theme Settings → Typography, you can choose fonts for:

• Headings - the step titles like "Contact", "Shipping", "Payment"
• Body text - form labels, descriptions, line item names

Shopify provides a curated list of font options. Pick fonts that match what you use on the rest of your store for consistency.

Background Image or Colour

You can add a subtle background image or gradient to the left side of the checkout (the form side). Go to Theme Settings → Background. Keep any image light and non-distracting the form needs to stay readable.

Editing Checkout Sections (Shopify Plus)

On Plus, you get full control over which sections appear on each checkout page and in what order.

The Order Summary Section

The right side of the checkout shows the customer's cart - items, quantities, and totals. You can customize this area by clicking Order Summary in the sidebar. Options here include:

• Showing or hiding line item images
• Controlling whether discount codes are displayed
• Adding custom content above or below the summary

The Contact Section

This is where customers enter their email address. You can click this section to control whether a phone number field is shown, and whether it is optional or required.

The Shipping Address Section

Click this section to manage which address fields appear. For international stores, you can let Shopify auto-detect the country or set a default.

Adding a Custom Banner or Content Block

On Plus, you can add a Content Block section at the top or bottom of the checkout form. This is useful for:

• Trust badges ("Secure Checkout", "30-Day Returns", "SSL Encrypted")
• Promotional messages ("Free shipping on orders over £50")
• Urgency messaging ("Order in the next 2 hours for same-day dispatch")

To add one, click Add Section in the left sidebar and choose Content Block. You can add text, images, or HTML.

Installing Checkout Apps via the Editor

One of the most powerful features of the modern checkout editor is the ability to install Checkout Extensions apps that add functionality directly inside checkout without touching code.

Common use cases include:

• Post-purchase upsells - offer a complementary product after payment is confirmed
• Custom form fields - collect gift messages, delivery instructions, or business VAT numbers
• Loyalty and rewards - let customers redeem points at checkout
• Address validation - reduce failed deliveries with real-time address checking
• Upsell widgets - show a "you might also like" product during the payment step

How to Add a Checkout App

1. In the checkout editor, click Add App Block in the left sidebar
2. If you have compatible apps installed, they will appear here
3. Click the app you want to add
4. Drag it to the position in the checkout where you want it to appear
5. Configure the app's settings in the left panel
6. Click Save

If an app does not appear here, it either does not support checkout extensions or needs to be installed from the Shopify App Store first.

Customising the Thank You and Order Status Pages

After a customer places an order, they land on the Thank You page. This is one of the most underused pages in ecommerce people are in a positive, receptive mindset right after buying.

To edit it, use the dropdown at the top of the editor and switch to Thank You. Things you can add here:

• A personalised thank-you message from your brand
• Social sharing encouragement ("Share your purchase on Instagram")
• A referral or loyalty prompt
• A post-purchase survey or review request (via a checkout app)
• Estimated delivery information

The Order Status page is slightly different; it is the page customers return to when they click "View your order" from their confirmation email. You can add similar content blocks here too.

Managing Multiple Checkout Profiles (Shopify Plus)

Plus merchants can create separate checkout profiles for different use cases. For example:

• A B2B checkout with different fields and payment options
• A market-specific checkout with localised content for different regions
• A subscription checkout with specific payment method restrictions

To create a new profile:

1. In Shopify Admin, go to Settings → Checkout
2. Under Checkout Profiles, click Add new profile
3. Assign specific markets, channels, or sales channels to that profile
4. Customise that profile separately in the checkout editor

This is particularly powerful when combined with Shopify Markets for international selling.

Best Practices for the Shopify Checkout Editor

Getting access to the editor is one thing, using it well is another. Here are practical tips that make a real difference to conversion rates.

Keep It Clean and Distraction-Free

Checkout is not the place for heavy branding or busy designs. Remove anything that does not help the customer complete their purchase. A clean, minimal checkout reduces anxiety and increases trust.

Match Your Store's Visual Identity

Your checkout should feel like a continuation of your storefront, not a separate website. Use the same logo, the same primary colour, and the same font family as the rest of your store.

Add Trust Signals

Customers hesitate at checkout because they worry about security. Add trust badges "SSL Secured", "Safe Checkout", money-back guarantee icons in a content block above the payment section.

Test on Mobile

More than half of Shopify purchases are made on mobile. Always preview your checkout on the mobile view (toggle it using the device icons at the top of the editor). Make sure buttons are large enough, text is readable, and forms are easy to fill.

Be Careful with App Blocks

More is not always better. Too many checkout app blocks upsells, surveys, loyalty widgets can distract customers and actually hurt conversions. Add one or two at most, and always A/B test their impact.

Save Versions Before Major Changes

Before making significant edits, note down your current settings or take screenshots. Shopify does not currently offer version history for the checkout editor, so there is no "undo" after saving.

Common Questions About the Shopify Checkout Editor

Can I add custom HTML or JavaScript to checkout? Direct HTML and JS injection is no longer possible in the same way as the old checkout.liquid file. Instead, you use checkout app extensions from the Shopify App Store. These run in a sandboxed environment that Shopify manages.

Can I remove the "Powered by Shopify" text from checkout? Yes. On Shopify Plus, you can remove the Shopify branding entirely. On other plans, the branding remains in the checkout footer.

Will my checkout editor settings affect the cart page? No. The cart page is part of your theme and is edited in the regular theme editor. The checkout editor only covers the checkout flow — from the moment a customer clicks "Check out" through to the Thank You page.

Does the checkout editor work with headless Shopify setups? Yes. If you use Shopify's Storefront API with a custom frontend, checkout still runs through Shopify's hosted checkout. The checkout editor applies to that hosted checkout experience.

Can I use the checkout editor to add a custom discount or gift card field? The discount code and gift card fields are standard checkout elements and can be shown or hidden. For more advanced logic like automatically applying discounts you need a checkout app or Shopify Functions (Plus only).

Shopify Checkout Editor vs. checkout.liquid - What Changed?

If you have been using Shopify for a few years, you may remember editing checkout.liquid directly to customize checkout. Shopify has moved away from this approach.

The checkout.liquid file is deprecated and is no longer supported for new customisations. Shopify's current system Checkout Extensibility uses the visual checkout editor plus official extension points that apps can plug into.

The main advantages of the new system:

• No code required for most customisations
• Automatic upgrades - Shopify can update checkout without breaking your customisations
• Better performance - extensions load asynchronously and do not slow down the page
• More stable - custom code in checkout.liquid often broke during Shopify updates

If you are still on checkout.liquid (only possible if you were on Shopify Plus before August 2024), you will eventually need to migrate to the new extensibility model.

Conclusion

The Shopify Checkout Editor gives you a level of control over your checkout experience that simply was not possible a few years ago — and you do not need to be a developer to use it. From basic branding like your logo and colours, to advanced customisation like custom app blocks and multiple checkout profiles, the editor is the central place to make your checkout work harder for your business.

Start with the fundamentals: get your branding consistent, add a couple of trust signals, and make sure the mobile experience is clean. Then, as your store grows, explore checkout apps for upsells, custom fields, and loyalty integrations.

A checkout that feels trustworthy, on-brand, and frictionless is one of the highest-leverage improvements you can make to your store. The Shopify Checkout Editor is the tool that gets you there.