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
↓
Enter the store name and hit the install button
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
↓
Clicking on the app, the Admin will land on the homepage. He will have Wallet Statics & Notification on this page.
↓
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’
↓
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.
↓
To view the added cashbacks, click on the ‘Cashback Rules’ menu, again.
↓
The Admin can enable/disable/edit/delete the added cashback rules from this page.
↓
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="{{ product.id }}"></div>
↓
Where to find the following template files?
Shopify Backend >> Online Store >> Themes >> Actions >> Edit Code
↓
Search for the respective file, paste the code & save
↓
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="{{ 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 ="{{ 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
↓
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.id }}" customer_email = "{{ 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.id }}" customer_email="{{ 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
↓
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.
↓
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.
↓
Clicking on ‘Refund Amount‘ button
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)
↓
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
Add new menu >> give the name of the faq menu and then select the page wallet_faq and save.
↓
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.
↓
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
Be the first to comment.