Demos

Express Checkout for Shopify

We are here to introduce a new app called “Express Checkout” to optimize the checkout process for your Store.

With the help of this app, admin can now get his own customizable checkout in just a single page.

This Express checkout app not only provides the highly customized checkout experience to the customers but also saves their time in the whole checkout process.

Once you install this app on your store, you need to enable the checkout first and get the front store access token to make it work after selecting the payment gateway.

“Express Checkout App comes with an extremely reasonable Price of $9 per month”.

How to Install it on Shopify Store

You can install the “Express Checkout” feature on your Shopify Store from its Landing Page.

All you need to do is to enter your Store URL and click on “INSTALL” button to get this app on your Store.

Workflow of Express Checkout

Configuration:

In order to make this app work, first, you need to configure this app on your Store.

Configuration of this app includes General Configuration and Frontend Configuration. Let us understand it one by one in detail.

General Configuration

How to Create JS SDK Token?

In this section, the admin needs to configure the general details of the Express checkout app. You as an admin first need to enable the checkout and then, enter Your front store access token.

Click here to know how to get the access token in Shopify.

For this, firstly, you need to create a Private App from your Shopify store backend and enable permission to the sections (products, collections, etc) that the private app will access. Once You save these details, You will be ended up generating the API Credentials.

You can click on the private app to get the storefront access token from the Storefront API section.

Now, you can enter the token to access the storefront.

Important Note:- Once You add “Buy Button” as a Sales Channel on your store please make sure that all Your Shopify store products are available on Buy Button.

That is how you configure your express checkout details.

FrontEnd Configuration

To make this app work for your store front, you need to inject the code manually or automatically on their respective template files.

To inject the code manually, you can follow the simple steps.

Copy this code:

{% if shop.metafields.opc.status == 1 %}<a href="/pages/one-page-checkout" class="btn btn--small-wide">{{ 'cart.general.checkout' | t }}</a>{% else %}<input type="submit" name="checkout" class="btn btn--small-wide" value="{{ 'cart.general.checkout' | t }}">{% endif %}

Visit the Shopify Store backend.

  • Go To Themes.
  • Click on Customize Theme button.
  • Click on Edit HTML/CSS button.
  • Select cart-template.liquid file.
  • Paste the code.
  • Click on save .

You can inject the code automatically to the respective template file simply by clicking “AUTO CODE INJECT” button.

In this way you can configure the Express checkout frontend.

NOTE : If you want to uninstall the app, please make sure to use “Auto Code Remove” button to remove all the code related to the App. As we can no longer access the App once you uninstall the App, so we wont be able to help you with the same.

FrontEnd View

Now, once the admin configure all the checkout page details on his end, customer will get the express checkout view like this as shown in screenshot.

EXPRESS CHECKOUT

Once you click the “Continue to Payment” button, you will be straight away redirected to the Payment method section.

Now select the payment method, enter your payment details and complete your order.

Please Note:- The functionality of the Express Checkout feature app will not work in case of Drawer Cart i.e. if the cart opens in the drawer instead of a separate page.

Webkul Support

Hope you like this blog. To get more interesting blogs, keep in touch with us. If you need any kind of support, simply raise a ticket at https://webkul.uvdesk.com/en/. You can contact support@webkul.com to get proper assistance.

Thank You for reading this Blog! Don’t hesitate to write your comments below.

. . .

Comment

Add Your Comment

Be the first to comment.

css.php
Hire Us!
Brief us about your requirements and we'll get back to you.
Woo! Hooy!
We have just recieved your project brief and our expert will contact you shortly.
Send Again
Close

Index