Shopify Plus: Loading Giftship’s Features on the Checkout Page
Please note: This is an advanced tutorial, and should be completed by a qualified web developer familiar with HTML and Liquid. If you are not working with a developer, and would like us to handle this for you, we can do so for a flat fee of $400 USD. Payment can be made by navigating to the following url: https://shop.gist-apps.com
A quote can be provided for any additional customizations.
If you are using Shopify Plus, and would like Giftship’s cart features to load on the checkout page instead, please follow the below steps:
- Navigate to your checkout.liquid file within your theme’s assets directory.
- Copy and paste the following code directly above the closing </head> html tag, ensuring to replace your-store.myshopify.com with your unique myshopify.com url.
<script> var Shopify = Shopify || {}; Shopify.shop = "your-store.myshopify.com"; // <--- Edit this Shopify.locale = Shopify.Checkout.locale === "en-US" ? "en" : Shopify.Checkout.locale || "en"; </script> <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> <script type="text/javascript" src="https://cdn.giftship.app/build/storefront/giftship.js" defer=""></script> <link rel="stylesheet" type="text/css" href="https://cdn.giftship.app/build/storefront/giftship.css">
- Copy and paste the following code right above the closing </body> html tag
<!-- This code adds the Giftship message feature to the checkout page --> <script> (function(){ var GSE={ init: function(){ this.events(); }, selectors: { shipping_form: '[data-shipping-address]', }, elements: { gs_location_change: `<div id="gsAppContainer" class="gs__app-container"></div>`, cart_attributes: ` <div> {% for attribute in checkout.attributes %} <input type="hidden" class="checkout__attributes" name="checkout[attributes][{{ attribute.first }}]" value="{{ attribute.last }}"/> {% endfor %} </div> ` }, events: function(event){ document.addEventListener('page:load', GSE.handlers.handleLoad); document.addEventListener('page:change', GSE.handlers.handleLoad); document.addEventListener('giftship.loaded', GSE.handlers.handleAfterLoad); }, handlers: { handleLoad: function(event) { if(Shopify.Checkout.step === 'contact_information') { GSE.f.insertGiftshipContainer(); // Insert Giftship before attributes, so attributes load above in the document GSE.f.insertAttributes(); GSE.f.initializeGiftship(); }; }, handleAfterLoad: function(event){ GSE.f.renameInputs(); GSE.f.populateValues(); } }, f: { /** * Initializes Giftship on the checkout page */ initializeGiftship: function(){ Gs.$ = window.Checkout.$; Gs.elements = Gs.elements || {}; Gs.state.page_type = 'cart'; Gs.drawer.init(Gs.$); }, /** * Insert checkout attributes elements */ insertAttributes: function() { const form = document.querySelector(GSE.selectors.shipping_form); const node = new DOMParser().parseFromString(GSE.elements.cart_attributes, "text/html").body.firstElementChild; form.prepend(node); }, /** * Inserts the Giftship message feature into the shipping form */ insertGiftshipContainer: function(){ const form = document.querySelector(GSE.selectors.shipping_form); const node = new DOMParser().parseFromString(GSE.elements.gs_location_change, "text/html").body.firstElementChild; form.prepend(node); }, /** * Makes necessary adjustments to the Giftship attributes to the allow them to be captured */ renameInputs: function() { const t = Gs.settings.translations; const message = document.querySelector(`[name="attributes[${t.message.message_label}]"]`); const date = document.querySelector(`[name="attributes[${t.datepicker.button_text}]"]`); const to = document.querySelector(`[name="attributes[${t.message.to_label}]"]`); const from = document.querySelector(`[name="attributes[${t.message.from_label}]"]`); if(message !== null) message.setAttribute('name', `checkout[attributes][${t.message.message_label}]`); if(date !== null) date.setAttribute('name', `checkout[attributes][${t.datepicker.button_text}]`); if(to !== null) to.setAttribute('name', `checkout[attributes][${t.message.to_label}]`); if(from !== null) from.setAttribute('name', `checkout[attributes][${t.message.from_label}]`); }, /** * Populates Giftship values from hidden inputs */ populateValues: function(){ const hiddenAttributes = document.querySelectorAll('.checkout__attributes'); if (!hiddenAttributes || !hiddenAttributes.length) return; hiddenAttributes.forEach((input, index) => { const matchingInputs = document.querySelectorAll(`[name="${input.name}"]`); const giftshipInput = matchingInputs[1] || null; if (!giftshipInput) return; giftshipInput.value = input.value; }); }, } }; GSE.init(); })(); </script> <!-- Adds styling to the Giftship Message feature to match the rest of the form --> <style> #gsAppContainer .gs__wrapper, .gsAppContainer .gs__wrapper, .gs__app-container .gs__wrapper { width: 100% !important; } .gs__row input.gs__delivery-date:focus { color: rgba(0,0,0,.95); border-radius: 0.28571429rem; outline: none; border-color: #323232; box-shadow: 0 0 0 1px #323232; } .gs__row input[type=text]:not(.gs__delivery-date):focus, .gs__row input[type=email]:focus, .gs__row input[type=number]:focus, .gs__row input[type=phone]:focus, .gs__row textarea:focus { color: rgba(0,0,0,.95); border-radius: 0.28571429rem; outline: none; border-color: #323232; box-shadow: 0 0 0 1px #323232; } .gs__checkbox-label input { width: 18px; height: 18px; } .gs__checkbox-label input:checked~.gs__custom-checkbox { background-color: #000; border-radius: 5px padding: 0; line-height: 0; border: none !important; } .gs__checkbox-label .gs__custom-checkbox { width: 18px; height: 18px; border: 1px solid #d9d9d9; } .gs__checkbox-label input:checked~.gs__custom-checkbox::before { width: 18px; height: 18px; } .gs__checkbox-label input:checked~.gs__custom-checkbox::after { left: 6px; top: 3px; width: 4px; height: 8px; border: solid #ffffff; border-width: 0 1px 1px 0; } .gs__checkbox-label { font-size: 14px; } #gsAppContainer, .gsAppContainer { margin: 0px 0 30px; } .gs__checkbox-label { line-height: 18px; padding-left: 30px; } </style>
Can't find the answer in our documentation?
Contact Support Configuring Gift Messages 🏷️
Printing Gift Messages 🏷️
Conditionally Hide the Gift Message Option on Product Pages 🏷️
Editing a Gift Message After an Order Has Been Placed 🏷️
How to view orders that contain Gift Messages or Delivery Dates 🏷️
Use Shopify’s Packing Slip to Print Gift Messages 🏷️
How to Charge for a Gift Message 🏷️
Remove Name Attributes from Gift Messages 🏷️
How to Display a Gift Message on Your Cart Page When it was Added on Your Product Page 🏷️
Change the location of where the gift message appears on your orders to the order Notes section 🏷️
Ensure empty values are not submitted
Shopify Plus: Loading Giftship’s Features on the Checkout Page