Add Hello Clever to Shopify

This page covers everything you need to add Hello Clever to a Shopify store. You will install the Hello Clever app from the Shopify App Store, connect it to your Merchant Dashboard credentials, and then optionally enhance your storefront with express checkout, payment logos on the checkout page, a Hello Clever logo in the footer, and a cashback tagline on product pages.

Requirements

Before you install the app, verify that your store is configured correctly.

Hello Clever supports multiple countries and currencies depending on your merchant account setup. Make sure your store address and currency match your Hello Clever account region.

Verify your store address

In Shopify Admin, go to Settings > General.
Under Store address, select the country that matches your Hello Clever account region (for example, Australia).

Verify your store currency

In Shopify Admin, go to Settings > General.
Under Store defaults, set the store currency to match the currency configured in your Hello Clever merchant account.

Install Hello Clever

Install the app from the Shopify App Store

Visit the Hello Clever app listing at https://apps.shopify.com/cleverpay.
Click Install.

Link your site in the Merchant Dashboard

Log in to your Hello Clever Merchant Dashboard.
Click Link site.
Select Shopify as your e-commerce platform.

Enter your site details

Fill in the required information:

Logo
Site name
Store URL — this must exactly match your Shopify store URL (for example, https://your-store-name.myshopify.com).

Click Complete to finish linking the site.

The Store URL must match your Shopify store URL exactly. A mismatch will prevent the integration from working.

Copy your App ID and Secret Key

In the Merchant Dashboard, navigate to Authentication.
Locate the Shopify site you just created.
Copy the App ID and Secret Key — you will need these in the next step.

Activate Hello Clever in Shopify

Back in the Shopify app setup, enter the App ID and Secret Key you copied.
Optionally select the payment method logos you want displayed at checkout.
Click Activate Hello Clever.

Verify the setup

Once activated, Hello Clever will appear as a payment option on your store’s checkout page. Visit your checkout to confirm customers can see Hello Clever among the available payment methods.

Each App ID and Secret Key pair can only be used for a single Shopify store. If you need to add Hello Clever to multiple stores, generate a new pair of credentials in the Merchant Dashboard for each store.

Configure payment logos at checkout

You can control which payment method logos are displayed to customers on the Shopify checkout page.

Go to Payment settings

In Shopify Admin, click Settings in the bottom-left corner, then select Payments.

Open the Hello Clever configuration

In the Payments section, click on the Hello Clever payment app. You will be redirected to the Hello Clever configuration page.

Select your logos

Choose the payment options you want to display to customers during checkout.

Save

Click Save to apply your changes.

Shopify displays a maximum of 3 payment logos at checkout. If more payment methods are enabled, only the first 3 logos appear. Customers can see the full list of supported methods by hovering over the tooltip next to the logos.

Follow these steps to display the Hello Clever logo in the footer of your Shopify store.

Open the Themes section

In Shopify Admin, click Themes from the sidebar.

Access the theme editor

Click the Customize button on your active theme.

Open the code editor

In the theme editor, click the three-dot menu in the top-left corner and select Edit code.

Edit the footer file

In the code editor, open the footer.liquid file.

Update the payment types loop

Find this code in footer.liquid:

{% for type in shop.enabled_payment_types %}

Replace it with:

{% assign enabled_payment_types = 'visa,master,american_express,helloclever' | remove: ' ' | split: ',' %}{% for type in enabled_payment_types %}

Save your changes

Save the file. The Hello Clever logo will now appear in the footer of your store.

Enable express checkout

Hello Clever Express Checkout adds a checkout button directly on your product pages, letting customers complete purchases without going through the standard cart flow.

Migrate from version 1.x to 2.0

If you are currently on version 1.x of the Hello Clever app, you must upgrade before enabling express checkout.

Go to https://admin.shopify.com/store/{your-shopify-store}, replacing {your-shopify-store} with your store’s Shopify slug.

Update the app

Visit https://shopify.helloclever.co/?shop={your-shopify-store}.myshopify.com to trigger the update.

Accept updated permissions

Approve the updated app permissions to grant access to products and checkout.

Update theme.liquid

Ensure the script URL in your theme.liquid file references version 2.0:

<script
  id="clever_widget_2.0"
  src="https://helloclever.co/lib/clever-widget/VERSION/2.0.0/index.js"
  async
  onload="createCleverWidget()">
</script>

Enable express checkout on product pages

Go to your active theme

In Shopify Admin, click Themes from the sidebar.

Open the theme editor

Click Customize on your active theme.

Open the code editor

Click the three-dot menu in the top-left corner and select Edit code.

Open theme.liquid

In the Layout section of the file browser, open the theme.liquid file.

Add the widget code

Insert the following snippet into theme.liquid, replacing app-id-xxxxx with your actual App ID:

<script>
  async function createCleverWidget() {
    const widgets = new CleverWidget({
      app_id: 'app-id-xxxxx', // Your App ID
    });
    await widgets.initialize();
    // Cashback tagline on product page
    widgets.cashbackBanner({
      containerSelector: '.product-form__buttons',
    });
    // Express checkout button
    widgets.expressCheckout({
      containerSelector: '.product-form__buttons',
    });
  }
</script>
<script
  id="clever_widget_2.0"
  src="https://helloclever.co/lib/clever-widget/VERSION/2.0.0/index.js"
  async
  onload="createCleverWidget()">
</script>

Save and verify

Save the file and navigate to a product page on your store. The Hello Clever Express Checkout button should now be visible and functional.

The containerSelector value targets where the widget renders on the page. If the express checkout button does not appear, inspect your product page HTML to find the correct class or ID selector for your theme’s add-to-cart button area and update it accordingly.

Display a cashback tagline on product pages

You can show the Hello Clever logo and instant cashback percentage directly on product pages so customers see the reward before they purchase.

Open the theme editor and edit code

In Shopify Admin, go to Themes, click Customize, then select Edit code from the three-dot menu.

Open theme.liquid

In the Layout section, open theme.liquid.

Add the cashback banner widget

Insert the same widget snippet used for express checkout (shown in the section above). The widgets.cashbackBanner() call renders the cashback tagline on product pages.Replace app-id-xxxxx with the App ID you use for your payment gateway.

Save and verify

Save the file, then visit a product page to confirm the Hello Clever logo and cashback percentage are displayed correctly. The appearance may vary depending on your theme layout.

Integration Basics

Platform Integrations

API Use Cases

Clever AI Connectors

Security & Compliance

Add Hello Clever to Shopify

Requirements

Install Hello Clever

Configure payment logos at checkout

Add the Hello Clever logo to your footer

Enable express checkout

Migrate from version 1.x to 2.0

Enable express checkout on product pages

Display a cashback tagline on product pages

​Requirements

​Install Hello Clever

​Configure payment logos at checkout

​Add the Hello Clever logo to your footer

​Enable express checkout

​Migrate from version 1.x to 2.0

​Enable express checkout on product pages

​Display a cashback tagline on product pages

Requirements

Install Hello Clever

Configure payment logos at checkout

Add the Hello Clever logo to your footer

Enable express checkout

Migrate from version 1.x to 2.0

Enable express checkout on product pages

Display a cashback tagline on product pages