Send to a friend

Installation instructions (all theme versions)

Once the app is installed you'll need to add the relevant code to your live theme's files.

Adding the code will display the form for your visitors to complete. On submission of the form an email will then be generated to the referred friend.

The code provided below does not include CSS styling, so you'll need to use CSS in order to make the form appear nicely.

Instructions on how to make the email form appear in a pop-up are not included. To do so you'll need to use some HTML/JS to create a popup. If you're not familiar with this process, W3schools has a tutorial which you can follow (you will need HTML/CSS/JS experience).

Where to place the code

If you are using a version 2 or earlier theme, your code will need to be placed within the product.twig file.

If you are using a version 3 or later theme, your code will need to be placed within either the product.twig file or product_form.twig file.

Code example

<form action="{{ global.current_url }}" method="post">
    <input type="text" name="email_address">
    <textarea cols="30" rows="5" name="message"></textarea>
    <input type="text" name="{{ global.honeypot_field_name }}" autocomplete="off" class="hidden">
    {% if recommendation_recaptcha %}
        <div class="g-recaptcha"></div>
    {% endif %}
    <input type="hidden" name="redirect_path" value="/thanks">
    <input type="hidden" name="redirect_message" value="The email has been sent">
    <button name="send_recommendation_email" value="1">
        Send
    </button>
</form>

The code displayed above is the required code that generates the form to send the referral email.

Displaying Google's reCAPTCHA is a requirement for the form. The user will need to pass the reCAPTCHA test in order for the form to submit (this is to prevent abuse of the system by bots). You can read more about reCAPTCHA here.

Success message

Once the form has been submitted, you have two options for showing the customer a success message (to confirm the message has been sent). You should only implement one of these methods.

Method 1: Redirecting to a different page

The following code will redirect the customer to another page:

<input type="hidden" name="redirect_path" value="/thanks">

In this example the customer would be redirected to a page located at /thanks.

Method 2: Keeping the user on the same page

The following code will keep the user on the current page (and refresh it) and show a success message from the bottom of the screen:

<input type="hidden" name="redirect_message" value="The email has been sent">

The message field

The message field allows the user to enter the message that's sent with the email:

<textarea cols="30" rows="5" name="message"></textarea>

You can predefine the message if you want to.

Additional information about the product

If you'd like to automatically include details about the product (prefilled in the message content), then you can include details using the product object, e.g. {{ product.url }} will output the URL of the product that's being referred.

Implementing a referral link

You can use the 'Send to a friend' app along with the reward points app to give the referred customer and the referring customer a discount.

You can write the details about what each customer will get in reward for their friend making a purchase.

When using the referral scheme, each registered customer has a unique referral link which they give to their friends. This needs to be included in the email that's sent to the customer (in the message field).

The referring friend will need to be logged into a customer account in order for the referral URL to be generated, and you can detect this using {% if global.customer.id %} (which will return TRUE if they are logged in).

In this example code, the referred customer is getting a monetary discount off their first order:

<textarea cols="30" rows="5" name="message">Please check this out {{ product.url }}?{{ global.customer.referral_scheme_url|replace({'http://www.domain.com/?': '' }) }} and get £5 off your first order.</textarea>

The {{ product.url }} variable will create the link of the product, but without the referring customer's unique referral URL. In order to add this, we're using some additional code (and removing the domain name from the variable with the |replace filter (because the product.url variable already contains this). You'll need to substitute domain.com for your own domain.

Customising the referral email

The email that's sent to the friend can be customised like any other email that's sent out from your website. Follow the instructions here.

The email name is referral email.

The email has full access to the product object so other details about the product (like the image or price) can be included in the email.

The {{ message }} variable is used in the email to output the contents of the message entered by the referring friend.