This article contains instructions on how to add the referral program elements into your design if the automatic installation process failed when you installed from the app store

NOTE: If you have not already installed the Referral Program app from the app store, these directions do not apply to your store.

In order to add the referral program components in your design, you need to update three components:

  • Add "customer/refer.html" -- page where a logged in customer can refer more friends
  • Modify "customer/account.html" -- the my account page where a user will be able to track their referral progress
  • Modify "customer/thank_you.html" -- the thank you page where a user will first be able to refer a friend, after completing their order

Customer/refer.html

Create a new file in the customer directory called "refer.html"

You'll want to add the following code to create the most basic version of referral page:

{% extends "base.html" %}
{% block page_content %}
{{ refer.page(standalone=True, btn_class="btn-primary primary-button") }}
{% endblock %}

This code block incorporates your base.html and adds the refer page to the body of the page content.

Customer/account.html

In your existing customer account page, you'll want to add the macro to display the referral progress tracker to the customer.

To do this, the following must be added to your account.html page:

{{ customer_helper.show_referral_info(btn_class="btn-primary") }}

 

In the default themes, we install the referral_info into its own row like this:

<div class="row">
<div class="col-lg-12">
{{ customer_helper.show_referral_info(btn_class="btn-primary") }}
</div>
</div>

Customer/thank_you.html

In the thank_you.html, you'll need to add the following macro:

{{ refer.page() }}

 

You can place this either before or after the customer_helper.order_page() macro.

The default designs will have a thank_you.html page that looks like:

{% extends "base.html" %}
{% block page_content %}
{{ customer_helper.order_page("Thank you!") }}
{{ refer.page() }}
{% endblock %}