Badgezilla

Flex Theme Sections

Checkout Toolbox

Linear Shopping Experiences

Episode 49 - Express Checkout in Your Shopify Store

Subscribe to the Podcast

The Podcast


Help the Podcast


Transcript

Hello, Scott Austin here.

Shopify Payments allows the customer to choose from a wide variety of payment options.  In general, providing more payment options is a good thing as it allows customers to choose a method that they are comfortable with.  But with increased choice, there is potential for increased confusion.  So in this episode, I'm going to walk you through express or accelerated checkouts in Shopify.  My goal is for you to better understand the customer experience so you can create the best implementation for your customers and store.

When a customer creates an account with your Shopify store, Shopify allows the customer to save their shipping address, in fact multiple shipping addresses.  But a Shopify customer account does not allow the customer to save their credit card information.  Each time they check out through Shopify payments, they need to enter their credit card information again. 

That said, there are ways for your customers to save their credit card information.  And that is through the Shopify supported express or accelerated checkout methods.  There are currently 6 supported accelerated checkouts.  They are:

  1. Apple Pay.  Apple Pay is made available only to customers who are on your Shopify store using the Safari browser on an Apple device like a Mac, iPad or iPhone.
    You can enable Apple Pay in your Shopify Admin in the Shopify Payments section.
  2. Google Pay.  Google Pay is made available to customers using Chrome or Firefox browsers on desktop or Android.
    You can enable Google Pay in your Shopify Admin in the Shopify Payments section.
  3. Amazon Pay.  Amazon Pay is available on all devices and browsers.  You can enable it in the Shopify Admin by going to Settings > Payments.  There you should see an Amazon Pay option.
  4. Paypal.  Paypal is available on all devices and browsers.  There are no transaction fees if you are using Shopify Payments.
    You can enable Paypal in the Shopify Admin by going to Settings > Payments.  There you should see a PayPal option.
  5. Venmo.  Venmo is available to stores in the United States that have enabled PayPal Express checkout.  The customer also needs to have the Venmo app installed on their device. 
  6. Shop Pay.  Shop Pay is Shopify's own accelerated checkout method.  You must be using Shopify Payments to use Shop Pay.  And Shop Pay requires the customer to use an email address for the customer account, phone numbers are not supported. 
    One really nice thing about Shop Pay is that once a customer signs up for Shop Pay, then the customer can use Shop Pay across all Shopify stores.  So, if a customer has registered with Shop Pay in one Shopify store and is now checking out in a different store, Shopify will allow them to use their existing Shop Pay account and saved credit card number.  And this is a big benefit for every Shopify store.  Each store can benefit from other Shopify stores having been the reason the reason that a person created a Shop Pay account.  Which means that you can provide an Amazon-type Buy Now experience even to new customers.  As soon as the customer enters their email address in the checkout, Shop Pay sends them an SMS with an authorization code.
    Shop Pay also supports Shopify's pick-up and delivery fulfillment options.
    And Shop Pay also comes with an app that customers can add to their iPhone or Android phone.  The app gives the customer notifications on the shipping and delivery of their orders.  Customers can also see their order history across all Shopify stores in the app.  It’s a pretty cool experience and I think it’s the first of many steps that Shopify will be taking in creating a network effect for Shopify stores. 

So let's look at some data here from real Shopify stores to see if customers actually use these payment methods.  In your Shopify store, you can find payment usage data in the Shopify Admin under Analytics > Reports > Finances > Payments.  Here's the data from a sampling of five of my client's stores using the past 90 days of sales data.

In store #1, 19% of transactions used accelerated checkout.  The store has all payment methods activated.

Store #2 also had 19% of transactions using accelerated checkout. The store also has all payment methods activated.

Store #3 only has 5% of transactions using accelerated checkout.  This store is only allowing Google Pay and Apple Pay for accelerated checkout.

Store #4 only has 2% of transactions using accelerated checkout.  This store is allowing all payment methods.

And Store #5 has 48% of transactions using accelerated checkout. 

Now 2 to 48% usage is a wide range.  And I can make some logical conclusions to why the performance varies based on the business models.  For example, the low uptake store has a very high average order value and customers are making very considered purchases with multiple items in the cart.  While the store with the 48% usage has a lower average order value and the products are more of an impulse purchase. 

Each accelerated payment type has its own checkout experience that is different from your store's default Shopify checkout process.  If you add any of these accelerated payment types to your store, there are multiple places that promo buttons for them can be shown to the customer including:

  1. In step 1 or the information page of the checkout process.  On the page, there will be a section labelled 'Express Checkout' with all of the accelerated payment types that you have enabled that the customer can use on their device.  As with the rest of the checkout experience, most Shopify stores have no control over the layout of these buttons.  These promos only appear on the step 1 page.  If the customer continues with the Shopify checkout process, they will not see the promos in the shipping and payment pages of the checkout process.  Which is good to reduce confusion. 
  2. On the product page.  Each theme has its own way of presenting accelerated check out buttons on the product page.  And you can usually turn it on or off in the theme settings.  Usually, only one button is shown.  The best payment method based on the customer's device, browser and purchase history is shown.  A big benefit of these buttons is that it takes the customer straight to the checkout process from the product page.  This reduces the number clicks and pages the customer goes through. 
    In the themes that I use, I don't like what it does to the Add to Cart button when a dynamic checkout button is also displayed.  You see, I like to use a red color that matches the store's color scheme for the Add to Cart.  The goal is to have the Add to Cart button be the most obvious button on the page so its very intuitive for the customer where the action button is.  But in the theme's that I use, they give the Add to Cart button a secondary treatment when the dynamic checkout buttons are also used.  The secondary treatment gives the button a transparent background and makes the outline the red color.  When this happens, the button is not nearly as obvious to the customer.  What I do to rectify this is to apply same CSS styling to the secondary button as the primary button gets thus overwriting the theme's change to the Add to Cart button.
  3. On the checkout page or drawer.  Your theme can show them on the cart page which may be adjustable in the theme settings.  But in this case, it shows all of the applicable checkout buttons for the customer's device, browser and purchase history.  So this can mean that the customer sees a number of different buttons which can be confusing.  If there is not a theme setting for showing and hiding these buttons, you can find it the theme's Liquid code.  In the appropriate cart section, just look for additional checkout buttons.  It may be wrapped in an if statement that says {% if content_for_additional_checkout_buttons %}.  To hide it, I just comment out the code including the if statement.

So now let's talk about the negative aspects of accelerated checkout.  There's two big ones that I see.

  1. Confusion.  On the cart and checkout pages, there can be a lot of checkout buttons.  If your theme is adding them to the cart page, it’s the same list of buttons on the cart and in the checkout.  And customers do get confused by them.  Many of my clients have seen customer support queries caused by the confusion of so many choices.  There's less confusion on the product page as only one accelerated checkout is displayed there.
  2. Discount Codes.  Discount codes get added to the order during step 1 of the checkout process.  And discount codes can get applied to accelerated checkout processes.  But that will only happen if the accelerated checkout was initiated from the Shopify checkout after the discount code was added.  And that is not an easy thing to explain to customers.  If the customer initiates an accelerated checkout from the product page or the cart page, then there is no opportunity for them to add their discount code.  So if your store is frequently using discount codes, then accelerated checkouts can cause some confusion and dissatisfaction as accelerated checkout customers may not get the chance to add them.

So the last thing I want to discuss here is my generic recommendation for accelerated checkout.  And I say generic as each store is different.  Your store and customer's behavior may indicate an implementation other than the one I am recommending.  So here we go:

  1. Turn-on all accelerated checkouts available to your store.
  2. Turn-on the ability for customers to download the Shop App from the order thank you page.  You can do this in Settings > Checkout > Customer Contact.
  3. Allow the accelerated checkout button on the product page.
  4. Ensure that the Add to Cart button on the product page is still bright and obvious.
  5. Remove the accelerated checkout buttons from the cart.
  6. Make a video that explains to customers how to use discount codes with accelerated checkouts.  Include the video in support documentation and emails going out with discount codes.
  7. Monitor your implementation by seeing what percentage of transactions use accelerated checkouts and by listening to your customers in support queues.  Then adjust the implementation as needed.

Well that's it for accelerated checkouts.  I hope this information is useful for your business.  I learned a few new details about the program as I was doing research for this episode as it’s a complex implementation.

Thanks for listening.


JadePuma is a certified Shopify Expert. If you need any help with your Shopify store, we can help.


Search