Customer Accounts / Improvement

Sign-in page refreshed +
Now customizable yourself in the editor

Switches to a new two-column design where you can place a background image on the right to express your brand. Edit directly while previewing in the Checkout & Accounts editor, with support for advanced customization via API.

On this page
  1. What changed (in 30 seconds)
  2. New layout diagram: Before / After
  3. Where you can customize: 3 editing routes
  4. Summary of key changes
  5. Requirements and prerequisites
  6. Editing flow (3 steps)
  7. 5 points developers should know
  8. 3 use cases for your business
  9. One-line summary for proposals

1What changed

The Customer Accounts sign-in page has been refreshed,sign-in form on the left / background image on the rightin a two-column layout.
In addition,Checkout & Accounts editoryou can now customize it while previewing.

Two-column layout

Left: sign-in form / Right: customizable background image.

Editor customization support

Edit directly while previewing in the Checkout & Accounts editor.

API

Also controllable via API

Advanced customization with the Checkout And Accounts Configuration API.

2New layout diagram: Before / After

BEFORE (legacy · single-column) LOGO Sign in Logo + form only AFTER (new · two-column + background image) LOGO Sign in Form Background image refresh
The key point: you can now express your brand visually beyond just a logo. The branding space that was previously limited to a logo is nowthe visual area on the rightopened up entirely.

3Where you can customize: 3 editing routes

① Shared settings Shared across all surfaces Styles (colors, fonts, etc.) → Align them all at once ② Tailored styling Sign-in page–specific Adjust the presentation → Customize individually ③ Configuration API Checkout And Accounts Configuration API → More advanced control
Editor · Shared

Shared settings

Shared style settings that apply consistently across sign-in, checkout, account, and other surfaces.

Editor · Individual

Tailored styling

Adjust style elements for the sign-in page alone to give it a distinct look. Editable with live preview.

API

Configuration API

"More advanced" customization control beyond the editor UI is achieved via the API.

4Summary of key changes

ItemBeforeThis change
Layout Sign-in form–centric layout New 2 columns (left: form / right: background image)
Brand expression Logo only New Can be expressed visually with a background image
Editing location Not specified (no direct editing) New Edit and preview directly in the Checkout & Accounts editor
Shared styles — New Apply in bulk with Shared settings
API customization — Added Checkout And Accounts Configuration API
Scope — Latest version of customer accounts only(legacy not supported)

5Requirements and prerequisites

Must be the latest version of customer accounts

This feature is offered only for the latest version of customer accounts. This refresh, editor editing, and background images all depend on it.

Legacy customer accounts are not supported

Stores on the legacy version can't use it. You'll need to complete the upgrade by following Shopify's guidance.

Available plans, countries, and additional costs in the article: Not stated. Follow Shopify's official guide for upgrade eligibility and the procedure.

6Editing flow (3 steps)

1

Open the Checkout & Accounts editor

Select the sign-in page to display the preview.

2

Configure Shared settings + a background image

Keep shared styles consistent while expressing your brand with a background image in the right column.

3

Make advanced adjustments via the API if needed

Fill in areas the editor can't cover with the Configuration API.

Editing can be done directly while viewing the preview. The big difference from before is that you can swap brand visuals without touching code.

75 points engineers should keep in mind

1. Layout: a fixed two-column structure is assumed

The structure is Left: form / Right: background image. Rather than a freely customizable layout, the design makes use of the "two-column frame" Shopify provides.

2. The editing surface is the "Checkout & Accounts editor"

It's integrated into the same editor as Checkout, meaning you can manage it within the same framework as checkout styling. Role separation and permission design follow those of checkout.

3. A two-layer structure of Shared and Tailored

A hierarchy of shared styles (Shared) and individual styles (Tailored). Depending on your design, you can balance brand consistency with per-page optimization.

API

4. Checkout And Accounts Configuration API

Advanced customization beyond the editor's reach is handled via the API. Remember the API name that serves as the starting point for IaC-style configuration management or rolling out across multiple stores.

5. Not available on legacy customer accounts, so an upgrade is effectively a prerequisite

Explicitly stated as "latest customer accounts only."For stores still running on the legacy version, upgrading first (following the official guide) takes priority. For replacement or renovation projects, always build this sequence into your work plan.

83 use cases you can apply to your work

USE CASE 1

Crafting a "login entry point" that matches your brand site's look and feel

Challenge
The main site is carefully crafted, yet only the sign-in page feels sterile, breaking the brand experience.
Solution
Set a brand visual (product, model, or store photos, etc.) as the background image on the right side of the two columns. Also fine-tune fonts and colors in Shared settings.
Impact
The brand experience flows seamlessly from sign-in onward, raising the quality of the returning-customer experience. It can be implemented with zero code changes.
Technical note
Edit while previewing from the Checkout & Accounts editor. No deployment needed.
A B C D
USE CASE 2

Centrally controlling the "sign-in experience" across multi-brand / multi-store operations

Challenge
You run multiple brands / multiple stores, and the sign-in appearance varies from store to store. Aligning them by hand is an operational burden.
Solution
Manage style configuration as code across stores with the Checkout And Accounts Configuration API. Templatize Shared settings and roll them out everywhere.
Impact
Enforce brand guidelines through the API, reducing design inconsistency when launching new stores.
Technical notes
API name: Checkout And Accounts Configuration API. The specific endpoints and schema are not documentedin this article; refer to the official documentation separately.
legacy new
USE CASE 3

Building a rationale to "drive an upgrade" away from legacy customer accounts

Challenge
The client was still on legacy customer accounts, and there was little justification for adopting the latest features.
Approach
Use the fact that "brand expression on the new sign-in page + editor editing + API customization are exclusive to the latest version" as the basis for the proposal, and turn the upgrade into a concrete plan.
Impact
It becomes easier to frame the UI refresh and improved brand experience as "the return on a feature upgrade," making the migration project easier to get approved.
Technical notes
Follow Shopify's official guide for the specific migration steps. Start from the in-article link ("follow our guide").

9A one-line summary you can use in proposals

The Customer Accounts sign-in page has been redesigned with a two-column layout + background image, and can now be
previewed and edited directly in the Checkout & Accounts editor.
Advanced control is available via the Checkout And Accounts Configuration API. However, limited to the latest customer accounts."