Ecom Ideas
  • Homepages & nav
  • Category pages
  • Product pages
  • Cart pages
  • Checkout
  • Site search
  • Internationalization
  • Holiday ideas
  • Featured idea gallery
  • Topical articles
Subscribe

Get daily ideas

LinkedIn
💡
Ecom Ideas
/Checkout
Checkout
/
✍️
Sign in / guest checkout
✍️

Sign in / guest checkout

Tap any tip to open toggle ⚡ some gifs may take a moment to load

Featured ideas 🦄 are rare ideas you may not have seen before ;-)

🛍️
Note that these examples refer to non-Shopify sites that have a dedicated Sign in / Guest checkout step. A Shopify-specific checkout section is coming soon!

💡 Ideas and tips

‣
Simply capture email first (no Guest or Sign In options)

👖 Abercrombie removes the friction of choosing Guest Checkout or Sign In by unifying the first step to simply the email address. This also allows them to recover checkouts that abandon early

image
‣
Skip the sign in step completely

🧭 Journeys removes the friction and allows all customers to jump right into checkout. A bold Sign In CTA sits at the top for returning visitors. This shortens the checkout flow by a full step!

image

🎽 Under Armour uses button copy to add the value prop that logging in makes checkout faster — many customers are lazy and choose guest checkout every time, this helps steer them towards Sign In

image

Here’s the CTA on desktop:

image
‣
Show your Guest Checkout option first
💡
Many Sign In steps present Guest Checkout as a single button and Sign In with open fields + button. Eye tracking and user studies show humans are inclined to just start filling visible fields on auto-pilot 🤖 leading to many new/guest users filling in the first fields they see, and triggering errors. Presenting Guest Checkout first, with its own open field leverages this behavior and provides a visual cue to pay more attention to the difference between the 2 options. Secondly, it enables you to capture 📩 email addresses immediately to send checkout recovery emails if necessary.

👗 Reformation presents Guest Checkout first with an open email field. As users scan screens from top-to-bottom, it’s less likely new customers will fill in the wrong form

image

👗 Tory Burch’s layout is slightly different, without an email field for Guest Checkout. Section headlines are larger than the button CTAs, and the form fields are faint. New customers are less likely to mindlessly start entering text to the wrong fields

image
‣
Style Guest Checkout as the primary button

👖 Levi’s styles its Guest Checkout button more prominently than its Sign In option. Both appear above the mobile fold. Sign In fields are not styled as rectangular fields, and don’t compete with the Guest Checkout button (although their unconventional design and disabled Log In button may have their own UX issues)

image
‣
Show Sign In fields only on user action
💡
We know from eye tracking and user studies that users tend to fill in form fields because they’re there, not because they’re relevant — it’s an unconscious urge! This leads to lots of guests filling out sign in fields erroneously.

👢BootBarn’s Sign In step teases users with open fields — they’re so close to the Guest Checkout button it’s easy to misinterpret their context and get frustrating error messages

image
💡

Below is a mockup of what a collapsed state that expands with user action would look like. Only returning users would see these fields, and it brings the 2 options closer together for easier cognitive processing.

👢 This Sign In accordion prevents accidental entry by guests into the wrong form

image
‣
Assure Guests they can save their info to an account

🔨 Build.com uses microcopy to explain Guests can save their information to an account at the Review step

image
‣
Show both options above the 📲 mobile fold
💡
Never take for granted that most customers (even returning ones with an account) prefer to just checkout as a guest. 🤷‍♀️ If you don’t show it first, ensure Guest Checkout is visible above the mobile fold.

🤷‍♀️ OK, it’s a little weird to see a green and blue button (which is intended as Primary?), but points to J.Crew for showing both options with attention grabbing CTAs above the mobile fold

image
‣
Try a checkout button drawer 📲 on mobile

👚 Chico’s folds its checkout options including express buttons behind a single sticky Checkout button on mobile saving tons of real estate

image

Desktop version below for comparison:

image

🫣 Cautions

‣
Be careful prioritizing Sign In over Guest Checkout
🤔
Showing the Sign In step first, especially with exposed fields that increase vertical height, pushes Guest Checkout and/or Express Checkout options below the mobile fold. You may have a strong reason to prioritize Sign In, as a business decision. Just be mindful that you will lose customers at the “register” if it looks like Guest Checkout isn’t available. And remember that many account holders forget their email/password combos, or will opt to use guest checkout anyway for their own (perceived) convenience. Conversion happens in the mind — beware of how your design influences customer thinking.

🙁 This design is focused on Sign In. Guest Checkout is an afterthought

image
‣
Be careful showing the Order Summary expanded above the Shipping form
💡
If you use the “skip Sign In step” approach, it’s critical that users instantly recognize they’re in Checkout. Avoid mashing design elements, CTAs and order summaries together above the fold. Show open form fields front-and-center to help users start fillin’ and fillin’ fast.

☠️ It’s not obvious to users they’ve left the Cart and are now inside the Checkout. PayPal and Sign In buttons compete with the Progress Bar and exposed cart contents above the mobile fold. The strongest CTA is to Sign In (and most won’t read the microcopy)

image
‣
Be careful placing both buttons side by side, below open fields

🙁 With buttons side-by-side, it’s unclear if users can proceed to Guest Checkout without entering Email and Password, or what.

image
‣
Don’t use a “ghost Guest” button 👻

🙁 This looks like a headline, not a clickable button

image

🙁 This Sign In drawer has a few issues — the blue CTAs draw the eye, with the input fields and Guest Checkout button practically invisible against them. Microcopy is not styled in a hierarchical way — nothing really is. What’s the Primary CTA?

image
‣
Hide Guest Checkout below the mobile fold

😬 Above the mobile fold, it appears you must Sign In & Checkout…

image

😬 The Checkout as Guest section, with PayPal and Affirm was hidden below the mobile fold, suggesting you can only Sign In & Checkout!

image
‣
Don’t style your buttons exactly like form fields

🙁 At least this style doesn’t make the form fields stand out?

image
‣
Don’t place Sign In button/link out of context

🙁 Prioritizing Guest Checkout doesn’t mean marginalizing returning customers - the Login is placed out of the main focal area, making it confusing how to proceed without create a new account

image

🙁 Points for styling the Sign in link in blue, but it’s still hard to see, competing with its surrounding elements

image
‣
Be careful offering free shipping only for registered accounts

🧪 There’s a growing number of retailers charging shipping to guest checkouts. While there may be pragmatic reasons to do this, the decision must be weighed against the impact of conversion and customer trust. How many customers would return after seeing this once?

image

Back to Checkout ideas

👉 Follow on LinkedIn for daily ideas 💡