How to add recipient fields to your gift card products in Shopify using the old Debut Theme (and making it work!)
Shopify (finally!) released the ability to add in recipient card details for Gift Cards so you can send the cards directly from the store to the intended recipient. See here for their instructions on how to do so. The problem is that the functionality only really works with Shopify 2.0 themes like Dawn, and NOT with themes like Debut.
Thankfully you can code it up pretty simply and allow the same functionality on your old themes like Debut as you can on the new ones.
You do need a bit of experience managing Liquid files, but it should be pretty straightforward, even for newbies.
Note: This code is provided as is. Do not message me asking me for fixes. It works on my site, which is on the Debut theme. If you do have questions, you can contact me through the site Contact Us form, but if its a "How do I fix this?" question, then I promise not to respond!
Also, if you like this functionality, I'd appreciate you perhaps buying one of our books as thanks!
You can also see how our Gift Cards work here.
INSTRUCTIONS TO ADD GIFT CARD RECIPIENT FUNCTIONALITY TO YOUR DEBUT OR OLD SHOPIFY THEMED WEBSITE
1. Create a Gift Card Product on Shopify: See the instructions over here that should cover how to do so: https://help.shopify.com/en/manual/products/gift-card-products/add-update-gift-card-products. Set it up as needed with all the details you want.
2. Edit the "product-template.liquid" section: Open the code editor, find this file and include the code below into that section. I've included the code just above it in the snippet below so you can find where to put it, but please only add in the gift-card code (not the code above it).
| {% if section.settings.show_quantity_selector %} | |
| <div class="product-form__controls-group"> | |
| <div class="product-form__item"> | |
| <label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label> | |
| <input type="number" id="Quantity-{{ section.id }}" | |
| name="quantity" value="1" min="1" pattern="[0-9]*" | |
| class="product-form__input product-form__input--quantity" data-quantity-input | |
| > | |
| </div> | |
| </div> | |
| {% endif %} | |
| {% comment %} | |
| #################################### | |
| Gift card code to add to the product.customizable section of the Shopify theme. | |
| Place this code just below the quantity selector code above | |
| (I've just included it so you know where it should go) | |
| #################################### | |
| {% endcomment %} | |
| {%- if product.gift_card? -%} | |
| {%- render 'gift-card-form', product: product, form: form, section: section -%} | |
| {%- endif -%} | |
3. Add a new snippet called "gift-card-form.liquid": In the code editor create a new snippet and name it as above. Make sure the name matches the name you put in the product-template.liquid file above. Copy and paste the code below into that file and hit Save.
The code below has been carefully written to ensure it shouldn't interfere with any other styling you may have on your site.
| <style> | |
| .gift-card-form-container { | |
| background: #ffffff; | |
| padding: 10px; | |
| border-radius: 10px; | |
| /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);*/ | |
| width: 100%; | |
| max-width: 100%; | |
| } | |
| .gift-card-form-container h2 { | |
| text-align: center; | |
| margin-bottom: 20px; | |
| } | |
| .gift-card-form-group { | |
| margin-bottom: 15px; | |
| } | |
| .gift-card-form-group label { | |
| display: block; | |
| margin-bottom: 5px; | |
| font-weight: bold; | |
| } | |
| .gift-card-form-group input, | |
| .gift-card-form-group textarea { | |
| width: 100%; | |
| padding: 10px; | |
| border: 1px solid #ccc; | |
| border-radius: 5px; | |
| font-size: 14px; | |
| } | |
| .gift-card-form-group textarea { | |
| resize: none; | |
| } | |
| .gift-card-form-container button { | |
| background-color: #007BFF; | |
| color: white; | |
| border: none; | |
| padding: 10px; | |
| border-radius: 5px; | |
| width: 100%; | |
| cursor: pointer; | |
| font-size: 16px; | |
| } | |
| .gift-card-form-container button:hover { | |
| background-color: #0056b3; | |
| } | |
| .gift-card-error { | |
| color: red; | |
| font-size: 12px; | |
| margin-top: 5px; | |
| display: none; | |
| } | |
| .gift-card-char-count { | |
| font-size: 12px; | |
| color: #555; | |
| text-align: right; | |
| } | |
| .gift-card-hidden { | |
| display: none; | |
| } | |
| /* Checkbox and label inline styling */ | |
| .gift-card-checkbox-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; /* Spacing between checkbox and label */ | |
| } | |
| .gift-card-checkbox-group input[type="checkbox"] { | |
| margin: 0; | |
| width: auto; | |
| } | |
| .gift-card-checkbox-group label { | |
| margin: 0; | |
| font-weight: normal; | |
| } | |
| /* Instruction styling */ | |
| .gift-card-instruction { | |
| font-size: 13px; | |
| color: #555; | |
| font-style: italic; | |
| margin-bottom: 5px; | |
| } | |
| </style> | |
| <div class="gift-card-form-container"> | |
| <recipient-form | |
| class="recipient-form" | |
| data-section-id="{{ section.id }}" | |
| data-product-variant-id="{{ product.selected_or_first_available_variant.id }}" | |
| > | |
| <!-- Checkbox --> | |
| <div class="gift-card-form-group gift-card-checkbox-group"> | |
| <input type="checkbox" id="gift-card-send-checkbox" name="properties[__shopify_send_gift_card_to_recipient]"> | |
| <label for="gift-card-send-checkbox">Send the gift card to a friend</label> | |
| </div> | |
| <!-- Hidden Fields Section --> | |
| <div id="gift-card-fields" class="gift-card-hidden"> | |
| <!-- Recipient Name --> | |
| <div class="gift-card-form-group"> | |
| <label for="gift-card-recipient-name">Recipient Name:</label> | |
| <input type="text" id="gift-card-recipient-name" name="properties[Recipient name]" placeholder="Enter recipient's name" required> | |
| <small class="gift-card-error" id="gift-card-name-error">Name is required and must be at least 2 characters.</small> | |
| </div> | |
| <!-- Recipient Email --> | |
| <div class="gift-card-form-group"> | |
| <label for="gift-card-recipient-email">Recipient Email:</label> | |
| <input type="email" id="gift-card-recipient-email" name="properties[Recipient email]" placeholder="Enter recipient's email" required> | |
| <small class="gift-card-error" id="gift-card-email-error">Enter a valid email address.</small> | |
| </div> | |
| <!-- Recipient Message --> | |
| <div class="gift-card-form-group"> | |
| <label for="gift-card-recipient-message">Recipient Message:</label> | |
| <div class="gift-card-instruction">Optional</div> | |
| <textarea id="gift-card-recipient-message" name="properties[Message]" placeholder="Write a message (max 200 characters)" rows="4" maxlength="200"></textarea> | |
| <div class="gift-card-char-count" id="gift-card-char-count">200 characters remaining</div> | |
| <small class="gift-card-error" id="gift-card-message-error">Message cannot exceed 200 characters.</small> | |
| </div> | |
| <!-- Send Date --> | |
| <div class="gift-card-form-group"> | |
| <label for="gift-card-send-date">Date to send on:</label> | |
| <div class="gift-card-instruction">Optional. If blank, will be sent immediately</div> | |
| <input type="date" id="gift-card-send-date" name="properties[Send on]"> | |
| <small class="gift-card-error" id="gift-card-date-error">Please select a valid date.</small> | |
| </div> | |
| </div> | |
| </recipient-form> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const sendCheckbox = document.getElementById('gift-card-send-checkbox'); | |
| const fieldsContainer = document.getElementById('gift-card-fields'); | |
| const form = document.getElementsByClassName('product-form')[0]; | |
| const nameInput = document.getElementById('gift-card-recipient-name'); | |
| const emailInput = document.getElementById('gift-card-recipient-email'); | |
| const messageInput = document.getElementById('gift-card-recipient-message'); | |
| const dateInput = document.getElementById('gift-card-send-date'); | |
| const nameError = document.getElementById('gift-card-name-error'); | |
| const emailError = document.getElementById('gift-card-email-error'); | |
| const messageError = document.getElementById('gift-card-message-error'); | |
| const dateError = document.getElementById('gift-card-date-error'); | |
| const charCount = document.getElementById('gift-card-char-count'); | |
| // Function to toggle field activation | |
| const toggleFields = (activate) => { | |
| nameInput.disabled = !activate; | |
| emailInput.disabled = !activate; | |
| messageInput.disabled = !activate; | |
| dateInput.disabled = !activate; | |
| }; | |
| // Initial state | |
| toggleFields(false); | |
| // Toggle hidden fields and activation | |
| sendCheckbox.addEventListener('change', () => { | |
| const isChecked = sendCheckbox.checked; | |
| fieldsContainer.classList.toggle('gift-card-hidden', !isChecked); | |
| toggleFields(isChecked); | |
| }); | |
| // Real-time character countdown for message | |
| messageInput.addEventListener('input', function () { | |
| const remaining = 200 - this.value.length; | |
| charCount.innerText = `${remaining} characters remaining`; | |
| }); | |
| // Form validation on submit | |
| form.addEventListener('submit', (e) => { | |
| if (!sendCheckbox.checked) return; | |
| let isValid = true; | |
| // Validate name | |
| if (nameInput.value.trim().length < 2) { | |
| nameError.style.display = 'block'; | |
| isValid = false; | |
| } else { | |
| nameError.style.display = 'none'; | |
| } | |
| // Validate email | |
| const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |
| if (!emailRegex.test(emailInput.value)) { | |
| emailError.style.display = 'block'; | |
| isValid = false; | |
| } else { | |
| emailError.style.display = 'none'; | |
| } | |
| // Validate message | |
| if (messageInput.value.trim().length > 200) { | |
| messageError.style.display = 'block'; | |
| isValid = false; | |
| } else { | |
| messageError.style.display = 'none'; | |
| } | |
| // Validate date (only if a value is entered) | |
| if (dateInput.value) { | |
| const today = new Date(); | |
| const selectedDate = new Date(dateInput.value); | |
| today.setHours(0, 0, 0, 0); // Remove time from today's date for comparison | |
| if (selectedDate < today) { | |
| dateError.textContent = 'The selected date cannot be in the past.'; | |
| dateError.style.display = 'block'; | |
| isValid = false; | |
| } | |
| // Check if the date is more than 90 days in the future | |
| else { | |
| const maxDate = new Date(today); | |
| maxDate.setDate(maxDate.getDate() + 90); // Add 90 days to today's date | |
| if (selectedDate > maxDate) { | |
| dateError.textContent = 'The selected date cannot be more than 90 days in the future.'; | |
| dateError.style.display = 'block'; | |
| isValid = false; | |
| } else { | |
| dateError.style.display = 'none'; | |
| } | |
| } | |
| } else { | |
| dateError.style.display = 'none'; | |
| } | |
| if (!isValid) { | |
| e.preventDefault(); | |
| } | |
| }); | |
| }); | |
| </script> | |
4. That's it!: You can of course style your form fields and the page as needed. The gift card code has error checking to ensure that all form-fields are compliant with Shopify's requirements for sending gift cards.
Once a user adds a gift card to their cart and purchases it, Shopify will automatically send the gift card to the recipient based on the information they provided!
If you liked this functionality, I'd appreciate you perhaps buying one of our books as thanks!
Who Will You Make a Book For Today?
General Questions
Manimal Tales is a publisher of beautifully illustrated personalized books. We have personalized books for children and adults. From birthday books to new baby tales, and from bedtime stories to ABC books, we have custom books for all occasions!
We even offer PhotoStories, our personalized picture books with photos.
At Manimal Tales, we fervently believe every child should be the hero of their own story!
Personalized books (or custom books as they are sometimes referred to) allow the reader to become the hero of the story - literally.
The main character in the story is the reader / receiver of the book, and is represented by an avatar that looks like them. There are usually lots of additional personalized details printed in the stories, including the receiver's name, age, family members and more.
Our PhotoStories offer a whole new level of personalization by allowing you to add your own photos into the story and have them printed out with the book.
Browse through our collection of custom books to see which ones work for your loved ones!
It's super easy to personalize your own book!
Browse through our collection of personalized stories and select the titles you want. On the product page, add the details required to personalize the book (name, age, family members, photos etc.). You can then preview the entire book before you buy, so you know exactly what you're going to get!
Once you're satisfied, add the book to your cart, enter your payment details and your unique, one-of-a-kind personalized book will arrive on your doorstep in 6 to 9 days!
The short answer is that it depends on the personalized book title in question!
All books will have your loved one as the main protagonist and their name will be printed on the book cover as well as in the story.
In some of our books like Dreamland and What Will I Be? the (the An ABC Story) your loved one's name is printed on every page.
In our Manimal Tales series, in addition to your child's name, you can select an avatar that looks like your child.
In our custom baby tales, Your Baby's Story and Your Baby's Story (Sibling version), you have to enter names and select avatars for the parents and the siblings as well.
And for our PhotoStories, you can further customize the books by uploading and adding your own photos directly into the book. The stories have been written to incorporate the photos as part of the story itself.
Whichever personalized book you do choose, we guarantee your loved one's will love our custom tales just as much as we do!
We have books for all ages and occasions! On the menu bar at the top of the page you can filter through our collections of personalized books by a variety of different criteria.
We have personalized books for:
We also offer custom books with engaging stories about:
- Standing up for your beliefs
We have personalized books across all ages:
Lastly we have our PhotoStories, which allow users to upload photos and have them become part of the story!
Nothing beats getting a book with your name on it!
Personalized books are treasured and loved by all, and make great keepsakes.
We offer custom books for all occasions, ensuring you will always find a book to meet your needs.
You can always reach us by filling out our Contact Form.