Shopify Express Checkout Feature

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


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

Before proceeding further, a number of updates should be shown in WordPress Admin next to the Plugins link, indicating that plugin updates are available if you haven't enabled plugin's auto update.

Please migrate Hello Clever App to version 1.2.0 before proceeding further.

Migration Instruction

Version 1.0 to 1.2

  1. Login into store as store admin https://[shopify-store].myshopify.com]/admin

  2. Update Hello Clever App with the link below:

    https://app-connect.helloclever.co/auth?shop=[shopify-store].myshopify.com

    *please replace [shopify-store].myshopify.com to your myshopify url, i.e. your-store-name.myshopify.com

  3. Update Hello Clever App for access the product and checkout permissions.

    On your theme.liquid please ensure the script url is updated to version 1.2.0 instead of version 1.0.0

    <script id="clever_widget_1.2"
    src="https://helloclever.co/lib/clever-widget/VERSION/1.2.0/index.js"
    async onload="createCleverWidget()">
    </script>
  4. Copy and paste the codeblock below to your theme.liquid file to trigger Express Checkout button

    <script>
    async function createCleverWidget() {
    const widgets = new CleverWidget({
    'app_id': [APP_ID],
    'secret_key': [APP_SECRET]
    })
    await widgets.initialize()
    widgets.cashbackBanner({
    containerSelector: ".product-form__buttons" // Class or ID selector where merchant want to render the widget.
    });
    // ----- OR -----
    widgets.expressCheckout({
    containerSelector: ".product-form__buttons" // Class or ID selector where merchant want to render the widget.
    });
    }
    </script>
    <script id="clever_widget_1.2" src="https://helloclever.co/lib/clever-widget/VERSION/1.2.0/index.js" async onload="createCleverWidget()">
    </script>

Enabling Express Checkout Feature

  1. Login into the store which one you want to add Clever Widget

  2. Select Themes

  3. Click Customize button

  4. Click Edit Code

  5. Select file theme.liquid

  6. Insert the code below with merchant's app_id and secret_key

    <script>
    async function createCleverWidget() {
    const widgets = new CleverWidget({
    'app_id': [APP_ID],
    'secret_key': [APP_SECRET]
    })
    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_1.2" src="https://helloclever.co/lib/clever-widget/VERSION/1.2.0/index.js" async onload="createCleverWidget()">
    </script>

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