Everything you need to know about designing the Toki Wallet to work for you and your customers
Overview
The Toki Wallet is the core feature which allows your customers to engage with your rewards program. This module should live on all pages throughout your Shopify site (although it does not need to)From here, your customers can learn more about your program, your reward tiers, your activities, their status with your program and and perks they have with your brand.How to create your wallet:
- From the Merchant Portal, click Design
- Click "Create Design"
- Name your design (usually [Your Brand Name] Wallet
- Select Wallet from the "Type" dropdown
- Click Create
We suggest signing in as a test customer in order to have a view on the wallet that will give you a users perspective, like this.
We also suggest turning on Inspection Mode so you can better work your way around the customizations of the wallet. After turning it on, you will be able to right click on objects in a yellow outline and it will take you to where in the wallet this object can be customized.
How to change where the wallet is showing on your site
You can select which channels the wallet shows (mobile v desktop), whether the placement is different for each one and if there is an offset. View here.
- Display location: choose between Mobile only, Desktop only or Both
- Module Position: where on site do you want the wallet to live?
- Module Position Horizontal Offset: this will offset the wallet from the above selected horizontal position (Right/Center/Left) by whatever amount you choose
- Module Position Vertical Offset: this will offset the wallet from the above selected vertical position (Top/Center/Bottom) by whatever amount you choose
- Pages to Include/Exclude
- If you want the wallet icon to only show on certain pages, include the links to those pages here.
- If you want the wallet icon to show on all pages EXCEPT for certain pages, include the links to those pages that it should be excluded from here
How to customize the Icon
The icon can be edited in the Icon section like so.
- Width + Height: the size of the wallet
- Border Radius: determines how square/circular the wallet will appear
- Border Width: how much of a border you want the wallet to have
- Border Color: what color you want the border of the wallet to be
- Brand Image: think of this as the wallet icon
How to add a Close button to the icon
Wallet with close button? - do you want the option for people to remove the wallet from screen? If yes:
- Close button background color
- Close button border color
- Close button icon color
How to customize the sign in screen
There are several customizations you can make to the login Auth. Take a look at the set ups here before making a decision. From within the Auth screen settings you can upload slider images or videos to make the Auth screen truly yours.
- Background Color: what color will the background of the wallet be? *overridden if a brand image is selected*
- Color - what color will the text be?
- Font Size - what size will the text be
- Text - what do you want it to say?
How to customize the tabs
The tabs at the top of the wallet are customizable - you can add remove or reorder them to your liking.
How to customize the blocks
The blocks within each wallet page are customizable - you can add remove or reorder them to your liking.
How to think of each tab
As a default there are five tabs within the wallet - a Home screen, a Rewards Overview, a Transactions screen, a Spending screen and a Profile screen. Each comes with default blocks but feel free to customize to your liking.
There are over 23 blocks to choose from to customize the wallet to your liking.
- Coupons block
- Perks block
- Featured activity block
- Gifts block
- Total spending power block
- Credit spender block
- Total code
- Collectibles
- Support block
- Legal block
- Earn more credits button block
- Activities list block
- Manage subscriptions button block
- Recently viewed products block
- Cart block
- Orders list block
- Your status block
- Alliances block
- Transactions block
- Membership list block
- Rewards overview header block
- Voting activities block
- Intro message block
How to edit the Blocks
You can edit the title, subtitle and image of the block by searching for the block title on the left sidebar and then making changes like this.
In order to change the activity image, you will need to go to the specific activity. Otherwise, Toki will pull in the default logo image as this image.
How to customize the Membership Card
The membership card area of the wallet is a standard. You can customize the background/image, logo in the top lefthand corner, the buttons below and more. Here is how:
The membership card image/background is what the default setting will be for those that aren't in a reward tier. If someone is in a reward tier, they are going to view the member card that was designated in their tier. Here is where/how to change this.
- Membership Card Brand Logo - logo that will show in the top left of the "membership card"
- Membership Card Currency - will you show the balance in UDS or Store Credits?
- Membership Card Brand Logo Width + Height (max 100px) - size of the brand logo above
- Membership Card Brand Logo Border Radius - how square/circular the brand logo will be
How to set up a Featured Activity
You can have a featured activity that you promote your wallet users to do first thing after signing up. Here's how:
- Featured Activity - an activity you want to highlight PRIOR to someone logging in
- Featured Activity Title - what text will appear as a title of the featured activity
- Submitted Message - what text will appear upon completion when the featured activity requires manual approval
- Completed Message - what text will appear upon completion when the featured activity is automatically approved
How to place component on Shopify
After you design your wallet, it's important to make sure it's toggled on your Shopify theme.
