Big Commerce How To’s

How to Change the Background in your Big Commerce Gift Certificates

First thing you need to do is decide which image you are going to want to use. The background images they use vary in sizes depending on the Gift Certificate Template. We decided to go with a full size picture for the Gift Cert at 560×197 and remove any boarders or fills they used in their table.

Second Take your picture and upload it to Big Commerce. You can do this two ways – FTP or through image manager(FYI… this is a newer feature and if you are using a user account with admin privileges created before the upgrade you will have to give yourself access under your user accounts.) The image manager is probably easiest. Just click on the Upload Images and add your pick.

If you decide to use FTP put your image in the” product_images/uploaded_images” section.

Make sure you have enabled your Gift Certificates option under tools. Otherwise you can’t access the gift certificates under Store Design

Click Edit next to the GC you want to edit. It will open the WYSIWYG editor. Click on HTML to see the code, because you can’t just click on the background image in the WYSIWYG editor. Find the text below and insert the location of your picture you uploaded. Make sure you change the highlighted text to your store and your pic.

.GiftCertificate {

border: 1px solid #ddd;

width: 560px;

border-collapse: collapse;

margin: auto;

background: url(‘https://store-e7649.mybigcommerce.com/product_images/uploaded_images/christmas-02.jpg‘) right 0 no-repeat;

}

***Important note*** do not adjust your table in the WYSIWYG editor it will look off. Click on the preview button to see what the GC will look like.

If you want to change to boarder on the top and bottom change these two areas or delete the color code next to Background in the HTML

This one for the TOP Bar:

.GiftCertificateHeader {

background: #CDF8FF;

padding: 4px;

}

And this one for the Bottom Bar:

.GiftCertificateShopNow {

text-align: right;

padding-bottom: 5px;

padding-top: 5px;

background: #CDF8FF;

font-weight: bold

}

I don’t remember which one has it, but one or more of the GC’s has white text. You should be able to change the color of the text in the WYSIWYG editor.

This is what my final code looks like for my General Gift Cert. I removed the border in mine:

<p>

<meta http-equiv=”Content-Type” content=”text/html; charset=%%GLOBAL_CharacterSet%%” />

</p>

<style type=”text/css”><!–

body, td {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

color: #000;

}

.GiftCertificate {

border: 1px solid #ddd;

width: 560px;

border-collapse: collapse;

margin: auto;

background: url(‘https://store-e7649.mybigcommerce.com/product_images/uploaded_images/babyshower 02.jpg’) right no-repeat;

}

.GiftCertificateHeader {

background: ;

padding: 4px;

}

.GiftIntro {

font-size: 16px;

font-weight: bold;

}

.GiftCertificateCode {

float: right;

text-align: right;

width: 200px;

font-size: 14px;

}

#GiftCertificateCode {

font-weight: bold;

}

.GiftCertificateBody, .GiftCertificateDetails, .GiftCertificateMessage, .GiftCertificateShopNow {

padding: 10px;

}

.GiftCertificateMessage, .GiftCertificateShopNow {

padding-top: 0;

}

.GiftCertificateBody {

height: 80px;

}

.StoreInfo, .StoreInfo a, h1, h1 a {

color: #000;

margin: 0;

padding: 0;

text-decoration: none;

}

h1 {

font-size: 38px; letter-spacing: -2px; font-weight: normal; margin: 0px; font-family: font, Helvetica, Arial, sans-serif;

}

#GiftCertificateAmount {

font-weight: bold;

float: right;

font-size: 40px;

}

.GiftCertificateFrom {

float: right;

text-align: right;

}

#GiftCertificateTo, #GiftCertificateFrom {

font-weight: bold;

}

.GiftCertificateShopNow {

text-align: right;

padding-bottom: 5px;

padding-top: 5px;

background: ;

font-weight: bold

}

.GiftCertificateShopNow a {

color: #000;

font-weight: normal;

}

.GiftCertificateExpiry {

float: left;

font-size: 11px;

font-weight: normal;

}

–></style>

<table class=”GiftCertificate”>

<tbody>

<tr>

<td class=”GiftCertificateHeader”>

<div class=”GiftCertificateCode”>%%LNG_CertificateCode%%: <span id=”GiftCertificateCode”>%%GLOBAL_GiftCertificateCode%%</span></div>

<div class=”GiftIntro”>%%LNG_GiftCertificate%%</div>

</td>

</tr>

<tr>

<td class=”GiftCertificateBody”>

<div id=”GiftCertificateAmount”>%%GLOBAL_GiftCertificateAmount%%</div>

<div class=”StoreInfo”>%%GLOBAL_HeaderLogo%%</div>

</td>

</tr>

<tr>

<td class=”GiftCertificateDetails”>

<div class=”GiftCertificateFrom”>%%LNG_CertificateFrom%%: <span id=”GiftCertificateFrom”>%%GLOBAL_GiftCertificateFrom%%</span></div>

<div class=”GiftCertificateTo”>%%LNG_CertificateTo%%: <span id=”GiftCertificateTo”>%%GLOBAL_GiftCertificateTo%%</span></div>

</td>

</tr>

<tr>

</tr>

<tr>

<td class=”GiftCertificateMessage”>

<div id=”GiftCertificateMessage”>%%GLOBAL_GiftCertificateMessage%%</div>

</td>

</tr>

<tr>

<td class=”GiftCertificateShopNow”>

<div class=”GiftCertificateExpiry”>%%GLOBAL_GiftCertificateExpiryInfo%%</div>

%%LNG_RedeemGiftCertificateAt%% <a href=”http://www.twinkiebabies.com/”>http://www.TWINkieBabies.com/</a></td>

</tr>

</tbody>

</table>

This is what it looks like in the Preview