Skip to main content

Shopify Product Tagline

If you want to show the cashback details on your product pages like this, with the Hello Clever logo and Instant Cashback percentage clearly displayed, follow the steps in this guide. Please note that the appearance may vary depending on your site's specific theme and layout.

Follow the steps below to position the Hello Clever product page assets on your Shopify website.

Step 1: Login to Your Shopify Store​

  1. Log in to your Shopify store as an admin.

  2. Navigate to the Themes section from the sidebar menu.

Step 2: Customise Your Theme​

  1. Click on the Customize button to access your store's theme editor.

Step 3: Modify the theme.liquid File​

  1. Open the settings menu by clicking on the three dots in the top left corner.

  2. Select Edit Code from the dropdown menu.

  3. In the code editor, locate the theme.liquid file in the Layout section.

  4. Insert the following code snippet at the appropriate location within the file. Replace app-id-xxxxx with the App ID for your Shopify store (this is the key you are currently using for your payment gateway).

    <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 wants to render the widget.
        });
        // ----- AND -----
        widgets.expressCheckout({
          containerSelector: '.product-form__buttons', // Class or ID selector where merchant wants 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>

Save the changes to your theme file.

Step 4: Verify the Integration​

Navigate to a product page on your Shopify store. Check if the Hello Clever logo and Instant Cashback percentage are displayed correctly.