Adding a link to your standalone page onto your receipts is a crucial part of some sale cycles. Once a customer has a product in-hand it becomes helpful for them to have an easily accessible friend referral tool right inside of their email inbox. As with most things receipt oriented – keep it simple and keep it informative. Some templates for different service's receipts can be found below.

Shopify

Shopify allows quite a bit of receipt customization. To get to the Order Confirmation options in Shopify, navigate to Settings in the bottom left corner of the admin. From there select Notifications in the list of options that appears and then Order Confirmation at the top of the list.


Search the page (Ctrl + f for Windows, Linux, and Chrome OS or ⌘ + f on Mac) for "row footer" – which should show you:



This is where we will be adding a link to your ICS standalone page by adjusting the template below. Replace the www.google.com link with a link to your standalone page (the full link, including https) as well as the placeholder text in the code so that it indicates what your offer is as well as any other information the customer needs to refer:

<div style="border: 1px solid #dedede;border-radius: 3px;background-color:aliceblue">
<div style="width:100%;text-align:center;background-color:aliceblue">
<a href="www.google.com"> <img src="https://i.ibb.co/HPw7nSN/icsrewardsbuttontrans.png" alt="Invite your friends to earn rewards" border="0" onerror="this.style.display='none'"> </a> </div>
<div style="width:100%;text-align:center;background-color:aliceblue">
  <h1 style="padding:10px;width:100%;text-align:center;font-family:Segoe UI">Your Offer Text!</h1>
  <p style="padding:10px;font-family:Segoe UI;font-size: 16px">Your offer instructions should go here</p>
</div>
</div>

You can preview the email by scrolling to the top of the page and clicking Actions and then selecting Preview. If you have a web developer on your team or want to create a referral area on your receipt from scratch, using your own assets, this is where you would place them.


View and tinker with the template CodePen here


WooCommerce

Out of the box, WooCommerce doesn't allow much in the way of receipt customization. We can get links and background colors to work, but  anything beyond that will require a web developer to make changes to the template file of your online store. Information on how to do that can be found in the WooCommerce links below:


How to Customize WooCommerce Emails

Template structure & Overriding templates via a theme


A text-based approach for a referral link in the receipts is easy, however. To implement our template, log-in to your WordPress admin and select WooCommerce on the left, then select Settings from the drop down menu that appears. Several tabs will load near the top of the page. Select Emails.

To ensure that the customer always sees the email, we can add the link to the footer of all emails by scrolling down near the bottom of this page where a text field named Footer text can be found. This is where we will be adding a link to your ICS standalone page by adjusting the template below. Replace the www.google.com link with a link to your standalone page (the full link, including https) as well as the placeholder text in the code so that it indicates what your offer is as well as any other information the customer needs to refer:

<div style="border: 1px solid #dedede;border-radius: 3px;background-color:aliceblue">
<div style="width:100%;text-align:center;background-color:aliceblue">
<a href="www.google.com" style="text-decoration:none"><h1 style="text-decoration:none;width:100%;text-align:center;color:black;">Click Here to Earn Rewards!</h1></a> </div>
<div style="width:100%;text-align:center;background-color:aliceblue">
  <h1 style="padding:10px;width:100%;text-align:center;font-family:Segoe UI">Your Offer Text!</h1>
  <p style="padding:10px;font-family:Segoe UI;font-size: 16px">Your offer instructions should go here</p>
</div>
</div>

WooCommerce's email preview might differ from the actual email, so placing a test order is the best way to see how the receipt link and information looks. 


View and tinker with the template CodePen here


Ticketsocket

Ticketsocket allows images in their receipts, so any template can be used. You can integrate a link to your standalone page on both of their ticketing platforms.


Ticketsocket Premiere

To add a receipt template to Ticketsocket Premiere, navigate to Settings in the left pane, then select Receipts & Shipping, and then Receipts. In this area of the admin you'll see a text field that lets you add to and style your receipts. Select Source on the header of that text box.

Selecting Source displays the HTML of any design you had entered into that text field. This is where we will be adding a link to your ICS standalone page by adjusting the template below. Replace the www.google.com link with a link to your standalone page (the full link, including https) as well as the placeholder text in the code so that it indicates what your offer is as well as any other information the customer needs to refer:

<div style="border: 1px solid #dedede;border-radius: 3px;background-color:aliceblue">
<div style="width:100%;text-align:center;background-color:aliceblue"><br />
<a href="www.google.com"><img alt="Invite your friends to earn rewards" border="0" onerror="this.style.display='none'" src="https://i.ibb.co/HPw7nSN/icsrewardsbuttontrans.png" style="border: none; outline:none;" /> </a></div>
<div style="width:100%;text-align:center;background-color:aliceblue">
<h1 style="padding:10px;width:100%;text-align:center;font-family:Segoe UI">Your Offer Text!</h1>
<p style="padding:10px;font-family:Segoe UI;font-size: 16px">Your offer instructions should go here</p>
</div>
</div>

The receipt can be previewed by selecting Source again.

Alternatively, you can preview your new receipt by navigating to the orders manager. To do that – select Orders on the left pane, and then select Find Orders. Find an order (doesn't matter which) and click on the action wrench found on the right side of that order's entry. A drop down will appear. Select Print Receipt from the drop down and the receipt will appear with your new addition.