Avoid Broken Shopify Logins After Upgrade With Editor or AccountCraft

You can change your Shopify login page text, logo, brand colors, and desktop background image right now, and for most stores you never need to touch code. Open Edit default theme content for wording and the checkout & accounts editor for visuals. Code edits to customers/login.liquid only apply to legacy accounts, and they break once you upgrade to New Customer Accounts. For richer post-login features, look at UI extensions or an app built for the job.

TL;DR:

• Edit sign in headings, passcode instructions, and helper copy under Online Store > Themes > Actions > Edit default theme content, then preview on desktop and mobile.
• Change logos, fonts, colors, and desktop background images in Settings > Checkout > Configurations; the editor also controls checkout and account page branding.
• New Customer Accounts do not support custom HTML, CSS overrides, or extensions before authentication, so use editable text, links, or a separate landing page instead.
• Edit customers/login.liquid only on legacy accounts, duplicate the theme before changes, and expect those customizations to stop working after upgrading to New Customer Accounts.
• For editable customer fields, wishlists, or consent tools, use an account app; UI extensions add features after sign in, not on the login screen.

Table of Contents

• What you can and cannot change on the sign-in page
• Change login page text without code
• Use the checkout and accounts editor for visuals
• When to edit theme code: legacy accounts and upgrade risks
• Advanced options: UI extensions and post-login customization
• Checklist: redirects, sign-in links, testing, and rollback
• Editor first, apps for the rest
• AccountCraft: a no-code block builder for customer accounts
• FAQ
• Sources

What you can and cannot change on the sign-in page

Before you spend an afternoon hunting through settings, it helps to know what is actually on the table. Shopify’s New Customer Accounts give you solid control over branding and wording, but the sign-in screen itself is a protected, platform-managed surface, not an open canvas.

• Supported: logo, brand colors, fonts, background image, and all visible sign-in text and button labels.
• Not supported: custom HTML blocks, arbitrary CSS overrides, or injecting your own DOM elements into the pre-auth screen.
• Why the limits exist: Shopify locks down the pre-auth experience for security and performance reasons, since this page handles authentication and is a common phishing target.

If your request falls into the first group, the no-code tools below will get you there. If it falls into the second, skip ahead to the extensions section for what is realistically possible.

Change login page text without code

Most text changes take less than five minutes once you know where to look. This covers the sign-in heading, button labels, one-time passcode instructions, and any helper copy shown to shoppers before they sign in.

1. Go to Online Store > Themes, click Actions, then select Edit default theme content.
2. Open the Customer accounts section inside that menu.
3. Find the fields for sign-in text, one-time passcode messaging, and related helper copy, then edit the wording directly.
4. Save your changes and preview them before publishing live.

Shopify’s own support community confirms this is the supported route for editing sign-in and passcode text without opening the code editor at all. Some fields accept basic HTML anchors, so you can link out to a policy page or support contact from within a text block.

Pro Tip: Always open a draft preview on both desktop and mobile before publishing text changes, since character limits can wrap differently across screen sizes.

Use the checkout and accounts editor for visuals

Text is only half the picture. For logos, colors, backgrounds, and layout, you need the checkout and accounts editor, a separate tool from the theme editor that governs checkout, order status, thank you, and customer account pages together.

Open it through Settings > Checkout, then Configurations, then Edit on either your active or a draft configuration. Use the page selector to jump to the Sign-in page specifically.

• Upload or swap your logo and adjust accent fonts.
• Set a color palette that carries through buttons, links, and backgrounds.
• Add a main media asset for the two-column desktop layout, placing your image alongside the sign-in form.

Shopify’s changelog confirms that the sign-in page now supports a two-column layout with a customizable background image, a notable expansion from the plain form-only screen merchants had before. Any app blocks or extensions you add later will automatically inherit these brand settings rather than clashing with them, so set your palette first.

When to edit theme code: legacy accounts and upgrade risks

Code-level edits still exist, but only for stores running legacy customer accounts rather than New Customer Accounts. You can tell which one you have by checking whether your theme contains a customers/login.liquid template. If it does, and you have not yet upgraded, that file is still editable.

1. Confirm your account type before touching anything; look for templates/customers/login.liquid in your theme files.
2. If present, go to Online Store > Themes, click Actions, then Edit code, and locate templates/customers/login.liquid.
3. Duplicate your theme as a backup before making any changes, so you can roll back instantly if something breaks.
4. Make your edits in the duplicate theme first, preview thoroughly, then publish once confirmed.

The catch: legacy customizations do not carry over once you upgrade to New Customer Accounts. Shopify redirects legacy account URLs to the new system, and any hard-coded logic in login.liquid simply stops running. Treat legacy code edits as temporary, not a long-term foundation.

Pro Tip: If you’re planning an upgrade within the next year, skip the code route entirely and build in the checkout & accounts editor instead, so you avoid rework later.

Advanced options: UI extensions and post-login customization

Once a customer is signed in, you have far more room to build custom experiences. Shopify’s customer account UI extensions let developers insert content into specific post-login targets rather than rewriting the account system from scratch.

• Extensions can target the order index, order status, profile, and other full-page or block-level locations inside the account area.
• Development runs through the Shopify CLI, a shopify.extension.toml configuration file, and components written in Preact or TSX.
• Capability flags like api_access and network_access control what data and external services an extension can reach.

The sign-in screen itself remains off-limits for this kind of injection. There is no supported extension target for the pre-auth page, so if you need special messaging before sign-in, your realistic options are editable text fields, anchor links, or redirecting shoppers to a custom landing page first, an approach Shopify’s developer community points to for B2B and multi-store setups with unusual messaging needs.

Checklist: redirects, sign-in links, testing, and rollback

A few technical pieces tie the whole setup together, especially if you are linking to the sign-in page from email campaigns or custom buttons elsewhere on your site.

1. Build sign-in links with login_hint to prepopulate an email address and return_to to send customers to a specific page after sign-in.
2. Use routes.storefront_login_url or routes.account_login_url in Liquid when you need these links generated dynamically, as documented in Shopify’s sign-in and redirect guide.
3. Test across a device matrix: desktop, tablet, and at least two mobile screen sizes.
4. Test every sign-in method you offer, including passwordless, Shop Pay, and any social sign-in options.
5. Keep a written log of every code or configuration change, and use draft configurations in the checkout & accounts editor so you can compare before publishing.

If you want deeper background on how theme sections and blocks fit together before touching legacy code, this explanation of Shopify theme architecture is a useful primer for developers newer to the platform.

Editor first, apps for the rest

The platform-managed editor is the safer bet for nearly every merchant, since it keeps your customizations compatible as Shopify updates New Customer Accounts behind the scenes. Reaching for theme code might feel faster today, but it is the first thing that breaks on your next upgrade.

If you need editable customer fields, wishlists, or consent management beyond what the editor offers, an app purpose-built for account pages saves you from reinventing that work yourself. Merchants holding onto legacy custom code should treat an eventual upgrade as planned rework, not a problem to patch around.

— Barikreativa

AccountCraft: a no-code block builder for customer accounts

When the checkout and accounts editor covers your branding but you still want shoppers to manage more about their own data, we built AccountCraft as the next step. We give you a visual block builder for New Customer Accounts, so you can add editable customer fields, wishlists, and repeatable lists without opening a theme file.

• Add and arrange account page blocks visually, no coding or theme edits required.
• Let customers view and edit their own data fields directly from their account.
• Include wishlists and other engagement features merchants typically build by hand.
• Manage consent with tools linked to Shopify’s own consent APIs.

We offer multiple plans, so you can start small and add features as your account page needs grow. Try the Free plan to see how your account pages look with a few blocks in place.

FAQ

How can I customize the password page in Shopify?

For New Customer Accounts, you edit sign-in and passcode text through Edit default theme content under Customer accounts, and adjust visuals like logo and background image in the checkout and accounts editor. Legacy stores can still edit customers/login.liquid directly, but those changes stop working after upgrading to New Customer Accounts.

How can I customize my Shopify home page?

Home page customization happens in the regular theme editor under Online Store > Themes > Customize, which is separate from the checkout and accounts editor used for sign-in and checkout pages. You can rearrange sections, swap images, and edit text there without touching code.

Does Shopify allow customization?

Yes, Shopify supports both no-code customization through the theme editor and checkout and accounts editor, and code-level customization through theme files and developer extensions. The amount of flexibility depends on which page you are editing, since pre-auth pages like sign-in carry tighter restrictions than product or home pages.

How can I customize my Shopify checkout page?

Checkout customization also runs through the checkout and accounts editor, the same tool used for sign-in page branding, accessible via Settings > Checkout > Configurations. You can adjust logo, colors, fonts, and layout, and add app blocks that inherit your existing brand settings automatically.

What’s the difference between legacy and New Customer Accounts?

Legacy accounts rely on theme files like customers/login.liquid that you can edit directly with code, while New Customer Accounts use a platform-managed sign-in page customized through the checkout and accounts editor instead. Upgrading to New Customer Accounts redirects legacy account URLs and disables any custom code tied to the old templates, so merchants should plan to rebuild essential features as UI extensions or through an app.

Sources

• A refreshed sign-in page for customer accounts, now customizable in the editor - Shopify Changelog
• Customer account UI extensions - Shopify developer docs
• How to Edit Customer Login Page Text

Recommended

• The page builder for Shopify Customer Accounts