Reading list Switch to dark mode

    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