Skip to main content

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 2.0​

  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 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>

  4. 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>

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 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>

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