Quick & Easy Custom Gift Certificate Template

To quickly and easily create a custom gift certificate template, take the basic layout that you would like for your gift certificate order page and follow the steps below, pasting the code found below, into your layout.

  • Start by creating the basic layout that you want for your gift certificate order page. The Quick & Easy template options work best if you have one main cell in your design where you would like ShopSite to put the gift certificate order information, and the rest of your template, such as the header, left links, and footer remain the same. Three examples of basic page layouts are shown below. The gray areas are where the information is hard coded, and the white area is where the code from this tutorial will be inserted.
Basic Page Layout ExampleBasic Page Layout Example 2Basic Page Layout Example 3

  • Add [-- DEFINE Gift_Certificate --] to the top of your template (above the DOCTYPE and HTML tags).

  • Add the following to the HEAD section of your template.

    <script type="text/javascript" language="JavaScript">
    <!--
    [-- SC_JAVASCRIPT --]
    // -->
    </script>

    [-- INCLUDE sc_giftcert.css process --]

  • Next copy the code from below and paste it into your main cell. In the examples shown above, the main cell would be the white space in the middle.

    [-- GiftCertHeader --]
    [-- ShopSiteMessages --]
    [-- SC_FORM --]

    [-- GiftCertInstruction --]
    <center>
    [-- GiftCertNumberAmount --]
    [-- GiftCertEmailMail --]
    [-- GiftCertToFromMsg --]
    [-- Store.GiftCert_Policy --]<br>
    [-- GiftCertPolicy --]
    [-- BUTTON BuyGiftCertificate --]
    </center>
    </form>
    [-- GiftCertFooter --]

  • Add the following to the bottom of your template, below the /HTML tag.

    [-- END_DEFINE Gift_Certificate --]

    [-- DEFINE GIFT_CERTIFICATE_EMAIL --]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
    <html>
    <head><title>[-- STORE.SC_GiftCertificate Remove_HTML --]</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    [-- INCLUDE sc_shipping.css process --]
    </head>
    <body>
    <center>
    [-- Store.Name --]<br>
    [-- Store.GiftCert_For --] <b>[-- GiftCert_Amount --]</b><p>
    <table>
    <tr><td class="cert_text">
    [-- Store.GiftCert_To --]
    </td><td class="cert_value">
    [-- GiftCert_To --]
    </td></tr>

    <tr><td class="cert_text">
    [-- Store.GiftCert_From --]
    </td><td class="cert_value">
    [-- GiftCert_From --]
    </td></tr>

    [-- IF GiftCert_Message --]
    <tr><td class="cert_text">
    [-- Store.GiftCert_Message --]
    </td><td class="cert_value">
    [-- GiftCert_Message --]
    </td></tr>
    [-- END_IF --]

    </table>
    [-- STORE.GiftCert_ToRedeem --]<br>
    <a href="[-- MyStoreURL --]">
    [-- IF Store.Name --]
    [-- Store.Name --]
    [-- ELSE --]
    [-- MyStoreURL --]
    [-- END_IF --]
    </a><p>
    [-- STORE.GiftCert_OnOrderScreen --]<br>
    [-- Store.GiftCert_Number --]: <b>[-- GiftCert_Number --]</b> - [--Store.GiftCert_PIN --]: <b>[-- GiftCert_PIN --]</b><br>
    Expiration Date: [-- GiftCert_Date --]<br>
    </center>
    </body>
    </html>
    [-- END_DEFINE GIFT_CERTIFICATE_EMAIL --]

    [-- DEFINE GIFT_CERTIFICATE_MAIL --]
    [-- IF FIRST_MAIL_GIFTCERT --]
    <html>
    <head>
    <style media="print"> .noprint { display: none } </style><META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <title>[-- STORE.SC_GiftCertificate Remove_HTML --]</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    </head>
    <body bgcolor="#ffffe0">
    [-- END_IF --]
    <center>
    [-- Store.Name --]<br>
    [-- Store.GiftCert_For --] <b>[-- GiftCert_Amount --]</b><p>
    <table>
    <tr><td class="cert_text">
    [-- Store.GiftCert_To --]
    </td><td class="cert_value">
    [-- GiftCert_To --]
    </td></tr>
    <tr><td class="cert_text">
    [-- Store.GiftCert_From --]
    </td><td class="cert_value">
    [-- GiftCert_From --]
    </td></tr>
    [-- IF GiftCert_Message --]
    <tr><td class="cert_text">
    [-- Store.GiftCert_Message --]
    </td><td class="cert_value">
    [-- GiftCert_Message --]
    </td></tr>
    [-- END_IF --]
    </table>
    [-- STORE.GiftCert_ToRedeemCutPaste --]:<br>
    [-- MyStoreURL --]<p>
    [-- STORE.GiftCert_OnOrderScreen --]<br>
    [-- STORE.GiftCert_Number --]: <b>[-- GiftCert_Number --]</b> - [-- Store.GiftCert_PIN --]: <b>[-- GiftCert_PIN --]</b><br>
    Expiration Date: [-- GiftCert_Date --]<br>
    [-- IF LAST_MAIL_GIFTCERT --]
    <p>
    [-- SC_FORM --]
    </center>
    </html>
    [-- ELSE --]
    <p class="noprint">----------------------------------------------------------</p>
    <p>
    </center>
    <P STYLE="{page-break-after:always;}"> </P>
    [-- END_IF --]
    [-- END_DEFINE GIFT_CERTIFICATE_MAIL --]

  • Last, upload your template into your ShopSite store. In your ShopSite store, go to Merchandising > Custom Templates > Advanced > Upload Template. Upload your custom gift certificate template. You would then need to go to Merchandising > Gift Certificates > Configure, and select your custom template from the template pull down menu.
Done! Check Out Other Template Tips