Plugins
Templates
Blocks
Template Setup Guides

Koinz - Referral Template

Template page link: https://zeroqode.com/template/koinz---referrals--rewards-template-1566478320195x404620053430759800

Introduction

Koinz - Referrals & Rewards Template allows users to create referral links and share them across social networks and other means of communication. This would help attract more users to any app or website in exchange with reward points that users can spend inside a store (sample store comes as part of this template).

Also the template features a progression system so the more users refer other users the higher they will be rewarded. The template is suited for referral platforms, stores or even as an extension for an existing project.

Features:

  • Responsive design

  • Referral system

  • Rewards system

  • Integrated store

  • Email verification

  • Admin panel

  • Unique design

Structure

Database

The database for this template mainly consists of the following datatypes:

  • User (contains details of the platform's users)

  • Product (represents the products from the store)

  • Shopping item (has the same details as Product but it's used for Shopping cart)

  • Shopping cart (contains the Shopping items user has saved to purchase)

  • Shipping info (contains User's shipping details)

  • Order (contains the Shopping items User has ordered)

  • Order Status (status of the Order User has made)

  • Testimonial (list of testimonials from index page)

  • Variables (list of variables used to speed up the system)

For a better understanding of the database's structure let's just describe some processes that can take place on this template.

Let's say a user signs in. After he does that there will be a shopping cart created for this specific user. When he will have enough points he will be able to buy something. So he will go to his profile->store to pick a product. By picking a product there will be created a Shopping item with the details of that product. This datatype also contains the Quantity, Value and the Bought status of this item. This fields store the info about how many of this products the user has picked and what is the total value of them. The Bought field (yes/no type) becomes "yes" after the user will buy that item and it will disappear form the shopping cart. All the bought items will now be part of Orders waiting to be delivered.

The Variables datatype consists of parameters used to speed up the work of different workflows and elements. Some of the fields there, are meant for editing but the rest should be left untouched. The HeroSelectionPhotos field stores a list of images used at the top of the index page, the UserDefaultPic field stores an image that becomes a new user's profile pic after he signs in and the WriteRigths is used for limitations on the admin page. The field TotalTestimonials is used for the testimonials carrousel on the index page.

Pages

This template consists of the following pages:

  • index

  • app

  • admin

  • signin

  • email_confirmation

  • 404

Index page greets the users with a minimalist and modern design and has the navigation necessary to access the other pages.

The app page is the "user's page" which means it has all the features and elements designed for the user. It's structure consists of blocks like orders, store, referral info, profile settings. Here the user can buy something, view his orders change his profile info and share his referral link through the social media or by copying his referral link.

The admin page provides the necessary tools for the owner to manage a project based on this template. Here you can add new products, edit existing ones, view statistics, view and deliver orders, contact users etc.

Signin page is used for login and singup. Also this is where we check if the user is using a referral link and if so, we add the points to the respective user. We also upgrade the referral user's account if he invited enough members for that. There is an IP check in case some users may want to abuse the system and invite themselves. Also on this page new users are given a default profile pick and a shopping cart.

The email_confirmation page is used as a redirect for the confirmation link users receive on the email. By using that link their account's email will become verified.

Page 404 was not found.

Specific References

This template has some specific design solutions and features that need to be analyzed for a better understanding for future customization.

Index page

Inputs

So starting with the index page, the first thing is that the title of the blocks is actually an input and when trying to type something inside it will show a predefined text no matter what the user is typing in (try it for yourself to see what happens when you try to type something in).

Input HOW IT WORKS

The predefined text that appears is stored in a state named DefaultValue which is attached to every input like this (check the image below).

Input HOW IT WORKS Proprieties

Also there is a workflow that checks if the input isn't focused and if it contains some text (just the first letter from the DefaultValue's text). If the condition is true it will reset the input (check the image below).

Reset Input

There is also an HTML Inputs element at a bottom of the page that contains the code for the inputs to work the way they do but you don't have to do anything about it. You can change it's position on the page in case it gets in your way.

So wrapping up to the conclusion, if you want those inputs to display a different text you will have to change the DefaultValue and the workflow's condition of that specific input.

Design

As you've already seen there is a vertical text on the left side of the page. This is actually a part of the background and not actually a editable text. This was done in order to be able to make the page responsive. So changing this text will require you to download the .psd file bellow and changing the text inside. After that save it as a .png file and upload it as the background for the Group Text Background element on the index page.

Some elements in this template are present in 2 versions, like the hero selection text. One of them is designed to be visible on small devices while the other is visible on the larger ones. Also there are some empty groups that are used just for collapsing. These groups have the "collapse" word in their title, so unless you are not make

Adding testimonials should be done only through admin page since this feature requires the total number of testimonials to work properly, which is incremented/decremented there. You can add testimonials manually in the database but you will need to change the TotalTestimonials field from the Variables datatype accordingly.

Hero selection images are also stored in the Variables datatype so if you want to add more pictures or delete some of the existing ones just edit the HeroSelectionPhotos field.

App page

This page has all the necessary tools for the user which makes it one of the most complex pages of the template but it's quite simple to customize. Below will be a description of how to customize the more complex features and design solutions.

Custom design & features

One of the design solutions that rely on coding is the share buttons from the Referrals block. However unless you want to change the style of the icons (which anyway it's done only through code) you don't have to edit anything. Just pick what social media icons you want your users to have the ability to share trough, from the AddToAnyShareButtons A element found on the page. In case you want to check what code was used to modify the appearance of the icons check the page's properties under the Page HTML Header section (check the image below).

App page proprieties

Also the Input Referral link element that contain's the user's referral link is blocked from editing when accessing the Referrals block through a workflow (check the image below).

Input Referral link editing limitation

Store

Currently the store is set to show 8 products at a given time with the option to see the others by clicking previous/next arrows. If you want to decrease/increase the number of products shown you will have to make few changes to the workflow. First find When Page is loaded workflow and change the state ShowItemsUntil to the value you desire (check the image below).

After that find the Right arrow and Left arrow elements and in it's properties click Start/Edit workflow and change the ShowItemsFrom and ShowItemsUntil increment/decrement accordingly.

You will also have to find the Input Page number element and divide it's value by the number you have already used to change the states above.

When Page is loaded workflow

Changing the max referral level

We have used the Progress Bar plugin to show the user his current referral status and his progression. Currently the max level is set to 100 but you can easily change it to your desired number. In order to do so just divide ProgressBar Referrals Percentage field's value to the number which multiplied by 100 will give you the maximum desired level. For example if I wanted the max level to be 200 I would simply divide the current value by 2 (check the image below).

Progress Bar properties

Signin page

Referral workflow

So after you made the changes described above you will have to make some on this page too in order to complete the process. Now if a user hits the maximum level it will still be able yo invite other users but his level will no longer increase. This is done through a condition check before upgrading his level (check the image below).

Referral signup

You just have to change the number in the condition shown above (right now that number is 100), and you are done. Tho you might want to change the Custom Referral upgrade workflow which upgrades user's level that also mean he will receive more rewards from his referrals. Now the progression milestones are set to 5, 10, 25, 50 and 100. So if you want another progression system you will have to change Custom Referral upgrade workflow and the Progression Bar design from the app page.

You might want to change the amount of points user's receive from referrals. Right now the user receives an amount equal to his Next level*10 which is done in the step 6 of the workflow shown above.

Admin panel restrictions

For security purposes the template has limited rights for potential customers. This means that you will be unable to modify/delete existing data from the admin panel. However it will still give you an overall idea on how it does work. Decisive buttons that lead to creation/deletion/editing of an object are disabled and the text "blocked" in their name. In order to remove this restriction you will have to make some changes in the workflow after you purchase this template. You can remove this restriction by following on of these steps:

  1. Go to database -> App data -> Variables and modify the WriteRights from "no" to "yes".

  2. The second option is a a bit harder than the first one but not too complicated. You will have to remove all the conditions from the buttons that do this security check (check the image below for an example).

Admin rights limitation

Demo to preview the template