Browse by Topic

Customizing Gift Certificate Templates

This article covers customizing the design of your store's gift certificates so they match the brand of your store. For information on setting up and managing gift certificates, see Using Gift Certificates.

General Customization

Gift certificates can be customized by going to Storefront Design › Design Options, then clicking MoreGift Certificates.

 

In some versions of the control panel, the gift certificate templates are found under Storefront › Gift Certificates.

There you will see a list of the gift certificate templates available to your customers:

  • Birthday
  • Boy
  • Celebration
  • Christmas
  • General
  • Girl
 

Customization is limited to text and cosmetic design. New gift certificate templates cannot be created, nor can existing templates be deleted.

By default, the gift certificate templates look like this: 

Gift Certificate Examples

Edit any of the templates by clicking ActionEdit. You can then customize the text or table cell properties of each template using the WYSIWYG Editor which appears.

970-wysiwyg.png

All of the gift certificate content is generated by the following variables:

  • %%LNG_GiftCertificate%% — displays the text "Gift Certificate"
  • %%LNG_GiftCertificateCode%% — displays the text "Code"
  • *%%GLOBAL_GiftCertificateCode%% — displays the automatically generated certificate code
  • *%%GLOBAL_GiftCertificateAmount%% — the value of the gift certificate
  • %%GLOBAL_HeaderLogo%% — displays the store name set in Store Settings › Store Profile
  • %%LNG_GiftCertificateTo%% — displays the text "To"
  • %%GLOBAL_GiftCertificateTo%% — displays the name of the gift certificate recipient
  • %%LNG_GiftCertificateFrom%% — displays the text "From"
  • %%GLOBAL_GiftCertificateFrom%% — displays the name of the gift certificate sender
  • %%GLOBAL_GiftCertificateMessage%% — displays the text "Hello, here is a certificate for you!"
  • %%GLOBAL_GiftCertificateExpiryInfo%% — displays the text "Expires on ##/##/####"
  • %%LNG_RedeemGiftCertificate%% — displays the text "Redeem your gift certificate at"

To customize the text generated by these codes, delete the entire variable including the beginning and ending %%, and replace it with the text you'd like to appear instead.

 

Be careful! %%GLOBAL_GiftCertificateCode%% and %%GLOBAL_GiftCertificateAmount%% are essential to gift certificate functionality, so we do not recommend modifying them.

Customizing the Background Image

All gift certificate themes include a default background image. Follow these steps to replace it with a custom image instead.

1. Go to Storefront Content Image Manager , then click the Upload Images… button.

2. Upload the image you'd like to use as the background of your gift certificate.

The default size of the gift certificate image is 560 x 134 px. The image you upload can be any dimension but, it will only show a portion of the image if it is larger than the default size.

3. Go to Storefront Design › Design OptionsMoreGift Certificates.

4. Click ActionEdit to the right of the certificate whose background image you want to customize.

5. Click the Edit HTML Source WYSIWYG icon.

970-edit-html-source.png

6. Locate the code that begins with background: url('https://cdn#.bigcommerce.com/###.gif'), hen using the following format, replace the URL inside of the quotations with the URL for your custom image.
//yourdomain.com/product_images/uploaded_images/image-name.jpg

Example of a custom URL.

7. Click Update, then Save your changes.

To preview your customized gift certificate, click ActionPreview.

To delete the default background image altogether, remove the entire line of code that begins with background: url('https://cdn#.bigcommerce.com/###.gif'), then Save your changes.

Was this article helpful?