Guide to the Branded Wallet/Launcher

Everything you need to know about designing the Toki Wallet to work for you and your customers
Written by Nora
Updated 9 months ago

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:

  1. From the Merchant Portal, click Design
  2. Click "Create Design"
  3. Name your design (usually [Your Brand Name] Wallet
  4. Select Wallet from the "Type" dropdown
  5. 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.

  1. Coupons block
  2. Perks block
  3. Featured activity block
  4. Gifts block
  5. Total spending power block
  6. Credit spender block
  7. Total code
  8. Collectibles
  9. Support block
  10. Legal block
  11. Earn more credits button block
  12. Activities list block
  13. Manage subscriptions button block
  14. Recently viewed products block
  15. Cart block
  16. Orders list block
  17. Your status block
  18. Alliances block
  19. Transactions block
  20. Membership list block
  21. Rewards overview header block
  22. Voting activities block
  23. 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

    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

    After you design your wallet, it's important to make sure it's toggled on your Shopify theme.

    Did this answer your question?