Back to Top

Wallet Management for Shopify: Workflow

Updated 26 February 2020

Presentation of Wallet Management App for Shopify Workflow

Let’s see how the Admin, as well as the Customers, can navigate through the app:

Workflow from Admin’s End

Admin needs to login to his Shopify Store

Now, the Admin can install the Wallet Management app by

Searching for a Shopify
Headless solution ?
Find out More

Visiting its Landing Page

Enter the store name and hit the install button

wallet management

Approve the charges, complete the installation process & you are set to use the app!

The app will be listed in the ‘Apps’ section of the Shopify backend

wallet management

Clicking on the app, the Admin will land on the homepage. He will have Wallet Statics & Notification on this page.

wallet management

Firstly, the Admin needs to configure the app.

For this, click on the ‘Configuration’ menu which includes four further configurations.

General Configuration


Wallet Configuration


Label Configuration


Mail Configuration


Theme Configuration


Stripe Configuration


Once done with the configuration, the Admin needs to add cashback rules on the basis of which he wants his users to receive cashback.

Go to ‘Cash Back Rules’ menu

Click on ‘+Add Rules’

wallet management

The Admin needs to Import Products on which he wants to add cashback rules. 

For this, click on the ‘Add Product’ menu


Select the products from the drop-down list.


After importing, now the Admin can add rules from the same page.

Mark that, the cashback can be added on the Cart as well as the product and it can be fixed or a percentage value.

wallet management

To view the added cashbacks, click on the ‘Cashback Rules’ menu, again.

wallet management

The Admin can enable/disable/edit/delete the added cashback rules from this page.

wallet management

To edit the cashback, click on the edit button, make the desired changes and save.

The cashbacks are added on the backend but to display them on the storefront, the Admin needs to do some code-pasting.

To show the cashback on the product description page, paste the code given below in ‘product-template.liquid‘ file.

<div class="wk_cashback_product" product_id="{{ }}"></div>

Where to find the following template files?

Shopify Backend >> Online Store >> Themes >> Actions >> Edit Code

wallet app demo Themes Shopify

Search for the respective file, paste the code & save

wallet app demo Themes Shopify


Cashback on the product description page will be viewed like this on the storefront:

Now, to show the cashback on the collection page, paste the given code in ‘product-card-grid.liquid‘ file.

<div class="wk_cashback" product_id="{{ }}"></div>
Cashback on the collection page will be viewed like this on the storefront:

Lastly, to show the cashbacks added to the cart, the Admin needs to paste the given code in ‘cart-template.liquid‘ file.

<div id="wk_get_cashback" customer_id ="{{ }}"></div>
Cashback on the cart page will be viewed like this on the storefront:

Once done with adding cashbacks, now, the Admin needs to import customers so that they will have the wallet functionality on their end.

For this, go to the ‘Wallet Customer’ menu.

Wallet Customer

Click on the ‘Import Customer’ button

wallet management

Enter the dates and import.


After importing the customers, the Admin needs to do code pasting so that the customers will have the wallet feature on their frontend.

To show Add money button & wallet information on the customer account page, paste the given code in ‘customers/account.liquid‘ file.

<div id = "wk_wallet" customer_id="{{ }}" customer_email = "{{ }}" customer_tag = "{{ customer.tags }}"></div>
Frontend view for the same:

To show the pay from wallet button on the cart page, paste the given code in ‘cart-template.liquid‘ file

<div id="wk_pay_wallet" customer_id="{{ }}" customer_email="{{ }}"></div>
Frontend view of the same:

Now, your customers will be able to add the amount to their wallets.

The amount added by customers to their wallets can be viewed by the Admin from the Wallet Customer section.

Click on the ‘Wallet Customer’ menu

Click on the ‘View Details’ option to know more about the wallet transactions

wallet management


The Admin can add an amount to the customer’s wallet by clicking on the ‘Add Amount’ button, enter the amount and click on Add.

To reduce the amount from the wallet, enter a negative value.

wallet management

Moving on, if the Admin has enabled the option shown below from the general configuration section

then the customers can request a refund from their end and the Admin will refund them to their wallets.


Now, suppose a customer places an order and pays for the order via wallet then he/she can request a refund from his end as shown below:


This request will be shown to the customer under the ‘Refund Request’ section in the pending state as shown below:


The Admin will receive the refund request in the ‘Refund Request’ section on the app as shown below:

From here, the Admin can refund the customer just by a click.

wallet management

Clicking on ‘Refund Amount‘ button

wallet management

After the refund, the refund status on both the ends (Admin as well as the customer) will change to ‘success’.

Moving ahead, if the Admin has enabled the feature of letting his customers transfer their wallet amount to other’s wallet from the general configuration page, as shown below:

Then your customers can do so from their end, as shown below:


The Admin will have this information in the ‘Transferred Detail’ section.

(List of all the customers with their transfer details)

wallet management

Lastly, the Admin can add FAQ related to this app for his customers.

For this, click on the ‘FAQ’ menu, enter the details and save.

To display these FAQ on Storefront, the Admin needs to go to

the Shopify Backend >> Online Store >> Navigation Menu >> Main menu

webkul product faq

Add new menu >> give the name of the faq menu and then select the page wallet_faq and save.

product faq

Frontend view of the FAQ

This is all for Admin’s End.

Workflow from Customer’s End

Firstly, the Customer needs to login to access their wallet or signup for using this functionality.

wallet app demo Themes Shopify

After login, customers can view all the wallet detail in the ‘Account’ section


Now, the customer needs to add money to the wallet so that the order amount can be paid using the wallet.

(Enter the amount in the box shown above and click on ‘Add Amount’. Customer will be redirected to the checkout page, enter the address and other information, click on  make payment, enter the card details and complete the order)

The wallet status will be updated as shown below:


It will also reflect in the wallet transaction history section as shown below:


Now, the customers can make the order using the wallet amount.

Add the product to the cart & on the cart page, click on the ‘Pay from Wallet’ option & check out as usual:


The transaction information will be updated in the ‘Wallet Transaction History’ section.


If the customer wants to request a refund for the order paid using the wallet, he can do so by clicking the three dots under action menu, refer image below:


Once the request is made, it will be sent to the Admin & the customer can view all the refund requests made by him in the ‘Refund Request’ section in a pending state.

Once the request is accepted by the Admin, the Status changes from Pending to Success.


Now, if the customer wishes to transfer his wallet amount to another wallet, he can do so by going to the ‘Wallet Status’ section as shown below:


Mention the email ID of the other customer, enter the amount to be transferred & click on Transfer Money.

The ‘Wallet Transfer History’ section will have this information.


Cashbacks will be visible to the customer on frontend like this:

Product Page


Collection Page


Cart Page


This is all for the Customer End!

Wallet Management for Shopify Blog

Have a look at the


Wallet Management Demo Details

Check Out

Wallet Management Demo

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home