Shopify Revamps Customer Sign‑In Page: Two‑Column Layout, Custom Backgrounds, and API Control

Table of Contents

1. Key Highlights
2. Introduction
3. What changed: the new two‑column sign‑in layout explained
4. Using the Checkout and Accounts editor: practical customization
5. Programmatic customization: Checkout And Accounts Configuration API
6. Migration: moving from legacy customer accounts to the latest version
7. Design and UX best practices for the new sign‑in surface
8. Accessibility and inclusive design
9. Testing, previewing and rollout strategies
10. Security and privacy considerations
11. Measuring impact: analytics and KPIs
12. Implementation checklist and common troubleshooting
13. Examples of effective sign‑in treatments
14. Staying consistent with brand systems
15. When to involve developers or agencies
16. FAQ

Key Highlights

• Shopify’s customer sign‑in page now uses a two‑column layout with the sign‑in form on the left and a customizable background image on the right, letting merchants extend brand visuals beyond the logo.
• Merchants can customize and preview the sign‑in page directly in the Checkout and Accounts editor and apply consistent shared settings; advanced changes are possible through the Checkout And Accounts Configuration API.
• The redesign is available only for stores on the latest version of Shopify customer accounts; stores using legacy accounts must upgrade to access the new layout and controls.

Introduction

A customer’s first interaction with an account interface shapes trust, perception and conversion. Shopify’s refreshed sign‑in page gives merchants a simple but powerful way to bring that interface in line with their storefront. The new two‑column layout places the sign‑in form left and a large, brandable image to the right, letting merchants visually extend their identity into a transactional surface that traditionally prioritized function over form.

Beyond aesthetics, the update introduces a consistent editing experience in the Checkout and Accounts editor and exposes programmatic controls through Shopify’s Checkout And Accounts Configuration API. The combination of an editor for visual customization and an API for advanced configuration lets teams balance marketing, design and development workflows. This article explains what changed, how to use the new tools, the UX and accessibility considerations merchants should apply, and practical steps for testing and rolling out the updated sign‑in experience.

What changed: the new two‑column sign‑in layout explained

The core visible change is a two‑column layout that separates the sign‑in form and the visual field. Previously, sign‑in pages were generally single‑column and focused exclusively on inputs, labels and the brand logo. The new layout keeps the form compact and left‑aligned while allocating a second column for a large image on the right.

Why that matters:

• Visual continuity: The right‑hand image can carry brand photography, product shots, seasonal banners or lifestyle imagery, creating a more cohesive brand moment between storefront and account surfaces.
• Conversion potential: Well chosen visuals can comfort returning customers and reinforce reliability, which supports completion of sign‑in flows and reduces abandonment.
• Flexible composition: Merchants set shared styling across surfaces to maintain consistent typography, colors and spacing, while customizing the sign‑in page without altering unrelated pages.

The redesign is intentionally minimal: it retains a focused, easy‑to‑scan form on the left to preserve accessibility and efficient task flow, while introducing a dedicated visual canvas on the right. That balance reduces cognitive load for users while offering clear opportunities for brand expression.

Using the Checkout and Accounts editor: practical customization

Shopify integrated sign‑in page controls into the Checkout and Accounts editor. The editor provides a visual interface for customizing shared settings and surface‑specific styles so teams can preview changes before they go live.

Key capabilities visible in the editor:

• Two‑column preview: See the sign‑in form alongside the background image at multiple breakpoints, including desktop and mobile.
• Shared settings: Configure colors, fonts, and button styles that apply across checkout and account surfaces to maintain consistent brand system.
• Surface‑specific styling: Apply a unique background image, overlay color, or right‑column styling that only affects the sign‑in page without changing checkout pages.
• Live preview: Test content and styling in the editor before publishing, reducing surprises after deployment.

Practical tips for using the editor

• Prepare assets before editing: Optimize background images for multiple screen sizes and resolutions. Use WebP or optimized JPEG for smaller file sizes while preserving image quality.
• Keep contrast in mind: The image and overlay must provide readable contrast for the sign‑in form and any text within the form area. The editor’s preview helps validate contrast at design time.
• Test across devices: Desktop benefits from the two‑column layout, but mobile will typically stack or prioritize the form. Preview both states to ensure the visual doesn’t obscure key form elements.

Example workflows

• Marketing and design teams can draft visual concepts, upload images, and set overlay colors to match seasonal campaigns without developer intervention.
• Customer support or product teams can toggle previews to verify messaging changes when troubleshooting account access issues.

Programmatic customization: Checkout And Accounts Configuration API

For merchants that require more precise control or need to automate changes across many stores, Shopify exposes the Checkout And Accounts Configuration API. This GraphQL‑based administrative API lets developers update configuration programmatically, aligning account UI with complex rollout processes, A/B tests or localization pipelines.

What the API enables

• Update shared settings at scale: Apply typography, color tokens and spacing rules across stores using scripts or CI/CD workflows.
• Set surface attributes: Programmatically change the sign‑in page image, overlay, or layout options for particular markets or storefront versions.
• Automate rollout: Push staged changes to a subset of stores or migrate settings between development and production environments.

Example use cases

• A brand operating multiple regional storefronts can push localized sign‑in imagery and text to each market via an automated workflow.
• A theme development agency can implement a script that sets design tokens after theme deployment, ensuring newly provisioned stores match client branding.
• An enterprise IT team can schedule overnight configuration updates to reflect a product launch or seasonal theme with minimal manual intervention.

A sample GraphQL mutation (conceptual) Below is a conceptual example showing how a GraphQL mutation might look when updating a sign‑in background image and some shared colors. This snippet is illustrative; refer to Shopify’s API documentation and schema for exact field names and authentication requirements.

mutation { checkoutAndAccountsConfigurationUpdate(input: { lockVersion: 1, sharedSettings: { primaryColor: "#0A5F8F", accentColor: "#E63B3B", fontFamily: "Inter, system-ui, sans-serif" }, signInSurfaceSettings: { backgroundImageUrl: "https://cdn.example.com/sign-in-hero.webp", overlayColor: "#000000", overlayOpacity: 0.35 } }) { configuration { id sharedSettings { primaryColor accentColor } signInSurfaceSettings { backgroundImageUrl } } userErrors { field message } } }

Authentication and rate limits Use a properly scoped admin access token for the Admin GraphQL API. Monitor rate limits; script logic should include backoff and retry handling. When automating updates, log API responses and user errors for traceability and rollback capability.

Migration: moving from legacy customer accounts to the latest version

The redesigned sign‑in experience is exclusive to stores using the latest version of Shopify customer accounts. Stores still on legacy accounts must upgrade to gain access.

High‑level upgrade steps

• Audit current usage: Inventory any customizations, third‑party apps, or Shopify Functions that reference legacy account templates.
• Back up customizations: Export theme files and save any account‑related Liquid or JavaScript snippets used for custom behaviors.
• Create a staging environment: Use a development store or unpublished theme to test the upgrade before applying changes to live storefronts.
• Follow Shopify’s upgrade documentation: Complete the steps outlined in Shopify’s migration guide, paying attention to any breaking changes in account templates or API interactions.
• Test thoroughly: Validate sign‑in and account creation flows, password resets, and social sign‑in options. Confirm that any integrations with CRM or email platforms continue to receive expected events.
• Monitor traffic and support: Prepare support scripts and monitoring during and after the rollout to catch any unexpected user issues.

Common upgrade pitfalls

• Hardcoded asset references: Some themes hardcode asset paths or DOM hooks in account templates. These will require updates to work with the new layout.
• App incompatibility: Apps that inject scripts into account pages may break if the DOM structure changes with the two‑column layout. Contact app developers for updates or compatibility patches.
• Missing localization: Ensure text strings and labels used in sign‑in flows are localized and tested across all markets.

If the migration process seems daunting, consider engaging a Shopify developer or a certified partner to plan and execute the upgrade. That investment often speeds time to deploy and reduces risk.

Design and UX best practices for the new sign‑in surface

A sign‑in page serves a task-centered purpose: authenticate returning customers quickly and reliably. The new layout introduces opportunities for brand expression, but design choices should support usability and accessibility.

Visual strategy

• Choose images with clear focal points: A photo with a predictable focal area on the right will avoid distraction. Keep the subject off center or use an abstract texture to provide context without competing with the form.
• Use overlays to improve contrast: A semi‑transparent dark or light overlay preserves the image’s character while ensuring visible text and form elements.
• Maintain visual hierarchy: The sign‑in form should remain the primary visual anchor. Buttons and input labels must be prominent and consistent across the site.

Copy and messaging

• Keep labels concise and clear: Use straightforward labels like “Email” and “Password.” Avoid extraneous language that could clutter the form.
• Provide reassurance for new users: Offer a short line for “Don’t have an account? Create one” or an inline link to account creation. Keep it secondary to the form’s primary action.
• Tailor microcopy for context: If sign‑in supports multiple methods (email, social login, passwordless), display options consistently and explain differences briefly.

Behavior and interaction

• Preserve keyboard focus order: Ensure the tab order flows logically from the email field to password and then the submit action.
• Make error messages actionable: Display inline validation for email format and descriptive error messages for authentication failures.
• Support password managers and autofill: Proper input attributes (autocomplete, input type) help users sign in more quickly.

Mobile considerations

• Collapse imagery on mobile if necessary: On smaller screens, prioritize the form and either hide the image or place it above/below the form to avoid visual congestion.
• Ensure touch targets meet guidelines: Buttons should meet recommended minimum sizes and spacing to prevent mis-taps.

Example scenarios

• A subscription food service can use subtle lifestyle photography of a prepared meal on the right column to remind customers of the experience tied to their account.
• A B2B supplier might prefer a textured brand pattern instead of photography to maintain a professional tone without distracting from account tasks.

Accessibility and inclusive design

A visually rich sign‑in page must still be navigable by all users, including those using assistive technologies. The following practices ensure the new layout remains accessible.

Color and contrast

• Adhere to WCAG contrast ratios: Text and interactive elements must meet at least AA contrast for normal text and enhanced contrast for UI components.
• Test overlays: If a background image changes frequently, apply an overlay color or gradient to maintain consistent contrast.

Semantic HTML and ARIA

• Use semantic input elements: Provide labels, descriptive aria attributes and role markers where needed.
• Announce validation and errors: Ensure screen readers receive clear, immediate feedback on validation errors and successful sign‑ins.

Keyboard access

• Maintain logical tab order: Keep the sign‑in form fields and buttons reachable with standard keyboard navigation.
• Offer focus states: Visible focus indicators must be present for all interactive elements.

Performance considerations

• Optimize images: Large background images can slow page load and impact screen readers and low‑bandwidth users. Use responsive images and lazy loading where appropriate.
• Minimize script bloat: Avoid heavy client‑side frameworks for the sign‑in surface unless necessary. Keep the experience fast and resilient.

Testing recommendations

• Use automated accessibility scanners and manual testing with screen readers (e.g., VoiceOver, NVDA) to validate experience.
• Test with keyboard navigation only to ensure all functionality is accessible.

Testing, previewing and rollout strategies

A careful rollout reduces risk to customer experience and revenue. Shopify’s editor offers preview functionality, but combine that with staged testing and monitoring.

Staged rollout plan

• Build and test in a development store: Validate edits without affecting production.
• Use a preview or unpublished theme to test on staging environments with realistic data.
• Roll out to a subset of traffic: If you use feature flags or multiple storefront variants, route a small percentage of visitors to the new layout to monitor behavior.
• Monitor and measure: Track sign‑in completions, error rates, time to sign‑in, and support tickets to detect regressions.

A/B testing considerations

• Test content and visuals independently: Separate tests for imagery, overlay intensity, and microcopy keep variables isolated and results actionable.
• Consider session continuity: Ensure tests don’t break sessions that persist between the sign‑in page and subsequent checkout flows.

Key metrics to watch during and after rollout

• Sign‑in completion rate: Track the ratio of sign‑in attempts to successful authentications.
• Abandonment rate on sign‑in page: A spike suggests usability or performance issues.
• Time on page for sign‑in: Significant increases may indicate confusion or performance problems.
• Support contacts related to account access: Rising volume signals potential friction.

Rollback strategy

• Maintain configuration backups: Keep a record of prior shared settings and surface settings to restore quickly.
• Automate restore: If using the API, create a script to revert to the prior configuration within minutes.
• Communicate internally: Notify support and product teams about rollback steps and timing to coordinate responses.

Security and privacy considerations

Changes to account surfaces require attention to authentication flows and data handling. The visual update does not inherently change security requirements, but implementation details can create vulnerabilities if not handled properly.

Authentication and session handling

• Preserve existing authentication safeguards: Do not alter login flow behaviors in ways that weaken password validation, brute‑force protection, or session expiration policies.
• Maintain MFA behavior: If multi‑factor authentication is enabled, verify that the flow still triggers properly from the new sign‑in surface.

Third‑party scripts and content

• Minimize external content on the sign‑in page: Each external script introduces risk and may alter user experience or security posture.
• Review app permissions: Apps that inject content into account pages should be audited for compliance with privacy and security requirements.

Data privacy

• Avoid collecting extra personal data on the sign‑in surface: Keep inputs minimal and avoid additional tracking prompts that could violate privacy expectations.
• Inform users about cookies and tracking: If you use analytics on account pages, ensure consent flows and cookie banners respect regional regulations.

TLS and asset hosting

• Use secure asset hosting: Serve images and scripts over HTTPS and validate CDN configurations.
• Set appropriate caching policies: Balance performance and freshness, particularly when images change frequently for campaigns.

Incident readiness

• Log authentication events: Keep secure logs for troubleshooting and anomaly detection while complying with data retention policies.
• Monitor for unusual patterns: Sudden increases in failed sign‑ins can indicate credential stuffing or other attacks. Have rate‑limiting and IP throttle measures in place.

Measuring impact: analytics and KPIs

Quantifying the value of design changes requires a mix of qualitative and quantitative metrics. Establish a baseline before applying major visual changes and compare post‑rollout outcomes.

Primary metrics

• Authentication success rate: Percentage of sign‑in attempts that result in successful logins.
• Conversion lift: For stores where being signed in affects checkout completion, measure overall purchase conversion differences pre‑ and post‑change.
• Time to task: Average time users take to complete sign‑in.
• Help center interactions: Volume of sign‑in related searches or tickets.

User behavior and sentiment

• Heatmaps and session replays: Tools like Hotjar or FullStory can reveal where users click, hesitate, or abandon on the sign‑in page.
• Qualitative feedback: In‑app surveys or follow‑up emails capture user sentiment about the new experience.

Campaign and acquisition attribution

• If launching imagery tied to a campaign, track campaign‑driven sign‑ins and downstream purchases to measure effectiveness.
• Segment metrics by traffic source and device type to identify where the design performs best.

Interpreting results

• Look for statistical significance in A/B tests and control for external factors such as promotional events, site downtime or broad trend shifts.
• Use segmented analysis: New users, returning customers, and mobile visitors may react differently to changes.

Implementation checklist and common troubleshooting

A practical checklist helps teams prepare, deploy and validate the new sign‑in page.

Pre‑deployment checklist

• Inventory existing account customizations and scripts.
• Optimize and prepare imagery in multiple sizes.
• Define shared tokens (colors, fonts) and document them.
• Create a rollback plan and export current configuration.
• Confirm API credentials and rate‑limit handling for programmatic updates.
• Coordinate schedule with support and marketing teams.

Deployment checklist

• Apply changes to a development or staging environment first.
• Validate accessibility, mobile behavior and performance.
• Run a small, controlled rollout if possible.
• Monitor analytics and logs for unexpected behavior.

Post‑deployment checklist

• Confirm sign‑in completion rates are stable or improved.
• Check error logs for authentication failures or third‑party script errors.
• Confirm asset delivery performance across regions.
• Solicit internal and external feedback; adjust imagery or overlay as needed.

Common issues and fixes

• Image not showing: Verify CDN URL and access permissions; check mixed content warnings if assets served over HTTP.
• Layout breaks on small screens: Ensure responsive CSS or allowed configuration in the editor specifies mobile stacking behavior.
• Third‑party app conflicts: Isolate by disabling app scripts or contacting the app developer for compatibility updates.
• Slow page loads: Use optimized, responsive images and enable caching and CDNs.

Examples of effective sign‑in treatments

These hypothetical examples illustrate how different merchants might leverage the new layout.

Example 1 — DTC apparel brand A direct‑to‑consumer clothing brand uses a lifestyle hero image on the right showing a model in a seasonal collection. The sign‑in form uses an overlay with the brand’s primary color at 30% opacity for contrast. Shared typography ensures headings in the account area match the storefront. The brand reports a small increase in returning customer purchases after the redesign, attributed to improved visual continuity.

Example 2 — SaaS vendor with account dashboards A B2B SaaS company chooses a subtle geometric pattern in the right column to maintain a professional tone. Copy emphasizes a single sign‑in method and includes a compact “Need help?” link that opens support resources in a modal. The company finds that concise microcopy reduces support requests related to password resets.

Example 3 — Global marketplace running localized imagery A marketplace with multiple regional storefronts uses the API to programmatically swap sign‑in imagery per market. Localized photography and translated microcopy enhance trust. The marketing team coordinates seasonal imagery changes via the API during regional campaigns, ensuring consistent rollout across markets in under an hour.

These examples show that subtlety often yields the best results: imagery supports the task, it does not overshadow it.

Staying consistent with brand systems

A sign‑in page is part of a broader design system. Adopt a token‑driven approach to ensure consistency.

Design token strategy

• Define color roles: primary, accent, background, surface, link, error.
• Set typography tokens: font family, weights, sizes for headings, labels and body text.
• Standardize spacing tokens: small, medium, large for consistent component spacing.

Apply tokens to shared settings in the Checkout and Accounts editor or through the API to ensure the sign‑in surface inherits the same foundation as the storefront and checkout. This reduces visual drift and simplifies maintenance.

When to involve developers or agencies

Nontechnical teams can accomplish many tasks within the editor, but project scope determines when to bring developers or partners onboard.

Engage developers when:

• You require programmatic updates via the API at scale.
• You have custom authentication flows or integrations with CRM/SSO providers.
• Legacy account templates contain Liquid customizations that need migration.

Consider a Shopify Partner when:

• You need a coordinated migration across multiple storefronts and want end‑to‑end testing and rollout.
• Your business requires accessibility certification or an audit.
• You plan to integrate complex personalization tied to customer attributes.

Budget and timeline considerations

• Small brand updates: A designer and a merchant admin can implement imagery and token changes in a few hours to a few days, depending on approvals.
• Enterprise rollouts: Multi‑store rollouts with localization, API automation and testing can take several weeks of coordinated work.

FAQ

Q: Where do I access the new sign‑in page editor? A: The sign‑in page is editable in Shopify’s Checkout and Accounts editor. Use the editor to preview and adjust shared settings and surface‑specific styles. Access requires the latest customer accounts version.

Q: Can I use different background images for different markets or languages? A: Yes. Use the Checkout And Accounts Configuration API to automate per‑market or per‑locale imagery. Alternatively, create manual variants within the editor and publish them as needed, though automation is recommended for larger, multi‑market setups.

Q: Will the redesign affect my checkout pages? A: Shared settings can apply across checkout and account surfaces to keep styling consistent. Surface‑specific styling allows you to make sign‑in page adjustments without altering the checkout layout. Test changes in a staging environment before publishing.

Q: What happens if I don’t upgrade from legacy customer accounts? A: The new two‑column sign‑in layout and editor controls are available only on the latest customer accounts version. Legacy accounts will not receive this update. Shopify provides a migration guide to assist with the upgrade.

Q: How should I choose a background image for best results? A: Select images that align with your brand but do not distract from the form. Favor images with calm compositions, neutral or predictable focal points, and the ability to support an overlay. Optimize images for web delivery.

Q: Are there accessibility concerns I should watch for? A: Yes. Maintain WCAG contrast ratios for text and interactive elements, ensure semantic markup and keyboard accessibility, and verify behavior with screen readers. Use overlays and image treatment to keep contrast consistent across imagery.

Q: Can I use the API to schedule rollout changes? A: Use scripts or CI/CD pipelines that call the Checkout And Accounts Configuration API to automate updates. Implement error handling, logging, and rollback scripts to minimize risk during scheduled changes.

Q: Will third‑party apps still work on the sign‑in page? A: Apps that rely on DOM hooks or inject scripts may need updates if the page structure changes. Test critical apps during migration and contact app developers for compatibility fixes when necessary.

Q: How do I measure the impact of the redesign? A: Track authentication success rates, sign‑in completion, abandonment rate on the sign‑in page, time to sign‑in, and support tickets related to account access. Use A/B testing for controlled experiments.

Q: What are the best practices for mobile behavior? A: Prioritize the form for mobile users. Ensure responsive stacking or image adjustments prevent obstruction of form elements. Keep touch targets large and spacing adequate for comfortable tapping.

Q: Can I revert to the previous design if I don’t like the changes? A: Maintain a backup of previous configuration settings. If you used the API, create a restore script. If changes were made manually in the editor, reapply prior settings or restore from a stored configuration in your migration documentation.

Q: Who should I contact for help with upgrading from legacy accounts? A: Consult Shopify’s upgrade documentation and support channels. For complex migrations, consider hiring a Shopify Partner or certified developer to assist with testing and implementation.

Q: Does the new design require extra legal notices or privacy disclosures? A: Not inherently. However, if you add any new tracking or third‑party scripts to the sign‑in page, ensure your privacy notices and cookie consent mechanisms remain compliant with applicable laws and your privacy policy is updated accordingly.

Q: Are there performance optimizations I should implement for the background image? A: Yes. Serve optimized, responsive images via a CDN, use modern formats like WebP when supported, and implement appropriate caching. Consider lazy loading for images that are not visible on first paint, but ensure the sign‑in image’s loading strategy does not delay form interaction.

Q: How can I coordinate marketing and technical teams for this update? A: Define a shared plan: choose imagery, define design tokens, prepare migration steps, schedule staging and testing windows, and assign roles for support post‑launch. Regular checkpoints reduce last‑minute issues.

Q: Will the new layout impact SEO? A: Account and sign‑in pages typically do not play a direct role in public search rankings. However, improved user experience can indirectly affect metrics like time on site and repeat visits, which support broader business goals. Maintain accurate robots.txt and canonical settings as applicable.

Q: Is there a cost to enable the new design? A: No direct cost beyond the normal Shopify plan. Costs may arise from development resources, partner services, or custom imagery creation.

Q: Where can I find developer documentation for the Checkout And Accounts Configuration API? A: Shopify provides Admin GraphQL API documentation, including the Checkout And Accounts Configuration mutation. Follow Shopify’s developer docs for schema details, authentication and examples.

Q: What should I monitor in the first 72 hours after rollout? A: Authentication success rates, support tickets related to account access, page load times for the sign‑in page, and any errors or warnings in server and client logs.

Q: How do we handle legacy browser support? A: Test the sign‑in page across supported browser versions. Provide fallback behaviors or simplified styles for older browsers if your user base requires it. Avoid relying on cutting‑edge features that lack broad support for mission‑critical interactions.

Q: Can I use the new layout for account creation as well? A: The editor and settings often apply across related account surfaces. Configure account creation pages to match the sign‑in styling or apply distinct surface‑specific choices as needed to support different user journeys.

Q: Who benefits most from this update? A: Merchants who value consistent brand experience across touchpoints, teams that want editor‑driven visual control, and organizations that rely on API automation for multi‑store or localized rollouts.

Q: Any final advice before making changes? A: Prepare assets, test thoroughly, and keep user experience and accessibility central to design choices. Use the editor for visual updates and the API for automation and scaling. Monitor metrics and have a rollback plan in place.