Magento Checkout Conversion-Rate Audit — 12 Friction Points That Lose Money

1. Email-first ordering beats combined or inline-password ordering by 8–13%.

Baymard's largest single-field finding^[1]: email on its own, before any account-vs-guest decision, lifts completion 8–13% over combined email/password or account-first patterns. The customer perceives the email field as continuation of the cart action, not as account commitment.

Magento 2.4.x defaults to combined email-and-password for logged-out customers. Hyvä opens with email but the inline password trigger sits right there — framing-wise the same.

<!-- view/frontend/layout/hyva_checkout_components.xml override -->
<component name="checkout.shipping.email"
           template="Vendor_Theme::magewire/checkout/email-first.phtml"
           sortOrder="10"
           parent="checkout.shipping"/>
<component name="checkout.shipping.account-toggle"
           template="Vendor_Theme::magewire/checkout/account-toggle.phtml"
           sortOrder="20"
           parent="checkout.shipping"/>

Email goes alone in sortOrder 10. The account-vs-guest toggle moves to 20, after the customer has typed an email. On Luma the same change happens in checkout_index_index.xml — override jsLayout.components.checkout.children.steps.children.shipping-step.children.customer-email to sortOrder="10".

2. The guest-vs-account choice should never come before the email field.

Baymard's 2023 account-creation study^[2]: 24% of customers abandon the moment checkout asks them to choose "register" or "guest". Magento 2 forces the choice as the first interaction when account registration is on. The fix: default to guest, surface account creation as a checkbox on the order-success page ("Save my details for next time?").

<!-- etc/config.xml -->
<config>
    <default>
        <checkout>
            <options>
                <guest_checkout>1</guest_checkout>
                <customer_must_be_logged_in>0</customer_must_be_logged_in>
            </options>
        </checkout>
        <customer>
            <create_account>
                <auto_group_assign>1</auto_group_assign>
                <default_group>1</default_group>
            </create_account>
        </customer>
    </default>
</config>

Then add an observer on checkout_submit_all_after that creates the account post-order if the customer ticked "Save my details" on the success page. Baymard's data shows this recovers 60–70% of the account-creation rate while eliminating the front-loaded friction^[2].

3. Address autocomplete is the highest-ROI single change on Magento checkout.

Baymard's address-field study^[3]: 4–6% conversion uplift and 20% less form time when address autocomplete (Google Places, Loqate, Algolia Places) is wired in. Magento 2.4.x ships zero autocomplete — every customer types every line manually.

The cost: one API key, two days on Luma (Knockout) or four hours on Hyvä (Alpine.js). Google Places is ~$2.83 per 1,000 sessions; a 500-orders-per-day store pays ~$1.40 per day.

<!-- Hyvä Magewire template -->
<input type="text"
       id="shipping-street-1"
       wire:model.lazy="address.street.0"
       x-data="placesAutocomplete"
       x-init="init($refs.streetInput)"
       x-ref="streetInput"
       autocomplete="address-line1"
       class="block w-full rounded-md border-gray-300" />

The Alpine.js component debounces 300ms and writes parsed components to the Magewire model. Quote::collectShippingRates fires once per address change — autocomplete cuts friction and server load. Typed addresses also fail validation 3–5%, re-rendering the shipping step; autocomplete kills that tail.

4. One-page versus multi-step is a wash for stores under 30k SKUs.

Baymard's verdict^[4]: under 30k SKUs and under 4 line items average, one-page vs multi-step is under 1% either direction. Above 30k SKUs or B2B carts of 10+ items, multi-step wins. Hyvä's three-step accordion is the right default for 95% of stores.

<!-- view/frontend/layout/hyva_checkout_components.xml -->
<component name="checkout.shipping" sortOrder="10"/>
<component name="checkout.payment"  sortOrder="20"/>
<component name="checkout.review"   sortOrder="30"/>

Keep the default. Invest the saved hours in points 1, 3, 6, 8 — each pays back more.

5. Trust badges under the place-order button outperform header and footer placement by 18%.

Baymard's trust-element study^[5]: SSL seals, money-back guarantees, and payment-card logos placed directly under the place-order button lift completion 18% versus the same badges in the header or footer. The customer questions trust at the moment of payment commitment, not page arrival.

Magento 2 ships zero badges in the checkout block by default. Add a Hyvä container after checkout.payment.methods:

<!-- view/frontend/layout/hyva_checkout_components.xml -->
<component name="checkout.payment.trust-badges"
           template="Vendor_Theme::magewire/checkout/trust-badges.phtml"
           sortOrder="500"
           parent="checkout.payment"/>

<!-- magewire/checkout/trust-badges.phtml -->
<div class="mt-3 flex flex-wrap items-center justify-center gap-3 text-xs text-gray-600">
    <span class="inline-flex items-center gap-1"><svg>...</svg> 256-bit SSL</span>
    <span class="inline-flex items-center gap-1"><svg>...</svg> 30-day returns</span>
    <img src="/static/icons/visa.svg" alt="Visa" width="32" height="20" />
    <img src="/static/icons/mastercard.svg" alt="Mastercard" width="32" height="20" />
</div>

Three rules: SVG or inline (no external CDN that slows LCP), brand-voice (no stock "100% SECURE" banners), and the seal must reflect actual certificate coverage. Customers spot fake EV-SSL 4–6% of the time.

6. Hiding shipping cost until step 3 is the single biggest abandonment driver.

Baymard's cart-abandonment survey^[6]: 49% of abandoners cite "extra costs were too high" as primary reason — double the next reason. The signal is not that shipping is too expensive; it is that the cost is revealed too late, after the customer has spent cognitive load on the address form.

Magento 2.4.x's default cart shows a zip-only shipping estimator that 60% of stores leave disabled. Enable it. Better: show actual cost on the product page when the customer's IP geolocates to a predictable region.

<!-- Admin: Stores → Configuration → Sales → Checkout -->
<config path="carriers/flatrate/show_method">1</config>
<config path="checkout/cart/estimate_shipping">1</config>
<config path="checkout/cart_link/use_qty">1</config>

On Hyvä the shipping estimator is a Magewire component — expand it by default with the country pre-filled from Cloudflare's X-Geo-Country or MaxMind GeoIP2. Customer commits early or leaves early — both save checkout-page server load.

7. A collapsed discount-code field lifts AOV by 8% versus always-visible.

Counter-intuitive Baymard finding^[7]: an always-visible "Discount code" field drops AOV 8% because it signals the customer to leave and hunt for a code. A collapsed field with a small "Got a code? Apply it" link recovers that 8% AOV.

Magento 2.4.x's default coupon block is collapsed correctly. The mistake is theme overrides that always-expand it "for visibility". Verify no theme override forces checkout.review.discount-code open.

<!-- Hyvä check: ensure this attribute stays at default -->
<div x-data="{ open: false }">
    <button @click="open = !open" class="text-sm underline">Got a code? Apply it</button>
    <div x-show="open" x-collapse>
        <input wire:model.lazy="couponCode" />
        <button wire:click="applyCoupon">Apply</button>
    </div>
</div>

Bonus pattern: if a customer arrives with ?coupon=SAVE10, auto-apply server-side and skip the field. Baymard shows zero AOV impact from auto-applied codes — only the typed field hurts.

8. The 14-field Magento default should be 8 fields, and 6 of those should be auto-filled.

Baymard's form-field study^[8]: every field beyond eight adds 1.5–3% to drop-off. Magento 2.4.x's default shipping form has 14: First Name, Last Name, Company, Street 1/2/3, City, State, Postal Code, Country, Phone, Email, plus two checkbox toggles. Six fields too many.

Per-field: Company hides unless customer-group is B2B; Street 2/3 collapse behind "+ Add apartment"; State derives from postal code via point 3's autocomplete; Country defaults from IP, hidden until "Ship to another country"; Phone is optional unless shipping is express.

<!-- etc/config.xml -->
<config>
    <default>
        <customer>
            <address>
                <street_lines>1</street_lines>
                <telephone_show>opt</telephone_show>
                <company_show>no</company_show>
                <fax_show>no</fax_show>
            </address>
        </customer>
    </default>
</config>

A hyva_checkout_components.xml override renders the hidden fields on toggle. Visible form drops from 14 to 8; hidden fields stay in DOM for B2B but cost 95% of customers nothing.

9. Mobile keyboard types lift mobile completion by 24% when correctly typed.

Baymard's mobile-checkout study^[9]: 24% higher mobile completion when inputs declare the right inputmode or type so the mobile keyboard surfaces the correct character set. Magento 2.4.x defaults all fields to type="text" — every field gets QWERTY, even postal code and phone.

The fix is one-line attribute additions per field:

<input type="email"   name="email"      inputmode="email"    autocomplete="email" />
<input type="tel"     name="telephone"  inputmode="tel"      autocomplete="tel" />
<input type="text"    name="postcode"   inputmode="numeric"  autocomplete="postal-code" pattern="[0-9A-Za-z -]*" />
<input type="text"    name="street"     inputmode="text"     autocomplete="address-line1" />
<input type="text"    name="cc-number"  inputmode="numeric"  autocomplete="cc-number" pattern="[0-9 ]{13,19}" />

Magento 2's default templates omit inputmode on postal code and credit card. Add in Hyvä at view/frontend/templates/magewire/checkout/shipping/address-form.phtml or override the Luma customer/widget/name.phtml family. autocomplete matters too — mobile browsers use it to populate the form from the device profile.

10. EU stores must display VAT-inclusive prices throughout checkout.

Baymard's EU-checkout study^[10]: showing tax-excluded prices to EU consumers, then adding 19–25% VAT at review, lifts EU mobile abandonment 11% over VAT-inclusive display throughout. Same signal as point 6 — a late price increase makes the customer question the whole purchase.

Magento 2.4.x ships VAT excluded by default. The config flags to flip for EU stores:

<!-- Admin: Stores → Configuration → Sales → Tax -->
<config path="tax/display/type">2</config>       <!-- Including Tax -->
<config path="tax/cart_display/price">2</config>
<config path="tax/cart_display/subtotal">2</config>
<config path="tax/sales_display/price">2</config>
<config path="tax/sales_display/subtotal">2</config>
<config path="tax/sales_display/grandtotal">1</config>

For multi-store EU/US setups, scope per website or store_view via app/etc/config.php. US stays VAT-excluded (US convention), EU flips to inclusive — same codebase, store-scoped config.

11. Save-cart-for-later persistence is what makes abandoned-cart emails work.

Baymard's email-recovery study^[11]: 12% of abandoned carts that receive a recovery email click back through and complete. Drops under 2% if cart contents are not preserved — the recovery email is worthless if the customer arrives back at an empty cart.

Magento 2.4.x's persistent-cart cookie lives 24 hours by default. Bump to 30 days for known emails (past point 1) and ensure the cart is serialized to the database, not just the cookie. Hyvä respects this out of the box.

<!-- etc/config.xml -->
<config>
    <default>
        <persistent>
            <options>
                <enabled>1</enabled>
                <lifetime>2592000</lifetime>       <!-- 30 days -->
                <remember_enabled>1</remember_enabled>
                <remember_default>1</remember_default>
                <clear_on_logout>0</clear_on_logout>
            </options>
        </persistent>
    </default>
</config>

Wire the abandoned-cart cron at 1h, 24h, 72h. The 1h trigger recovers ~7%, 24h another ~4%, 72h another ~1%. Anything later is wasted send. Open Source needs a third-party (Mageplaza, Amasty); Adobe Commerce includes Magento_AbandonedCart.

12. The place-order button must be full-width and primary-colored on mobile.

Baymard's button-design study^[12]: a full-width primary-colored place-order button on mobile lifts mobile click-through 9% versus half-width or neutral color. It is the single most-clicked element in checkout; visual treatment matters more than any other UI element.

Magento 2.4.x's Luma button is full-width on mobile via the grid but defaults to neutral gray on most themes. On Hyvä with Tailwind it is properly styled but theme overrides often shrink it.

/* view/frontend/web/tailwind/tailwind-source.css */
.checkout-place-order-button {
    @apply w-full;
    @apply rounded-md;
    @apply bg-primary;
    @apply px-6 py-4;
    @apply text-base font-semibold text-white;
    @apply shadow-md transition-colors;
    @apply hover:bg-primary-dark;
    @apply focus:outline-none focus:ring-4 focus:ring-primary/30;
    @apply disabled:cursor-not-allowed disabled:opacity-60;
}

@media (min-width: 768px) {
    .checkout-place-order-button {
        @apply w-auto min-w-[16rem];
    }
}

Three sub-rules: 44x44 px minimum touch target (Apple HIG); never use plain "Submit" — use "Place Order — $147.40" with total baked in; never disable on API wait — show a spinner inside the button. Customers tap a disabled button five times; they tap a spinner once.