Designing a custom gift card layout

By default, Gift Up uses our built-in layout and logic for rendering a gift card for an email delivery and for printing at home.

However, if the design or layout is not to your brand requirements, you can provide a custom layout to suit your brand.

To change the layout to a more custom one, head over to https://giftup.app/settings/gift-cards and select which layout you want to change, digital (i.e. email delivery), or printed:

You'll need to provide a complete HTML file that can be rendered in your desired way. By far and away the best way to start this off is by inserting the standard Gift Up template as your custom template, and tweaking it.

Injected data model

We provide a model that represents the order's gift card(s) into the layout, and we use the Mustache templating engine to render the gift card model as text in your template.

These are the variables we inject:

PurchaserName - The name of the gift card purchaser
CompanyName - The name of your business
CompanyAddress - The address of your business
CompanyCountry - The country of your business
CompanyCurrency - The 3 character currency code of your business
CompanyUrl - The URL of your business website
OrderTip - a decimal value representing the value of the tip pre-paid by the purchaser when ordering
IsTestOrder - A boolean value indicating whether this order is a test order, or a live one
SingularNomenclature - How you have elected to describe your gift cards, in singular nomenclature, i.e. "gift card", "gift certificate" etc...
PluralNomenclature - How you have elected to describe your gift cards, in plural nomenclature, i.e. "gift cards", "gift certificates" etc...
ResetCss - CSS content that is used to set page margins for print at 2cm, and to normalize fonts, margins etc... to a consistent level regardless of future browser releases
GiftUpTemplateCss - CSS content that is used for the standard Gift Up template
DefaultScripts - JavaScript functions that allow for dynamic font sizing used by the standard Gift Up template. Reach out to support@giftup.com if you feel you would like to use these
GiftCardsCount - The length of the GiftCards array
HasMultipleGiftCards - A boolean value indicating if GiftCardsCount > 1
GiftCards - An array of gift cards in the order, with the following properties
- IsGift - A boolean value indicating whether this is a gift for someone, or has been bought by the purchaser for themselves
- RecipientName - The recipient's name
- Title - The gift card title (i.e. "$50 Gift Card" or "Breakfast for one")
- Description - The gift card's description
- Message - The message the purchaser left for the recipient, if any
- Terms - The terms and conditions on the gift card
- ArtworkUrl - The URL of the artwork selected by the purchaser
- ShowBalance - A boolean indicating whether to display the current balance
- Balance - A string value representing a single gift card's remaining balance (i.e. "$50" or "5 units")
- InitialBalance - A decimal value representing a single gift card's initial balance (if currency backed)
- RemainingBalance - A decimal value representing a single gift card's current balance (if currency backed)
- InitialUnits - An integer value representing a single gift card's initial unit balance (if unit backed)
- RemainingUnits - An integer value representing a single gift card's current unit balance (if unit backed)
- TotalBalance - A string value representing the sum of all gift card remaining balances (i.e. "$150" or "15 units")
- TotalInitialBalance - A decimal value representing the sum of all gift card initial balances (if currency backed)
- TotalRemainingBalance - A decimal value representing the sum of all gift card current balances (if currency backed)
- TotalInitialUnits - An integer value representing the sum of all gift card initial unit balances (if unit backed)
- TotalRemainingUnits - An integer value representing the sum of all gift card current unit balances (if unit backed)
- CanBeRedeemed - A boolean indicating whether this gift card can be redeemed. We use the balance, status, and validity dates to determine this.
- BackingType - The backing type of the gift card. Will be one of "Currency" or "Units".
- ExpiresOn - A formatted string in "dd MMMM yyyy" format representing the expiry date of the gift card
- ValidFrom - A formatted string in "dd MMMM yyyy" format representing the valid from date of the gift card
- IssuedOn - A formatted string in "dd MMMM yyyy" format representing the date the gift card was issued to the recipient
- ShowIssuedOn - A boolean indicating whether to show the IssuesOn date or not
- IsBarcodeSquare - A boolean indicating whether the barcode is a square format barcode (i.e. a QR code)
- CodesCount - The length of the Codes array
- HasMultipleCodes - A boolean value indicating if CodesCount > 1
- Codes - An array of codes & barcodes for this gift card. Explanation below
CustomFields - An array of custom fields you asked us to capture during checkout, with the following properties per row
- Label - The label of your customer field (i.e. "Phone number")
- Value - The value entered by the purchaser (i.e. 555-456-9841)
Strings - An dictionary of key value pairs with the following keys and values (shown in English), but crucially, are translated into the purchaser's chosen language (or your chosen language, if you do not offer a multi-language checkout)
- To - "To"
- From - "From"
- For - "For"
- Message - "Message"
- Terms - "Terms & Conditions"
- NoMessage - "No message left"
- IssuedOn - "Issued On"
- ValidUntil - "Valid Until"
- ValidFrom - "Valid From"
- Code - "Code"
- Tip - "Tip"
- TipAdded - "A tip was pre-paid by {{Purchaser's Name}} when they bought this gift card"
- Balance - "Balance on {{CurrentDate}}"

Rendering the values in the data model in your template

You can use the Mustache rendering syntax to render any value as follows:

Your {{ SingularNomenclature }} was purchased by {{ PurchaserName }}

Would render something like "Your gift card was purchased by Bob Smith".

To render things like Custom Fields, because they are in an array structure, you have to loop over them like this:

{{ #CustomFields }}
    <div>{{ Label }}</div>
    <div>{{ Value }}</div>
{{ /CustomFields }}

To render Strings, because they are in an dictionary structure, you can access them like this:

<p>{{ Strings.Message }}</p> <!-- Output the string "message" (or translated version) -->
<p>{{ Message }}</p> <!-- Output the message to the recipient -->

Some things to watch out for

Whilst the model is largely self-explanatory, there are 2 things to note:

1) `GiftCards` is an array

An order will contain more than one gift card, so we provide an array of them in the model, which means you have to look over that array, like this:

{{ #GiftCards }} <!-- Loop through the array of gift cards -->
    <P>{{ RecipientName }} bought you a {{ Title }}</P>
{{ /GiftCards }}

2) `Codes` is an array

An individual gift card in the injected model will contain one or more codes because we sometimes group similar gift cards to make the resulting rendered gift card more concise. To achieve this, we collapse multiple similar gift cards into a single entity, and provide an array of codes for the grouped gift card.

We present the model like this, even if we have not collapsed gift cards into a single entity. Typically a model will contain a single gift card, with a single code. But the looping syntax needs to be present regardless:

{{ #GiftCards }} <!-- Loop through the array of gift cards -->
    {{ #Codes }} <!-- Loop through this grouped gift card's codes -->
	<P>{{ Code }}</P>  <!-- Output the code -->
	<img src="{{ BarcodeImageContent }}" height="50"/>  <!-- Render the barcode image -->
    {{ /Codes }}
{{ /GiftCards }}

We do this in the case that someone purchases multiple quantities of the same gift card. When we provide the data model to the template for a rendering request, we will group the codes we've generated onto a single gift card array entity. We do this only for digital gift cards (not print ones) because when a digital gift card is rendered, it is almost certainly viewed on a screen, like a mobile phone or a computer. So a smaller overall rendered gift card is beneficial.

We also provide some aggregate properties on a gift card that represent the sum of balances, as opposed to the individual gift card balance. For example, if there were a grouped gift card with 3 codes, each with $50 balance, the GiftCard. RemainingBalance property would be 50, whereas the GiftCard.TotalRemainingBalance property could be 150.