-
-
Save alightedlamp/63327ddd9114e20f4b7bfc6e930e8136 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment