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.
Gift certificates can be customized by going to Storefront Design › Design Options, then clicking More › Gift 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:
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:
Edit any of the templates by clicking Action › Edit. You can then customize the text or table cell properties of each template using the WYSIWYG Editor which appears.
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 Options › More › Gift Certificates.
4. Click Action › Edit to the right of the certificate whose background image you want to customize.
5. Click the Edit HTML Source WYSIWYG icon.
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.
7. Click Update, then Save your changes.
To preview your customized gift certificate, click Action › Preview.
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.