Shadows Checkout Customer Info default template needs a fix on mobile

[SteveoSoule]

One of the best ways to surface the Coupon inputs in the mobile checkout flow is to alter the mini-basket's call-to-action buttons so that the user is presented with a single "View Cart & Checkout" or "Checkout" button that takes them to the BASK page. Just remove the "Checkout" button and edit the "Edit Cart" button to say "Checkout" or "View Cart & Checkout" and change it from the secondary button-style to the primary button-style.

Screenshot 2024-03-26 at 12.17.36 PM.pngScreenshot 2024-03-26 at 12.18.01 PM.png

On BASK, the coupon input is presented to the user before they proceed with the "Checkout" button onto the ORDL & OCST pages. This benefits checkout by:

• Clearly displaying the Coupon code
• Displaying alternative payment methods on BASK prompting quicker checkouts (before people enter much more information)
• Allowing customers to verify & modify their basket contents
• Allowing customers to estimate shipping
• Uses a conventional ecommerce checkout user-flow

Streamlining (or removing) the mini-basket and directing people to BASK is a very common and conventional ecommerce solution (amazon.com, bestbuy.com, homedepot.com, walmart.com, target.com, etc.). It's a low effort, high-impact, mobile checkout optimization that can surface the coupon input for your mobile users.

[SidFeyDesigns]

I'd personally remove or mvt:comment out the promo code form in the checkout_basket_summary Content Section and move it above the Shipping Information.

Just make sure it is not inside the form tag for the Shipping/Billing Information.

That way it is right up front. No searching needed.

Whether on mobile or desktop, if a shopper fills out their Ship / Bill To info, and then notices the promo code field and applies a code, all the info they just entered is lost. This leads to frustration for sure.

Having the form up top should greatly reduce this situation. I know it has for us.

[lesliekirk]

It might be a kludgy temporary fix but what if you changed

<section class="o-layout o-layout--wide">

to

<section class="o-layout o-layout--column-reverse o-layout--row--l">

It will put the aside at the top of the page in the mobile view for this page (or you could use it on all the checkout screens). It's just a quick thought as I've been battling the aside in Shadows for 2 days now (on a different page).

[Eric Foresman]

We are having a problem where our customers can't find where to put the promo code for the various promotions we run. Well over 90 percent of our customers shop from a mobile device, and they can't find the Promo Code field due to the default Shadows mobile layout. (I think this layout is fine on desktop.)

What happens is the customer goes to the .../checkout-customer-information.html page, they fill out their shipping information, then choose the Continue to Shipping button. They don't scroll far enough down to see where to put the Promo Code. Then we get a call or email saying "I couldn't find out where to put the code. Can I still get the deal?"

We could really use a fix for this yesterday, as we're in the middle of our high season.

Attached is a marked up image showing the problem in a dev store we have. Same in our live store.

Screenshot 2023-05-31 at 5.48.23 PM.png

Hi Captainboom

thanks for the info, i have filed a bug for this issue.

-Eric

[Bruce - PhosphorMedia]

Agree that's clunky. You could, for the time being, add a bit of text right before the button that says "scroll down to apply promo codes". not ideal, but better than an angry phone call.

[captainboom]

We are having a problem where our customers can't find where to put the promo code for the various promotions we run. Well over 90 percent of our customers shop from a mobile device, and they can't find the Promo Code field due to the default Shadows mobile layout. (I think this layout is fine on desktop.)

What happens is the customer goes to the .../checkout-customer-information.html page, they fill out their shipping information, then choose the Continue to Shipping button. They don't scroll far enough down to see where to put the Promo Code. Then we get a call or email saying "I couldn't find out where to put the code. Can I still get the deal?"

We could really use a fix for this yesterday, as we're in the middle of our high season.

Attached is a marked up image showing the problem in a dev store we have. Same in our live store.

Screenshot 2023-05-31 at 5.48.23 PM.png