Shopify Express Checkout Feature
To enable the Hello Clever Gateway's Express Checkout feature, please follow the instructions below.
Hello Clever's Express Checkout Feature is one of our best features that can help increase customers' engagement and loyalty by providing a Checkout button on your product pages. Before proceeding further, a number of updates should be shown in WordPress Admin next to the Plugins link, indicating that plugin updates are available if you haven't enabled plugin's auto update. Please migrate Hello Clever App to version 1.2.0 before proceeding further.
Migration Instruction
Version 1.0 to 2.0
Login into store as store admin https://[shopify-store].myshopify.com]/admin
Update Hello Clever App with the link below: https://app-connect.helloclever.co/auth?shop=[shopify-store].myshopify.com *please replace [shopify-store].myshopify.com to your myshopify url, i.e. your-store-name.myshopify.com
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>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>
Enabling Express Checkout Feature
Login into the store which one you want to add Clever Widget
Select Themes
Click Customize button
Click Edit Code
Select file theme.liquid
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>If all the steps above has been set up correctly, you should be able to see express checkout feature on your product page