Customize the Redeem Link message using HTML and Liquid
You can personalize your Redeem Link landing page by editing your page message. This message/content can also contain HTML that you can use to style and layout your content. Here are some HTML examples:
| Message content | Shown as |
| The following text is <b>bold</b> and this <i>italic</i> | The following text is bold, and this italic |
| First line <br /> Second line | First line Second line |
We also support Liquid markup. For more information on its syntax, visit https://shopify.github.io/liquid/. You can use it to include additional information in your message. Here is a list of variables that you can use:
| Variable | Sample output | Description |
| {{ code }} | SAMPLE-CODE-01 | The current code as text |
| {{ delivered_to }} | john.doe@company.com | The recipient of this code, usually an email address or user id |
| {{ delivered_at }} | 2022-10-01 10:00:00 | The date when this code was assigned to the recipient |
| {{ created_at }} | 2022-09-01 10:00:00 | The date when this code was imported/generated |
| {{ used_at }} | 2022-09-01 10:00:00 | The date when this code was last marked as used, or empty if it hasn't been marked yet |
| {{ delivered_at | date: 'yyyy/MM/dd' }} | 2022/10/01 | Formatted date |
| {{ delivered_at | add_days: 10 | date: 'yyyy/MM/dd' }} | 2022/10/11 | Add 10 days to the date and format it |
| Hey {{ query.name | default: 'there' }} | Hey John | Access query string variables with an optional default value. |
The query variable is useful if you want to attach variables like a name to your redeem link. Here's an example with the name parameter attached to a redeem link URL. Notice the added parameter at the end:
https://api.couponcarrier.io/r/ABCD1234?email=demo@couponcarrier.io&name=John
How to show different content if code is marked as used
The used_at variable can be used to check if the current code has been marked as used or not. You can use it in an if-statement to show different content. Here's an example:
{% if used_at %}
Code was marked as used at: <strong>{{ used_at | date: 'yyyy/MM/dd' }}</strong>
{% else %}
Not used yet
{% endif %}
How to add custom CSS to your Redeem Link page
If you need even more control over the design of the page, you can add custom CSS to style elements. This is advanced and requires that you have some basic CSS knowledge. You'll need to view the page source code in order to determine how to add the rules properly. In the example below, we're adding a style tag that includes a CSS rule to change the text color of the code: 