> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rc.cleverhub.co/llms.txt
> Use this file to discover all available pages before exploring further.

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

<Info>
  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.
</Info>

<Steps>
  <Step title="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**).
  </Step>

  <Step title="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.
  </Step>
</Steps>

## Install Hello Clever

<Steps>
  <Step title="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**.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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**.
  </Step>

  <Step title="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**.

    <Note>
      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.
    </Note>
  </Step>

  <Step title="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**.
  </Step>

  <Step title="Install the app from the Shopify App Store">
    1. Visit the Hello Clever app listing at [https://apps.shopify.com/cleverpay](https://apps.shopify.com/cleverpay) while logged in to your Shopify account.
    2. Click **Install**.
  </Step>

  <Step title="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**.
  </Step>

  <Step title="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.
  </Step>
</Steps>

<Note>
  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.
</Note>

***

## Configure payment logos at checkout

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

<Steps>
  <Step title="Go to Payment settings">
    In Shopify Admin, click **Settings** in the bottom-left corner, then select **Payments**.
  </Step>

  <Step title="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.
  </Step>

  <Step title="Select your logos">
    Choose the payment options you want to display to customers during checkout.
  </Step>

  <Step title="Save">
    Click **Save** to apply your changes.
  </Step>
</Steps>

<Note>
  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.
</Note>

***

## Add the Hello Clever logo to your footer

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

<Steps>
  <Step title="Open the Themes section">
    In Shopify Admin, click **Themes** from the sidebar.
  </Step>

  <Step title="Access the theme editor">
    Click the **Customize** button on your active theme.
  </Step>

  <Step title="Open the code editor">
    In the theme editor, click the three-dot menu in the top-left corner and select **Edit code**.
  </Step>

  <Step title="Edit the footer file">
    In the code editor, open the `footer.liquid` file.
  </Step>

  <Step title="Update the payment types loop">
    Find this code in `footer.liquid`:

    ```liquid theme={null}
    {% for type in shop.enabled_payment_types %}
    ```

    Replace it with:

    ```liquid theme={null}
    {% assign enabled_payment_types = 'visa,master,american_express,helloclever' | remove: ' ' | split: ',' %}{% for type in enabled_payment_types %}
    ```
  </Step>

  <Step title="Save your changes">
    Save the file. The Hello Clever logo will now appear in the footer of your store.
  </Step>
</Steps>

***

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

<Steps>
  <Step title="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.
  </Step>

  <Step title="Update the app">
    Visit `https://shopify.helloclever.co/?shop={your-shopify-store}.myshopify.com` to trigger the update.
  </Step>

  <Step title="Accept updated permissions">
    Approve the updated app permissions to grant access to products and checkout.
  </Step>

  <Step title="Update theme.liquid">
    Ensure the script URL in your `theme.liquid` file references version 2.0:

    ```html theme={null}
    <script
      id="clever_widget_2.0"
      src="https://helloclever.co/lib/clever-widget/VERSION/2.0.0/index.js"
      async
      onload="createCleverWidget()">
    </script>
    ```
  </Step>
</Steps>

### Enable express checkout on product pages

<Steps>
  <Step title="Go to your active theme">
    In Shopify Admin, click **Themes** from the sidebar.
  </Step>

  <Step title="Open the theme editor">
    Click **Customize** on your active theme.
  </Step>

  <Step title="Open the code editor">
    Click the three-dot menu in the top-left corner and select **Edit code**.
  </Step>

  <Step title="Open theme.liquid">
    In the **Layout** section of the file browser, open the `theme.liquid` file.
  </Step>

  <Step title="Add the widget code">
    Insert the following snippet into `theme.liquid`, replacing `app-id-xxxxx` with your actual App ID:

    ```html theme={null}
    <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>
    ```

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

  <Step title="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.
  </Step>
</Steps>

<Tip>
  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.
</Tip>

***

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

<Steps>
  <Step title="Open the theme editor and edit code">
    In Shopify Admin, go to **Themes**, click **Customize**, then select **Edit code** from the three-dot menu.
  </Step>

  <Step title="Open theme.liquid">
    In the **Layout** section, open `theme.liquid`.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>
</Steps>


## Related topics

- [Get Started with Hello Clever](/getting-started/overview.md)
- [Add Hello Clever to Shopline](/integrations/shopline.md)
- [Add Hello Clever to Magento](/integrations/magento.md)