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:

  1. Navigate to your checkout.liquid file within your theme’s assets directory.
  2. 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">
  1. 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