Customizing Gift Certificate Templates

These instructions apply to BigCommerce themes that have not been customized. The BigCommerce Support Team may not be able to assist with issues that occur after applying them to a previously customized theme. As always, we recommend backing up your current theme customizations before making any changes.

Don't feel comfortable adjusting your design or want to work with an expert? Check out our BigCommerce Partner Directory or ask your question in the BigCommerce Community Design Group for assistance. Due to our Design Policy, our Techincal Support is unable to edit code or make design changes.

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

General Customization

Gift certificates can be customized by going to Storefront Design › Design Options, then clicking MoreGift Certificates. There you will see a list of the gift certificate templates available to your customers.

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

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 ContentImage 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 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?