Shopify Express Checkout

Hello Clever's Express Checkout is one of our best features that can help increase customers' engagement and loyalty by providing a Checkout button on your product pages.

To enable the Hello Clever Gateway's Express Checkout feature, please follow the instructions below. Please follow Migration instruction from version 1.0 to 2.0 if you are using version 1.x. Otherwise, you can follow the instruction Enabling Express Checkout Feature.

Migration instruction from version 1.0 to 2.0

Login into store as store admin: https://admin.shopify.com/store/[shopify-store]
Update Hello Clever App with the link below: https://shopify.helloclever.co/?shop=[shopify-store].myshopify.com
*Please replace [shopify-store].myshopify.com to your myshopify url, i.e. your-store-name.myshopify.com
Update Hello Clever App for access the product and checkout permissions. On your theme.liquid please ensure the script url is updated to version 2.0 instead of version 1.0
```
<script
  id="clever_widget_2.0"
  src="https://helloclever.co/lib/clever-widget/VERSION/2.0.0/index.js"
  async
  onload="createCleverWidget()"
></script>
```

Copy and paste the codeblock below to your theme.liquid file to trigger Express Checkout button, replace app-id-xxxxx with your site's app_id.

<script>
  async function createCleverWidget() {
    const widgets = new CleverWidget({
      app_id: 'app-id-xxxxx', // Merchant's app_id
    });
    await widgets.initialize();
    widgets.cashbackBanner({
      containerSelector: '.product-form__buttons', // Class or ID selector where merchant want to render the widget.
    });
    // ----- AND -----
    widgets.expressCheckout({
      containerSelector: '.product-form__buttons', // Class or ID selector where merchant want to render the widget.
    });
  }
</script>
<script
  id="clever_widget_2.0"
  src="https://helloclever.co/lib/clever-widget/VERSION/2.0.0/index.js"
  async
  onload="createCleverWidget()"
></script>

If all the steps above has been set up correctly, you should be able to see express checkout feature on your product page. Please refer to the image below for the sample of the express checkout button.

Enabling Express Checkout Feature

Prerequisites

You need to install the Hello Clever app on your Shopify store. If you haven't installed the app yet, please follow out the instruction at Hello Clever Shopify App.

To enable the Hello Clever Gateway's Express Checkout feature, please follow the instructions below.

Login into the store which one you want to add Clever Widget
Select Themes
Click Customize button
Click Edit Code
Select file theme.liquid

Insert the code below and replace app-id-xxxxx with your site's app_id.

<script>
  async function createCleverWidget() {
    const widgets = new CleverWidget({
      app_id: 'app-id-xxxxx', // Merchant's app_id
    });
    await widgets.initialize();
    // Tagline feature
    widgets.cashbackBanner({
      containerSelector: '.product-form__buttons', // Class or ID selector where merchant want to render the widget.
    });
    // ----- OR -----
    // Express checkout feature
    widgets.expressCheckout({
      containerSelector: '.product-form__buttons', // Class or ID selector where merchant want to render the widget.
    });
  }
</script>
<script
  id="clever_widget_2.0"
  src="https://helloclever.co/lib/clever-widget/VERSION/2.0.0/index.js"
  async
  onload="createCleverWidget()"
></script>

If all the steps above has been set up correctly, you should be able to see express checkout feature on your product page

Migration instruction from version 1.0 to 2.0​

Enabling Express Checkout Feature​

Prerequisites​

Migration instruction from version 1.0 to 2.0

Enabling Express Checkout Feature

Prerequisites