Add Hello Clever to Shopify

Install Hello Clever on your Shopify store and configure express checkout, payment logos, footer branding, and product cashback taglines step by step.

This page covers everything you need to add Hello Clever to a Shopify store. You will create a Payments Account for your store in the Merchant Dashboard, install the Hello Clever app from the Shopify App Store, and connect the two using your App ID and Secret Key. From there, you can 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.

1. Verify your store address

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

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

Install Hello Clever

1. Create a Payments Account in the Merchant Dashboard

   1. Log in to your Hello Clever Merchant Dashboard.
   2. In the top-right corner, click Create account.
2. Select a currency for this account

   On the Create account screen, confirm the currency shown under Select a currency for this account.

   To use a different currency, click Change, then pick a currency from the list in the Currency dialog (use the search field to filter). The currency should match the currency configured in your Hello Clever merchant account.

3. Start setting up your Payments Account

   Under What would you like to set up?, review the Accept payments and send payouts card, then click Create Payments Account.

4. Fill out the account form

   Complete the form fields:

   • Currency: carried over from the previous step (read-only).
   • Account name: your registered account name (read-only).
   • Account nickname: a label to help you identify this account (for example, Payment Account 1).
   • Account image: click Browse to upload a logo or store image. The maximum file size is 2MB.
   • Planned integration type: open the dropdown and select Shopify (listed under For online and in-store merchants).
   • Website URL: enter your Shopify store URL (for example, https://your-store-name.shopify.com).

   When the form is complete, click Create Payments Account.

   Set the Planned integration type to Shopify so the account is configured for your storefront. Make sure the Website URL matches your store; a mismatch can prevent the integration from working.

5. Find your App ID and Secret Key

   1. In the Merchant Dashboard, click your account name in the top-right corner, then select Authentication under Developer.
   2. On the Authentication page, make sure the Auth 1.0 tab is selected.
   3. Find the row matching the Payments Account you just created (matched by Account Name & URL and Name & Plugin Type), then copy its App ID and Secret Key.
6. Install the app from the Shopify App Store

   1. Visit the Hello Clever app listing at https://apps.shopify.com/cleverpay while logged in to your Shopify account.
   2. Click Install.
7. Connect your store

   Installing the app redirects you to a Hello Clever connect page (connect.helloclever.co/connect-shopify). Enter the App ID and Secret Key you copied, then click Connect.

8. Verify the setup

   Once connected, 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, create a new Payments Account in the Merchant Dashboard for each store to generate a separate set of credentials.

---

Configure payment logos at checkout

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

1. Go to Payment settings

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

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

3. Select your logos

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

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

---

Add the Hello Clever logo to your footer

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

1. Open the Themes section

   In Shopify Admin, click Themes from the sidebar.

2. Access the theme editor

   Click the Customize button on your active theme.

3. Open the code editor

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

4. Edit the footer file

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

5. 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 %}
   
6. 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.

1. Log in to your Shopify admin

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

2. Update the app

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

3. Accept updated permissions

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

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

1. Go to your active theme

   In Shopify Admin, click Themes from the sidebar.

2. Open the theme editor

   Click Customize on your active theme.

3. Open the code editor

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

4. Open theme.liquid

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

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

   You can find your App ID on the Auth 1.0 tab of the Authentication page (under Developer in your Merchant Dashboard profile menu).

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

1. Open the theme editor and edit code

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

2. Open theme.liquid

   In the Layout section, open theme.liquid.

3. 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 for your Shopify Payments Account.

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