Announcement

Collapse
No announcement yet.

Shadows Checkout Customer Info default template needs a fix on mobile

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Shadows Checkout Customer Info default template needs a fix on mobile

    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

    #2
    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.
    Bruce Golub
    Phosphor Media - "Your Success is our Business"

    Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
    phosphormedia.com

    Comment


      #3
      Originally posted by captainboom View Post
      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
      Eric Foresman
      Software Tester
      Miva Merchant
      http://www.mivamerchant.com/
      [email protected]

      Comment


        #4
        It might be a kludgy temporary fix but what if you changed
        Code:
        <section class="o-layout o-layout--wide">
        to

        Code:
        <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).
        Leslie Kirk
        Miva Certified Developer
        Miva Merchant Specialist since 1997
        Previously of Webs Your Way
        (aka Leslie Nord leslienord)

        Email me: [email protected]
        www.lesliekirk.com

        Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

        Comment


          #5
          ​​​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.
          Nick Harkins
          www.loveisarose.com
          *Web Developer
          *Miva
          *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

          Comment


            #6
            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.

            Comment

            Working...
            X