Shopify

Integrating Hello Clever with Shopify

Getting Started

Requirements for the Hello Clever Shopify Plugin.

Store Address

Please note that the Store Address must correspond to the Hello Clever account region.

1. Navigate to: Shopify Admin > Settings > General
2. Under 'Store Address', the 'Country' must be:
   • 🇦🇺 Australia

💵 Store Currency

Please note that Store Currency must correspond to the Hello Clever account region.

*In this case, we are only accepting AUD for the currency.

1. Navigate to: Shopify Admin > Settings > General
2. Under 'Standards and formats', the Currency must be:
   • 🇦🇺 Australia

Add Payment Option

How can I add Hello Clever as a payment option at checkout?

Configuration

Completing the below steps will enable and display Hello Clever as a Payment Method.

1. Get started by clicking on the following link: Shopify Payment Gateway to see more details about Hello Clever Payment Gateway.

1. Click on the 'Add app' button, you will be prompted to enter the app-id and secret-key.

   Please use the one generated from your Hello Clever's Merchant Dashboard

   Once logged in, Click "Activate" to activate Hello Clever on your store.

1. Shopify will ask you to grant Hello Clever permission to process orders & refunds.

   Click on 'Install App' to proceed

2. You will be asked to enter App ID and Secret Key on the form as shown below:

1. The requested App ID and Secret Key can be obtained from your Hello Clever's dashboard on the Merchant Portal at merchant.helloclever.co

1. Once App ID and Secret Key filled in, you will be redirected to your Shopify store configuration, click "Activate Hello Clever"

Hello Clever will appear on your store's checkout after everything is set up correctly.

• Please note that each pair of AppID and Secret Key in the Hello Clever Portal can only be installed to a single Shopify store, so if you'd like to install Hello Clever on more than one stores, please make sure you'll create a new pair for each store.

Refund Process

How to initiate Shopify refund on Hello Clever's dashboard?

Completing the below steps will ensure the refund arrive back to customer within minutes.

1. Head to your Shopify Admin account and click on 'Orders'. Go ahead to order details that need to be refunded.

2. Select 'Refund'.

3. The order details will be updated with 'Refund pending' as the latest status. This is because the order payment went straight to merchant's bank account. Hello Clever does not hold any transaction from customers.

4. At the bottom of 'Payment Detail' page, a generated unique payID will appear. Please use this payID to refund the transaction to your customer.

5. Head over to your bank account and select 'payID' as the payment method, copy and paste the unique payID you received on previous step. Once transferred, you will see the 'Refund Pending' status, this may take 5 - 10 minutes to update.

6. After all the previous steps completed, you should be able to see the 'Refund' state changed to 'Refund Completed'

7. The transaction overview on the dashboard should change to 'Refunded' if all the steps completed.

Shopify Product Tagline

The Hello Clever logo and Instant Cashback percentage will appear on your Shopify Product Pages. Note: The expected appearances may differ depending on site-specific theme and layout.

Configuration

Completing the below steps will position the Hello Clever Product Page assets on your Shopify website.

1. Login to your Shopify store as an admin
2. Click on Themes from the sidebar menu settings
3. Click on Customize button
4. Click on the three dots setting on top left corner and select Edit Code
5. Select the theme.liquid file
6. Insert the code below and replace app-id-xxxxx with your site's app_id. *Please note this is the keys that you are currently using for your store's 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 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>

1. If all the steps above set up correctly, you should be able to see our product messages on your product page

Shopify Express Checkout

Hello Clever's Express Checkout is one of our best features that can help increase customers' engagement and loyalty by providing a Checkout button on your product pages.

To enable the Hello Clever Gateway's Express Checkout feature, please follow the instructions below. Please follow Migration instruction from version 1.0 to 2.0 if you are using version 1.x. Otherwise, you can follow the instruction Enabling Express Checkout Feature.

Migration instruction from version 1.0 to 2.0

1. Login into store as store admin: https://admin.shopify.com/store/[shopify-store]

2. Update Hello Clever App with the link below: https://shopify.helloclever.co/?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>
   

    

5. If all the steps above has been set up correctly, you should be able to see express checkout feature on your product page. Please refer to the image below for the sample of the express checkout button.

Enabling Express Checkout Feature

Prerequisites

You need to install the Hello Clever app on your Shopify store. If you haven't installed the app yet, please follow out the instruction at Hello Clever Shopify App.

To enable the Hello Clever Gateway's Express Checkout feature, please follow the instructions below.

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

Shopify Footer Logo

The Hello Clever logo will appear on your page's footer.

Configuration

Completing the below steps will add Hello Clever logo on your page footer.

1. Login to your Shopify store as an admin

2. Click on Themes from the sidebar menu settings

3. Click on Customize button

4. Click on the three dots setting on top left corner and select Edit Code

5. Select the footer.liquid file

6. Find the code below if this is your first time modifying the footer

{% for type in shop.enabled_payment_types %}

1. Replace the code above with:

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

1. Save changes and if all steps above is done, you'll be able to see our logo on the footer underneath of your webpages

Shopify Payment Options Logo

How to manage what payment options to display?

Configuration

Completing the below steps will let you choose what payment options to be displayed on the checkout page for Hello Clever.

1. Login to your Shopify store as an admin

2. Click on Settings on the bottom left corner

3. Once you're on the Setting, click on Payments menu

4. Choose Hello Clever and select Manage

5. Select the payment options you would like to display to your customers during checkout

6. Save the changes and if all steps above is completed, you'll be able to see your preferred logo displayed on the checkout page.

• Please note that Shopify currently allows to display 4 logos. If you select more than 4 it will also add the 'and more...' text as shown above.