If you are selling gift cards, Cratejoy will automatically generate a page on your website where a customer's gift card can be accessed. This is a page which includes the gift card image, the unique gift card code and balance, and a gift message and sender's name if applicable.
While this page cannot be directly edited through the designer, it is possible to create your own custom gift card page through the Code Editor.
To do so, open the Code Editor and create a new HTML file within the /html directory with the filename gift_card.html, and paste the following code:
| <!DOCTYPE HTML> | |
| <html lang="en"> | |
| <head> | |
| <title>{{ store.name }} - Gift Card</title> | |
| <style type="text/css"> | |
| @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300); | |
| body { | |
| background-color: white; | |
| font-family: 'Open Sans', sans-serif; | |
| margin: 0; | |
| } | |
| .main-container { | |
| width: 600px; | |
| margin: 0 auto; | |
| text-align: center; | |
| } | |
| .gift-card-img img { | |
| max-width: 100%; | |
| } | |
| .gift-card-header { | |
| margin: 45px 40px; | |
| font-size: 28px; | |
| color: black; | |
| } | |
| .gift-card-header strong { | |
| font-weight: normal; | |
| color: #74BC90; | |
| } | |
| .gift-card-code { | |
| margin: 0 40px; | |
| padding: 18px 0; | |
| background-color: #FAFAFA; | |
| border: 1px solid #eee; | |
| font-weight: 300; | |
| font-size: 28px; | |
| color: #ABABAB; | |
| } | |
| .gift-card-use { | |
| font-size: 14px; | |
| color: #4A4A4A; | |
| margin: 45px auto; | |
| } | |
| .gift-card-cta { | |
| display: inline-block; | |
| margin: 0 auto; | |
| background-color: #343030; | |
| padding: 14px 50px 16px; | |
| font-size: 22px; | |
| color: #fff; | |
| text-decoration: none; | |
| } | |
| .gift-card-footer { | |
| margin: 45px auto; | |
| } | |
| .gift-card-footer img { | |
| max-width: 100%; | |
| } | |
| .gift-card-url { | |
| text-align: center; | |
| display: none; | |
| } | |
| .gift-card-gift-message { | |
| margin: 20px auto; | |
| } | |
| @media (max-width: 600px) { | |
| .main-container { | |
| width: 100%; | |
| } | |
| .gift-card-img img { | |
| width: 100%; | |
| } | |
| .gift-card-header { | |
| margin-left: 20px; | |
| margin-right: 20px; | |
| } | |
| .gift-card-code { | |
| margin-left: 20px; | |
| margin-right: 20px; | |
| } | |
| .gift-card-footer img { | |
| width: 100%; | |
| } | |
| } | |
| </style> | |
| <style media="print" type="text/css"> | |
| .gift-card-cta { | |
| display: none; | |
| } | |
| .gift-card-url { | |
| margin-top: 10px; | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="main-container"> | |
| <div class="gift-card-img"><img src="{{ gift_card.image_url }}"></div> | |
| {% if gift_card.cart_product %} | |
| {% set order = gift_card.cart_product.order %} | |
| {% if order.order_gift_info %} | |
| {% set ogi = order.order_gift_info %} | |
| {% if ogi.gift_message %} | |
| <div class="gift-card-gift-message"> | |
| <p>{{ ogi.gift_message }}</p> | |
| <p class="sender">— {{ order.customer.name }}</p> | |
| </div> | |
| {% endif %} | |
| {% endif %} | |
| {% endif %} | |
| <div class="gift-card-header">Your <strong>{{ gift_card.original_balance | currency }}</strong> gift card is ready to use!</div> | |
| <div class="gift-card-code"> | |
| <div class="gift-card-code-inner"> | |
| {{ gift_card.code }} | |
| </div> | |
| </div> | |
| <p class="gift-card-use">Use this code during checkout to redeem your gift card balance.</p> | |
| <div> | |
| <a href="http://{{ store | store_domain }}" class="gift-card-cta">Start Shopping</a> | |
| </div> | |
| <div class="gift-card-footer"> | |
| {% if store.settings.logo_url %} | |
| <img src="{{ store.settings.logo_url }}"> | |
| {% else %} | |
| <a href="http://{{ store | store_domain }}">{{ store.name }}</a> | |
| {% endif %} | |
| <div class="gift-card-url">http://{{ store | store_domain }}</div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
view rawgift_card.html hosted with ❤ by GitHub
This is the default code that Cratejoy uses to create a unique gift card page.
Once created within your store's code editor, it can be customized as you see fit and will overwrite the default Cratejoy gift card page.