Installation Guidelines

To incorporate the GiftOtter App into your theme follow these steps:

Step 1 - Create an asset.

1. Under Themes, click Actions
2. Select Edit code
3. Under Assets, click Add a new asset
4. Rename the CSS file as: giftStyle.scss.liquid View Example
5. Paste below code into file:

            
g-primary-text: #000;
$g-socondary-text: #000;
$body-text-color: #fff;
$g-bg-color: #fff;
$g-button-bg: #000000;
$g-button-text: #fff;
$g-button-hover-bg: #fff;
$g-textbox-border: #c3c3c3;
$highlight-error: #f00;

$g-font: inherit;
pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
}
*{
 font-family: $g-font;
 box-sizing: border-box;   
}
*:focus{
 outline: none;
}
.ga-popup-open{
/*   overflow:hidden; */
}
p{
 word-break: break-all;
}
a{
 &:hover{
   color:$g-primary-text;
   opacity:0.4;
 }
}
.container{
 max-width: 1100px;
 margin: 0 auto;
 padding: 0 15px;
}

.clearfix{
 &:after{
   clear: both;
   display: block;
   content: "";
 }
}
.hide{
 display: none;
}
.ga-btn{
 padding: 10px 15px;
 text-transform: uppercase;
 font-weight: 600;
 background: $g-button-bg;
 color: $g-button-text;
 display: inline-block;
 border: 2px solid $g-button-bg;
 cursor: pointer;
 margin-bottom: 10px;
 &:hover{
   background: transparent;
   color: $g-button-bg;
   opacity:1;
 }
 &.disabled{
   opacity: 0.4;
   pointer-events: none;
 }
}
.ga-btn-ghost{
 background: transparent;
 color: $g-button-bg;

 &:hover{
   background: $g-button-bg;
   color: $g-button-text;
 }
}
.ga-gift-popup-wrapper , .ga-gift-account{
 .btn-wrap{
   .ga-btn{
     margin: 0 5px;
   }
 }
 .ga-next-btn{
   .ga-btn{
     margin-bottom:0;
   }
 }
 .ga-pick-products{
   display: flex;
   flex-wrap: wrap;
   margin: 0 -10px;
   .ga-proddiv{
     width: 25%;
     height: auto;
     position: relative;
     padding: 0 10px;
     .ga-prod-name {
       font-size: 24px;
       color: $g-primary-text;
       letter-spacing: 5px;
       line-height: 34px;
     }
     form{
       height: 100%;
       background-color: $g-bg-color;
     }
     img{
       max-width: 100%;
     }
     .ga-name-container {
       height: 74px;
       background-color: $g-bg-color;
       display: flex;
       width: 100%;
       align-items: center;
       justify-content: center;
       .homepage-gift-content .prod-name {
         text-transform: uppercase;
       }
     }
   }
 }
 [type="radio"] {
   position: absolute;
   display: none;
 }
 [type="radio"] + label {
   position: relative;
   padding-left: 28px;
   cursor: pointer;
   font-size: 16px;
   line-height: 20px;
   display: inline-block;
 }
 [type="radio"]:checked + label:before,
 [type="radio"]:not(:checked) + label:before {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   width: 18px;
   height: 18px;
   border: 2px solid $g-textbox-border;
   border-radius: 100%;
   background: transparent;
 }
 [type="radio"]:checked + label:after {
   content: '';
   width: 10px;
   height: 10px;
   background: $body-text-color;
   position: absolute;
   top: 6px;
   left: 6px;
   border-radius: 100%;
   -webkit-transition: all 0.2s ease;
   transition: all 0.2s ease;
 }
 [type="radio"]:checked + label:after {
   opacity: 1;
 }
 .ga-prod_variant {
   text-align: left;
   padding: 0 0 22px;
   .ga-proddiv-lower{
     padding: 20px;
   }
   .ga-list-variant {
     font-weight: 700;
     color: $g-primary-text;
     margin-bottom: 10px;
     letter-spacing: 1px;
     span{
       font-size: 16px;
     }
     .ga-prod-price-span {
       font-weight: 300;
     }
   }
 }
 .ga-half-width{
   width: 50%;
 }
 .ga-full-width{
   width: 100%;
 }
 .ga-one-third-width{
   width: 33.33%;
 }
}
.ga-center-input{
 line-height: 23px;
}
.ga-proddiv-lower{
 padding: 20px;
}
#ga-add-item-form .ga-c-loader, .ga-add-item-form .ga-c-loader {
 position: absolute;
 right: 30px;
 top: 0;
 bottom: 0;
 margin: auto;
 max-height: 25px;
 display: none;
}
.ga-j_bt{
 position: relative;
 margin-bottom: 20px;
 .ga-btn{
   font-size: 17px;
   color: $g-primary-text;
   letter-spacing: 1px;
   line-height: 1.2;
   text-align: center;
   border-radius: 0;
   text-decoration: none;
   display: block;
   margin: 0;
   background: red;
   font-weight: 500;
   width: 100%;
   background-color: $g-button-bg;
   text-transform: uppercase;
   opacity: 0.5;
   padding: 12px 20px;
 }
}
.ga-information{
 text-align: center;
 .ga-description{
   font-weight: 300;
   font-size: 15px;
   color: $g-primary-text;
   letter-spacing: 1px;
   line-height: 20px;
   margin: auto;
   margin: 0;
 }
}
.ga-gift-popup-wrapper, .ga-claim-popup-wrapper{
 .ga-modal-content{
   border-radius: 0;
   background-color: $g-bg-color;
   padding: 35px 30px;
   -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
 }
 #ga-myModal, #ga-claimModal{

 }
 .ga-modal{
   z-index: 99999;
   padding: 0 !important;
   position: fixed;
   top: 0;
   height: 100%;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.65);
   &.fade.in{
     opacity: 1;
   }
 }
 .ga-modal-dialog{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%) !important;
   -webkit-transform: translate(-50%,-50%) !important;
   -ms-transform: translate(-50%,-50%) !important;
   -o-transform: translate(-50%,-50%) !important;
   border-radius: 0;
   border: none;
   max-width: 870px;
   max-height: 85vh;
   overflow-y: auto;
   width: 90%;
   button.close {
     padding: 0;
     cursor: pointer;
     background: 0 0;
     border: 0;
     -webkit-appearance: none;
   }
   .ga-modal-title {
     color: $g-primary-text;
     letter-spacing: 1px;
     text-transform: uppercase;
     margin-bottom: 0;
     font-weight: 600;
     font-style: normal;
     margin-top: 0;
   }
   .ga-close {
     color: $g-primary-text;
     opacity: 1;
     text-shadow: unset;
     font-size: 36px;
     font-weight: normal;
     position: absolute;
     right: 20px;
     top: 15px;
     -webkit-appearance: none;
     background: transparent;
     border: none;
     cursor: pointer;
     line-height: 1;
   }
   .ga-modal-header{
     padding:0 10px;
     .ga-process-bar {
       margin-top: 0;
       margin-bottom: 10px;
       p {
         display: inline-block;
         text-transform: uppercase;
         position: relative;
         padding-right: 30px;
         margin-right: 10px;
         color: $g-textbox-border;
         font-size: 16px;
         margin-top:16px;
         &.ga-active {
           color: $g-primary-text;
         }
       }
       span {
         position: absolute;
         display: block;
         content: '';
         width: 20px;
         border-top: 2px solid $g-primary-text;
         top: 8px;
         right: 0;
       }
     }
   }
   .ga-modal-body{
     &.ga-three-parts-wrap{
       margin: 0 -15px;
       display: flex;
       flex-wrap: wrap;
       .ga-three-parts{
         width: 33.33%;
         float: left;
         padding: 0 15px;
         display: block;
       }
     }
     .ga-thumbnail{
       text-align: center;
       border: none;
       border-radius: 0;
       padding:  10px;
       height: 100%;
       position: relative;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       box-shadow: 0 9px 25px rgba(0,0,0,0.1);
       .ga-upper-content{
         margin: 15px 0 0 0;       
         img{
           max-width:152px;
         }
         .ga-caption{
           h4 {
             text-transform: uppercase;
             font-weight: 600;
             font-size: 16px;
             letter-spacing: 2px;
             color: $g-primary-text;
           }
           h1{
             font-size: 20px;
             font-weight: 500;
             color: $g-primary-text;
             font-style: italic;
             margin-bottom: 10px;
           }
           .ga-head-body {
             padding:0 10px;
             letter-spacing: 1.1px;
             font-size: 14px;
           }
         }
       }
     }
     .ga-caption-btn {
       .ga-btn {
         letter-spacing: 1.9px;
         padding: 0px 10px;
         width: 150px;
         height: auto;
         line-height: 43px;
         margin: 0 auto;
         text-decoration: none;
         font-weight: 600;

         &:hover{
           background: transparent;
         }
       }
     }
   }
   .ga-modal-footer{
     margin-top:0;
     padding-top: 16px;
   }
 }
}
.ga-cart-btn{
 .ga-btn {
   border-radius: 0;
   text-transform: uppercase;
   font-size: 14px;
   padding: 0px 20px;
   height: auto;
   display: block;
   line-height: 43px;
   background-color: $g-primary-text;
   margin: 0 auto;
   text-decoration: none;
   color: $body-text-color;
   font-weight: 600;
   &:hover{
     background: $body-text-color;
     border: 2px solid $g-primary-text;
     color: $g-primary-text;
   }
 }
}
.ga-link-btn {
 color: $g-button-bg;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 1.9px;
 font-size: 16px;
 padding: 0px 10px;
 height: auto;
 line-height: 43px;
 text-decoration: none;
}
.ga-gift-popup-wrapper{
 .ga-modal-body-2 , .ga-modal-body-3  , .ga-modal-body-4{
   .ga-modal-header{
     padding: 0 10px;
     .ga-process-bar{
       margin-bottom: 0;
     }
   }
 }
}
.ga-gift-immediate-form .ga-input-field , .ga-gift-email-form .ga-input-field , .ga-save-address-form .ga-input-field  {
 padding: 0 10px;
 float: left;
 margin-bottom: 5px;
 label{
   display: block;
   font-size: 14px;
   text-transform: uppercase;
   color: $g-primary-text;
   font-weight: 600;
   letter-spacing: 0.5px;
 }
 span{
   color: $highlight-error;
   font-size: 18px;
   margin-left: 2px;
 }
 [type="text"], textarea , select, [type="email"]{
   width: 100%;
   background-color: $body-text-color;
   font-size: 12px;
   padding: 5px 8px;
   border: 1px solid $g-textbox-border;
   color: $g-primary-text;
   font-weight: 600;
   height: 34px;
   -webkit-appearance: none;
   margin-bottom:0;
   outline: none;
   text-transform: uppercase;
 }
 textarea{
   min-height: 90px;
 }
}
.ga-modal-footer{
 padding: 0 10px;
 margin-top: 24px;
 clear: both;
 display: flex;
 display: -ms-flexbox;
 -webkit-box-pack: justify!important;
 -ms-flex-pack: justify!important;
 justify-content: space-between!important;

 .ga-back-btn{
   cursor: pointer;
   a{
     color: $g-primary-text;
     transition: .4s color;
     font-size: 14px;
     padding-left: 0;
     text-decoration: none;
     display: flex;
     align-items: center;
     text-transform: uppercase;
     &:hover{
       color: $g-button-bg;
     }
   }
   i{
     font-size: 25px;
     margin-right: 10px;
     margin-top: -2px;
   }
 }
}
.ga-modal-body{
 .ga-product-item{
   display: flex;
   align-items: center;
   margin:0 -10px 0;
   .ga-product-img{
     width: 20%;
     padding: 0 10px;
     float: left;
     img{
       max-width: 100%;
     }
   }
   .ga-product-desc{
     width: 80%;
     padding: 0 10px;
     float: left;
     .ga-product-title{
       text-transform: uppercase;
       font-size: 18px;
       margin-bottom: 0;
       margin-top: 0;
       color: $g-primary-text;
       text-decoration: none;
       font-weight: 600;
       margin-bottom: 0;
     }
     .ga-product-price{
       margin: 0;
       color: $g-primary-text;
     }
   }
 }
 .ga-address-content, .ga-gift-message {
   margin-top: 20px;
   border-top: 1px solid $g-textbox-border;
   padding-top: 20px;
 }
 .ga-address-content{
   p{
     text-transform: none;
     color: $g-primary-text;
     margin: 0 0 0;
   }
   .ga-customer-name{
     width: 30%;
     float: left;
     padding: 0 0;
   }
   .ga-customer-address{
     width: 50%;
     float: left;
     padding: 0 10px;
   }
 }
 .ga-edit-item{
   width: 20%;
   float: left;
   padding: 0;
   text-align: right;
   a{
     text-transform: uppercase;
     font-size: 16px;
     font-weight: 600;
     color: $g-primary-text;
     opacity: 0.7;
     text-decoration: none;
   }
 }
}
.ga-modal-body-4{
 h4 {
   color: $g-primary-text;
   font-size: 16px;
   letter-spacing: normal;
   margin: 0 0 10px;
   display: block;
   text-transform: uppercase;
 }
}
.ga-gift-message{
 .ga-gift-note{
   width: 80%;
   float: left;
   .ga-giftMessage{
     margin: 0 0 10px;
     color: $g-primary-text;
   }
 }
}
.ga-table{
 tbody{
   tr{
     border-bottom: 1px solid $g-primary-text;
     color: $g-primary-text;
   }
   tbody{
     tr{
       border-bottom: 1px solid #ccc;
     }
     background: rgba(225,225,225,0.05);
   }
   .ga-btn {
     color:$body-text-color;
     margin-bottom: 0;
     &:hover{
       background: $body-text-color;
       color: $g-primary-text;
     }
   }
 }
}
.footable-header{
 background-color: #f2f2f2;
}
.ga-account-table{
 color: $body-text-color;
 margin-top: 0px;
 margin-bottom: 20px;
 &.ga-gift-claimed{
   .ga-product-name{
     color: $g-primary-text;
     text-transform: uppercase;
     font-weight: 500;
     margin-bottom: 8px;
   }
   .ga-product-gift{
     font-style: italic;
     font-size: 12px;
     color: $g-primary-text;
   }
 }
 >thead {
   background-color: $g-bg-color;
   border-bottom: 1px solid $g-bg-color;
   >tr{
     >th{
       color: $g-primary-text;
       border: none;
       text-transform: uppercase;
       font-weight: bold;
       letter-spacing: 1.1px;
       padding: 15px 15px;
       text-align: left;
     }
   }
 }
 tr{
   >td{
     padding: 20px 7px;
     border-top: none;
     vertical-align: middle;
     position: relative;
     border:none;
   }
 }
 p{
   margin-bottom: 5px;
   display: block;
   margin-top: 0;
 }
 .ga-claim-gift{
   min-width: 160px;
   text-align: center;
   text-transform: uppercase;
 }
 img{
   max-width: 90px;
   float: left;
 }
 .ga-order-image-info {
   display: inline-block;
   vertical-align: middle;
   padding-left: 15px;
   width: calc(100% - 90px);
 }
}
@media only screen and (max-width: 480px){
 .ga-gift-popup-wrapper .ga-pick-products .ga-proddiv{
   width: 100%;

 }
}
@media only screen  and (min-width: 481px) and (max-width: 767px){
 .ga-gift-popup-wrapper .ga-pick-products .ga-proddiv{
   width: 50%;

 } 
}
@media only  screen and  (max-width: 767px) {
 .ga-pick-products .ga-proddiv{
   margin-bottom: 15px;
 } 
 .ga-j_bt{
   .ga-btn{
     font-size: 14px;
     letter-spacing: 1px;
   }
 }
 .ga-ga-proddiv-lower {
   padding: 10px;
 }
 .ga-gift-popup-wrapper .ga-modal-dialog, .ga-claim-popup-wrapper .ga-modal-dialog{
   max-height: 85vh;
   overflow-y: auto;
   margin: 0;
 }
 .ga-modal-body.ga-three-parts-wrap .ga-three-parts {
   width: 100% !important;
   margin-bottom: 10px;
   padding: 0;
 }
 .ga-gift-popup-wrapper .ga-modal-content, .ga-claim-popup-wrapper .ga-modal-content {
   padding: 23px 30px;
 }
 .ga-gift-popup-wrapper .ga-modal-dialog .ga-modal-title, .ga-claim-popup-wrapper .ga-modal-dialog .ga-modal-title {
   margin-bottom: 10px;
   margin-top: 0;
   text-align: center;
   font-size:1.8em;
 }
 .ga-gift-popup-wrapper .ga-modal-dialog .ga-close, .ga-claim-popup-wrapper .ga-modal-dialog .ga-close {
   right: 10px;
   top: 10px;
 }
 .ga-gift-popup-wrapper , .ga-claim-popup-wrapper{
   .ga-modal-dialog .ga-modal-header .ga-process-bar{
     margin-bottom: 15px;
     span {
       position: absolute;
       display: block;
       content: '';
       width: 20px;
       border-top: 2px solid $g-primary-text;
       top: 8px;
       right: 0;
       display: none;
     }
     p{
       display: block;
       margin: 0 0 10px;
       font-size: 14px;
       text-align: center;
     }
   }
 }
 .ga-gift-popup-wrapper .ga-half-width, .ga-gift-account .ga-half-width {
   width: 100%;
 }
 .ga-gift-popup-wrapper  .ga-one-third-width ,.ga-gift-account   .ga-one-third-width {
   width: 100%;
 }
 .ga-modal-body .ga-product-item {
   align-items: center;
   flex-wrap: wrap;
   text-align: center;
   .ga-product-img {
     padding: 0 10px 10px;
     float: none;
     max-width: 250px;
     margin: 0 auto;
   }
   .ga-product-desc {
     width: 100%;
     padding: 0 10px;
     clear: both;
   }
 }
 .ga-modal-body .ga-address-content{
   text-align: center;
   .ga-customer-name {
     width: 100%;
     padding: 0 10px 10px;

   }
   .ga-customer-address {
     width: 100%;
     padding: 0 10px 20px;
   }
   .ga-edit-item {
     width: 100%;
     padding: 0 10px;
     text-align: center;
   }

 }
 .ga-modal-body-4 h4 {
   margin: 0 0 5px;

 }
 .ga-gift-message{
   .ga-gift-note {
     width: 100%;
     text-align: center;
   }
   .ga-edit-item {
     width: 100%;
     padding: 0 10px 20px;
     text-align: center;
   }
 }
 .ga-account-table{
   img{
     display: none;
   }
   .ga-order-image-info {
     width: calc(100% - 25px);
   }
   tr{
     > td{
       padding: 12px;
     }
   }
   .ga-claim-gift {
     min-width: 200px;
     text-align: left;
   }
 }
}
@media only screen  and (min-width: 768px) and (max-width: 991px){
 .ga-account-table img {
   max-width: 90px;
 }
 .ga-account-table .order-image-info {
   width: calc(100% - 110px);
 }
 .ga-gift-popup-wrapper .ga-pick-products .ga-proddiv{
   width: 50%;
   margin-bottom: 15px;
 }

}
@media only screen  and (min-width: 992px) and (max-width:1199px){
 .ga-proddiv-lower {
   padding: 10px;
 }
}
.ga-gift-popup-wrapper .ga-modal, .ga-claim-popup-wrapper .ga-modal{
 left: 0
}
/********************************** Footabe css*************************************************************/
table.footable,
table.footable-details {
 position: relative;
 width: 100%;
 border-spacing: 0;
 border-collapse: collapse;
}
table.footable-details {
 margin-bottom: 0;
}
table.footable-hide-fouc {
 display: none;
}
table > tbody > tr > td > span.footable-toggle {
 margin-right: 0px;
 opacity: 1;
}
table > tbody > tr > td > span.footable-toggle.last-column {
 margin-left: 8px;
 float: right;
}
table.table-condensed > tbody > tr > td > span.footable-toggle {
 margin-right: 5px;
}
table.footable-details > tbody > tr > th:nth-child(1) {
 min-width: 60px;
 text-transform: capitalize;
 font-size: 14px;
}
table.footable-details > tbody > tr > td:nth-child(2) {
 word-break: break-all;
}

table.footable-details > thead > tr:first-child > th,
table.footable-details > thead > tr:first-child > td,
table.footable-details > tbody > tr:first-child > th,
table.footable-details > tbody > tr:first-child > td,
table.footable-details > tfoot > tr:first-child > th,
table.footable-details > tfoot > tr:first-child > td {
 border-top-width: 0;
}
table.footable-details.table-bordered > thead > tr:first-child > th,
table.footable-details.table-bordered > thead > tr:first-child > td,
table.footable-details.table-bordered > tbody > tr:first-child > th,
table.footable-details.table-bordered > tbody > tr:first-child > td,
table.footable-details.table-bordered > tfoot > tr:first-child > th,
table.footable-details.table-bordered > tfoot > tr:first-child > td {
 border-top-width: 1px;
}
div.footable-loader {
 vertical-align: middle;
 text-align: center;
 height: 300px;
 position: relative;
}
div.footable-loader > span.fooicon {
 display: inline-block;
 opacity: 0.3;
 font-size: 30px;
 line-height: 32px;
 width: 32px;
 height: 32px;
 margin-top: -16px;
 margin-left: -16px;
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-animation: fooicon-spin-r 2s infinite linear;
 animation: fooicon-spin-r 2s infinite linear;
}
table.footable > tbody > tr.footable-empty > td {
 vertical-align: middle;
 text-align: center;
 font-size: 30px;
}
table.footable > tbody > tr > td,
table.footable > tbody > tr > th {
 display: none;
}
table.footable > tbody > tr.footable-empty > td,
table.footable > tbody > tr.footable-empty > th,
table.footable > tbody > tr.footable-detail-row > td,
table.footable > tbody > tr.footable-detail-row > th {
 display: table-cell;
 line-height: 1;
}
@-webkit-keyframes fooicon-spin-r {
 0% {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 100% {
   -webkit-transform: rotate(359deg);
   transform: rotate(359deg);
 }
}
@keyframes fooicon-spin-r {
 0% {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 100% {
   -webkit-transform: rotate(359deg);
   transform: rotate(359deg);
 }
}
.fooicon {
 position: relative;
 top: 1px;
 display: inline-block;
 font-family: 'Glyphicons Halflings' !important;
 font-style: normal;
 font-weight: bold;
 font-size:20px;
 line-height: 1;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
.fooicon:before,
.fooicon:after {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
.fooicon-loader:before {
 content: "\e030";
}
.fooicon-plus:before {
 content: "\2b";
}
.fooicon-minus:before {
 content: "\2212";
}
.ga-claim-head-wrap{
 display: flex;
 align-items: center;
 margin-bottom: 15px;
 margin-top: 15px;
 .ga-heading{
   float: left;
   margin: 0 15px 0 0px;
   font-style : normal;

 }
 a{
   color: $g-primary-text;
   text-transform: uppercase;
   font-weight:bold;
   i {
     padding-left: 7px;
   }
 }
}
.footable-details{
 th{
   padding: 8px;
   border:none;
 }
}
.fooicon {
 font-size: 20px;
}
.pac-container{
 z-index:999999;
}
.ui-state-highlight{
 border: 1px solid $g-primary-text !important;
 background: $g-primary-text !important;
 color: $body-text-color !important;
}
.errorzipcode {
 color: $highlight-error;
 font-size: 16px;
 padding: 0 10px;
}
.alert-danger {
 color: #721c24 !important;
 background-color: #f8d7da !important;
 border-color: #f5c6cb !important;
}
.ui-state-default{
    text-align: center !important;
}
.disabled{
 opacity: 0.4;
 pointer-events: none;
}
            
        

6. Next, copy the following code:

            
{{ 'giftStyle.scss.css' | asset_url | stylesheet_tag }}
            
        

7. Under Layout, Select theme.liquid file
8. Include the above code before </body> tag. View Example
9. Select Save.

Step 2 - Create a new Gift snippet.

1. Under Snippets, click Add a new snippet
2. Rename the JS file as: giftScript. View Example
3. Paste below code into file:

            
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
 var giftApp = {
   init: function () {
      this._open()
      this._close()
      this._nextPrev()
      this._buttonStage()
      this._checkoutBtns()
      this._chargeInterval()
      this._giftEmailClick()
      this._giftImmediateClick()
      this._updateCartGiftProp()
      this._countryProvinceSelector()
      {% if template contains 'account' %}
       this._pendingGifts()
      {% endif %}
   },
  _updateCartGiftProp: function(){
     $('body').on('change', '#rc_container input[name="purchase_type"]', function(e){
       let immediatelyType = document.querySelector('[data-immediately-type]');
       let emailType = document.querySelector('[data-email-type]');

       let selectorInput =  $('#rc_container input[name="purchase_type"]:checked');
       console.log(selectorInput.val());
         if(selectorInput.val() == 'onetime'){
           immediatelyType.value = 'gift-immediately'
           emailType.value = 'gift-email'
           $('[data-ga-chargeInterval]').attr('disabled', 'disabled');
         } else {
           immediatelyType.value = 'gift-recharge-immediately'
           emailType.value = 'gift-recharge-email'
           $('[data-ga-chargeInterval]').removeAttr('disabled');
         } 
      })
   },
  _open: function(){
    $('body').on('click', '[data-opengiftbox]', function(e) {
       e.preventDefault();
       $('body').addClass('gift-popup-open');
       $('[data-ga-popupContainer]').show();
    });
  },
  
   _close: function(){
     $('body').on('click','[data-ga-closePopup], [data-ga-giftModel], [data-ga-claimgiftmodal] ',function(e){
       e.preventDefault();
       $('[data-ga-claimGiftModal]').removeClass('show').hide();
       $('[data-ga-claimSuccess]').hide();
       $('[data-ga-claim]').text('Claim gift').removeClass('disabled');
       $('[data-ga-claimAll]').html('Claim All Gifts <i class="fa fa-angle-right"></i>').removeClass('disabled');
       $('body').removeClass('gift-popup-open');
       $('[data-ga-popupContainer], [data-ga-giftboxmodel]').hide();
       $('[data-ga-claim], [data-ga-claimAll]').css('pointer-events','visible');
       $('[data-ga-saveClaimShippingAddrs]').addClass('disabled').css('pointer-events','none');
       $('[data-ga-claimGiftAddressForm] [data-fields], [data-ga-giftboxmodel] [data-fields], [data-ga-shippingform] input').val('');
       setTimeout(function(){
         $('.ga-modal-body-1').show();
       },1000);
     });
     $('body').on('click','[data-ga-giftpopupWrapper] [data-ga-giftboxmodel], [data-ga-shippingform]',function(e){
       e.stopPropagation();
     });
   },
  _chargeInterval: function(){
    $(".rc_select.rc_select__frequency" ).on('change',function(){
     $('[data-ga-chargeInterval]').val($(this).val()).trigger('change');
    });

    let rechargeType =  $('#rc_container input[name="purchase_type"]:checked');
    if(rechargeType.val() == 'onetime'){
     $('[data-ga-chargeInterval]').attr('disabled', 'disabled');
    } else {
     $('[data-ga-chargeInterval]').removeAttr('disabled');
    } 
  },
   _changeProperty: function(){
     $("[name='properties[shipping_interval_frequency]']" ).attr('name','properties[gift_shipping_interval_frequency]');
     $("[name='properties[charge_interval_frequency]']" ).attr('name','properties[gift_charge_interval_frequency]');
     $("[name='properties[shipping_interval_unit_type]']" ).attr('name','properties[gift_shipping_interval_unit_type]');
     $("[name='properties[subscription_id]']" ).attr('name','properties[gift_subscription_id]');
     $("[name='properties[shipping_interval_frequency]']" ).on('change',function(){
       $('[data-ga-chargeInterval]').val($(this).val()).trigger('change');
     });
   },
  
   _reverseChangeProperty: function(){
     $("[name='properties[gift_subscription_id]']" ).attr('name','properties[subscription_id]');
     $("[name='properties[gift_shipping_interval_frequency]']" ).attr('name','properties[shipping_interval_frequency]');
     $("[name='properties[gift_charge_interval_frequency]']" ).attr('name','properties[charge_interval_frequency]');
     $("[name='properties[gift_shipping_interval_unit_type]']" ).attr('name','properties[shipping_interval_unit_type]');
   },
  
   _next: function(current,next){
     current = current - 1;
     next = next - 1;
     $('[data-ga-giftBoxmodel]').eq(current).hide();
     $('[data-ga-giftBoxmodel]').eq(next).show();
     $('[data-ga-giftBoxmodel]').eq(next).find('input,select,textarea').prop("disabled", false);
     $('[data-ga-Inputs]').prop("disabled", true);
   },
  
   _prev: function(current,prev){
     current = current - 1;
     prev = prev - 1;
     $('[data-ga-giftBoxmodel]').eq(current).hide();
     $('[data-ga-giftBoxmodel]').eq(prev).show();
     $('[data-ga-giftBoxmodel]').eq(current).find('input,select,textarea').prop("disabled", true);
     if(prev == 0){
       giftApp._reverseChangeProperty()
       $('[data-ga-Inputs]').prop("disabled", false);
     }
   },
  
   _checkoutURL: function(){
     var isCheckOutURl = false
     jQuery.getJSON('/cart.js', function(cart) {
       $.each(cart.items,function(index,value){
         if( value.properties != null && value.properties != undefined){
           if (value.properties.shipping_interval_unit_type != null || value.properties.shipping_interval_unit_type != undefined){
             jQuery.getJSON('/cart.js', function(cart) {
               $.each(cart.items,function(index,value){
                 if( value.properties != null && value.properties != undefined){
                   if (value.properties.shipping_interval_unit_type != null || value.properties.shipping_interval_unit_type != undefined){
                     isCheckOutURl = true;
                   }
                 }
               });
               if(isCheckOutURl){
                 function reChargeGetCookie(name) {
                   return (document.cookie.match('(^|; )' + name + '=([^;]*)')||0)[2];
                 }
                 var myshopify_domain = '{{ shop.permanent_domain }}';
                 var token = reChargeGetCookie('cart');
                 try {
                   var ga_linker = ga.getAll()[0].get('linkerParam');
                 } catch (e) {
                   var ga_linker = '';
                 }
                 var customer_param = '{% if customer %}customer_id={{ customer.id }}&customer_email={{ customer.email }}{% endif %}';
                 var checkout_url = 'https://checkout.rechargeapps.com/r/checkout?myshopify_domain=' + myshopify_domain + '&cart_token=' + token + '&' + ga_linker + '&' + customer_param
                 window.location.href = checkout_url;
               }else{
                 window.location.href = '/checkout';
               }
             });
           }
         }
       });

       if(isCheckOutURl){
         function reChargeGetCookie(name) {
           return (document.cookie.match('(^|; )' + name + '=([^;]*)')||0)[2];
         }
         var myshopify_domain = '{{ shop.permanent_domain }}';
         var token = reChargeGetCookie('cart');
         try {
           var ga_linker = ga.getAll()[0].get('linkerParam');
         } catch (e) {
           var ga_linker = '';
         }
         var customer_param = '{% if customer %}customer_id={{ customer.id }}&customer_email={{ customer.email }}{% endif %}';
         var checkout_url = 'https://checkout.rechargeapp.com/r/checkout?myshopify_domain=' + myshopify_domain + '&cart_token=' + token + '&' + ga_linker + '&' + customer_param
         window.location.href = checkout_url;
       }else{
         window.location.href = '/checkout';
       }
     });
   },
  
   _nextPrev: function(){
     $('body').on('click','[data-ga-prevBtn]',function(){
       var current = $(this).attr('data-current');
       var prev = $(this).attr('data-prev');
       giftApp._prev(eval(current),eval(prev));
     });
     $('body').on('click','[data-ga-giftMsg]',function(){
       var current = $(this).attr('data-current');
       var prev = $(this).attr('data-prev');
       giftApp._prev(eval(current),eval(prev));
       $('[data-immediate-form] [data-ga-pNote]').focus();
     });
     $('body').on('click','[data-ga-selectGiftImmediate]',function(e){
       e.preventDefault();
       giftApp._changeProperty();
       giftApp._next(1,2);
     });
     $('body').on('click','[data-ga-selectGiftEmail]',function(e){
       e.preventDefault();
       giftApp._changeProperty();
       giftApp._next(1,3);
     });
   },
  
   _buttonStage: function(){
     var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
     $('body').on('keyup blur change','[data-immediate-form] input, [data-immediate-form] textarea, [data-immediate-form] select',function(e) {
       if(filter.test($('[data-immediate-form] #email_name').val())
          && $('[data-immediate-form] #email_name').val() != ''
          && $('[data-immediate-form] #first_name').val() != ''
          && $('[data-immediate-form] #last_name').val() != ''
          && $('[data-immediate-form] #street_number').val() != ''
          && $('[data-immediate-form] #phone').val() != ''
          && $('[data-immediate-form] #locality').val() != ''
          && $('[data-immediate-form] #postal_code').val() != ''
          && $('[data-immediate-form] #country').val() != ''
          && $('[data-immediate-form] #country').val() != '---'){
          $(this).closest('form').find('[data-ga-immediateBtn]').removeClass('disabled');
       }else{
         $(this).closest('form').find('[data-ga-immediateBtn]').addClass('disabled');
       }     
     });

     $('body').on('keyup blur','[data-email-form] input, [data-email-form] textarea',function(e) {
       if(filter.test($('[data-email-form] #email_add').val())
          && $('[data-email-form] #email_add').val() != ''
          && $('[data-email-form] #datepicker').val() != ''
          && $('[data-email-form] #first_name_add').val() != ''
          && $('[data-email-form] #last_name_add').val() != ''){
         $(this).closest('form').find('[data-ga-GiftEmailbtn]').removeClass('disabled');
       }else{
         $(this).closest('form').find('[data-ga-GiftEmailbtn]').addClass('disabled');
       }
     });
    
     $('body').on('keyup blur change','[data-ga-claimGiftAddressForm] input, [data-ga-claimGiftAddressForm] textarea, [data-ga-claimGiftAddressForm] select',function(e) {
       if($('[data-ga-claimFirstName]').val() != ''
          && $('[data-ga-claimLastName]').val() != ''
          && $('[data-ga-claimAddress1]').val() != ''
          && $('[data-ga-claimCity]').val() != ''
          && $('[data-ga-claimZip]').val() != ''
          && $('[data-ga-claimPhone]').val() != ''
          && $('[data-ga-claimCountry]').val() != ''
          && $('[data-ga-claimCountry]').val() != '---'
          && $('[data-ga-claimProvince]').val() != ''){
         $('[data-ga-claimSaveShipping]').removeClass('disabled');
       }else{
         $('[data-ga-claimSaveShipping]').addClass('disabled');
       }
     });
    
     $('body').on('blur change keyup','[data-ga-shippingform] input, [data-ga-shippingform] select, [data-ga-shippingform] textarea', function(e) {
       if($('#gift_FirstName').val() != ''
          && $('#gift_LastName').val() != ''
          && $('#street_number').val() != ''
          && $('#gift_phone').val() != ''
          && $('#locality').val() != ''
          && $('#administrative_area_level_1').val() != ''
          && $('#administrative_area_level_1').val() != null
          && $('#postal_code').val() != ''
          && $('#country').val() != ''
          && $('#country').val() != null){
         $('[data-ga-saveclaimshippingaddrs]').removeClass('disabled').css('pointer-events','visible');
       }else{
         $('[data-ga-saveclaimshippingaddrs]').addClass('disabled').css('pointer-events','none');
       }
     });
   },
  
   _checkoutBtns: function(){
     $('body').on('click','[data-ga-rechargeCheckout]',function(e){
       e.preventDefault(); 
       var $this = $(this);
       var isCheckOutURl = false
       $.ajax({
         type: "post",
         url: "/cart/add.js",
         data:$($this).closest('form').serializeArray(),
         dataType: 'json',
         beforeSend: function() {
           $($this).addClass('disabled btn').html('Please Wait...');
         },
         success: function(msg) {
           window.location = '/cart';
         },
         error: function(xhr, text, error) {
            console.log(error,text);
         }
       });
     })

     $('body').on('click','[data-ga-shopifyCheckout]',function(e){
       var $this = $(this);
       e.preventDefault();
       $.ajax({
         type: "post",
         url: "/cart/add.js",
         data:$($this).closest('form').serializeArray(),
         dataType: 'json',
         beforeSend: function() {
           $($this).text('Please Wait...').addClass('disabled btn');
         },
         success: function(msg) {
           window.location = '/cart';
         },
         error: function(xhr, text, error) {
            console.log(error,text);
         }
       });
     });
   },
  
   _giftEmailClick: function(){
     $('body').on('click','[data-ga-giftemailbtn]',function(e){
       e.preventDefault();
       $('[data-ga-giftBoxmodel]').eq(3).find('[data-ga-prevBtn]').attr('data-prev','3');
       var first_name = $('[data-email-form] #first_name_add').val();
       var last_name = $('[data-email-form] #last_name_add').val();
       var Addnote = $('[data-email-form] #p_note_add').val();
       var email = $('[data-email-form] #email_add').val();
       $.ajax({
         url: "https://gifting.hulkapps.com/gifts/check_email",
         headers: {
           "X-Gift-Access-Token": "YOUR-GIFT-TOKEN",
           "Accept": "application/json"
         },
         type: 'POST',
         data: {email: email},
         success: function (getdata) {
           if(getdata.status == 'error'){
             $('[data-ga-zipErr1]').removeClass('hidden').html(getdata.message);
             $('#email_add').addClass('alert-danger');
           }else{
             $('#email_add').removeClass('alert-danger');
             $('[data-ga-zipErr1]').addClass('hidden').html('');
             $('[data-ga-address]').text('Email :');
             $('[data-ga-shippingAddress]').html(email);
             $('[data-ga-shippingtxt]').html(first_name+' '+last_name);
             $('[data-ga-giftMessage]').html(Addnote);
             $('[data-ga-giftMsg]').attr('data-prev','3');
             giftApp._next(3,4);
           }
         }
       });
     });
   },

   _giftImmediateClick: function(){
     $('body').on('click','[data-ga-immediateBtn]',function(e){
       e.preventDefault();
       var $this = $(this);
       var Loadertext = $(this).text();
       var first_name = $('[data-immediate-form] #first_name').val();
       var last_name = $('[data-immediate-form] #last_name').val();
       var address1 = $('[data-immediate-form] #street_number').val();
       var address2 = $('[data-immediate-form] #route').val();
       var city = $('[data-immediate-form] #locality').val();
       var country = $('[data-immediate-form] #country').val();
       var province = $('[data-immediate-form] #administrative_area_level_1').val();
       var pincode = $('[data-immediate-form] #postal_code').val();
       var Addnote = $('[data-immediate-form] #add_p_note').val();
       if(province == null || province == undefined){
         province = ''
       }
       $.ajax({
         url: "https://gifting.hulkapps.com/gifts/check_email",
         headers: {
           "X-Gift-Access-Token": "YOUR-GIFT-TOKEN",
           "Accept": "application/json"
         },
         type: 'POST',
         data: {email: $('[data-immediate-form] #email_name').val()},
         success: function (getdata) {
           if(getdata.status == 'error'){
             $('[data-ga-zipErr]').removeClass('hidden').html(getdata.message);
             $('#email_name').addClass('alert-danger');
           }else{
             $.ajax({
               url: "https://gifting.hulkapps.com/gifts/addressvalidation",
               type: 'POST',
               data: {"first_name": first_name,"last_name":last_name,"address1":address1,"address2":address2,"city":city,"country":country,"state":province,"zipcode":pincode},
               beforeSend: function() {
                 $($this).html('Please Wait...');
               },
               success: function (errorData) {
                 if(errorData.status == 'errors'){
                   $('[data-ga-zipErr]').removeClass('hidden').html(errorData.message);
                 } else{
                   giftApp._next(2,4);
                   $('#email_name').removeClass('alert-danger');
                   $('[data-ga-zipErr]').addClass('hidden').html('');
                   $('[data-ga-shippingtxt]').html(first_name+' '+last_name);
                   if(province == ''){
                     $('[data-ga-shippingAddress]').html(address1+ ', '+city+', '+country+' '+pincode);
                   }else{
                     $('[data-ga-shippingAddress]').html(address1+ ', '+city+', '+province+' '+pincode);
                   }              
                   $('[data-ga-address]').text('address :');
                   $('[data-ga-giftMessage]').html(Addnote);
                   $('[data-ga-giftBoxmodel]').eq(3).find('[data-ga-prevBtn]').attr('data-prev','2');
                   $('[data-ga-giftMsg]').attr('data-prev','2');
                 }
                 $($this).html(Loadertext);
               }
             });
           }
         }
       })
     });
   },
  
   _countryProvinceSelector: function(){
     if( $('#ga-gift_country').length > 0 ){
       new Shopify.CountryProvinceSelector('ga-gift_country', 'ga-gift_province', {
         hideElement: 'ga-gift_province_ele'
       });
     }
     if( $('#country').length > 0 ){
       new Shopify.CountryProvinceSelector('country', 'administrative_area_level_1', {
         hideElement: 'data-hide-ele'
       });
     }
   },
  
  _pendingGifts: function(){
     const customerID = "{{ customer.id }}";
     const email_id = "{{ customer.email }}";
     $('[data-ga-giftProductsConatiner] tbody').html('');
     $.ajax({
       url: "https://gifting.hulkapps.com/gifts/pending_gifts",
       headers: {
         "X-Gift-Access-Token": "YOUR-GIFT-TOKEN",
         "Accept": "application/json"
       },
       type: 'POST',
       data: {email: email_id},
       success: function (getdata) {
         if(getdata != null && getdata.unclaimed_gifts != undefined){
           if(getdata.unclaimed_gifts.length < 1){
             $('[data-ga-giftProductsConatiner]').hide();
           }else{
             for(var i=0; i < getdata.unclaimed_gifts.length; i++){
               var msg;
               var handle = getdata.unclaimed_gifts[i].product.handle;
               if(getdata.unclaimed_gifts[i].gift_type == 'normal'){
                 msg = "Gift box";
               }else{
                 msg = "Gift subscription monthly";
               }
               var html = '';
               html +='<tr class="ga-order-item-listing ga-item-listing" data-id="'+ getdata.unclaimed_gifts[i].product_id +'">';
               html +='<td class="ga-order-item-listing ga-item-listing"><img src="' + getdata.unclaimed_gifts[i].product.image.src + '"/>';
               html +='<div class="ga-order-image-info"><p class="ga-product-name" data-ga-giftproductName >'+ getdata.unclaimed_gifts[i].product.title +'</p><p class="ga-product-gift" data-ga-giftproductType >'+ msg +'</p></div></td>';
               html +='<td class="ga-top-td"><p><b data-ga-giftreciever>'+ getdata.unclaimed_gifts[i].sender_name; +'</b></p><p data-ga-giftmailId>' + getdata.unclaimed_gifts[i].sender_email + '</p><p data-ga-giftType>' + getdata.unclaimed_gifts[i].gift_note + '</p></td>';
               html +='<td class="ga-top-td ga-claim-gift"><a data-ga-claim class="ga-btn claim_gift--btn" data-gift-id="'+ getdata.unclaimed_gifts[i].gift_id +'">Claim gift</a></td>';
               html +='</tr>';
               $('[data-ga-claimGiftAddressForm]').attr('data-gift',getdata.unclaimed_gifts[i].gift_id);
               $("[data-ga-giftProductsConatiner] tbody").append(html);
               $('[data-ga-giftProductsConatiner]').show();
               $('[data-signlesuccess]').hide();
             }
             setTimeout(function(){
               $('[data-ga-claimedGiftlisting]').footable();
               giftApp._claimGift();
             },1000)
           }
         }else{
           $('[data-ga-giftProductsConatiner]').hide();
         }
       }
     });
   },
  
    _claimGift: function(){
     const shop_id = "{{shop.permanent_domain}}";
     const first_name = "{{customer.first_name}}";
     const last_name = "{{customer.last_name}}";
     const email_id = "{{ customer.email }}";
     var address1,address2,country,city,zip,phone,province;
     
     {% for address in customer.addresses %}
       address1 = "{{ address.address1 }}";
       address2 = "{{ address.address2 }}";
       country = "{{ address.country }}";
       city = "{{ address.city }}";
       zip = "{{ address.zip }}";
       phone = "{{ address.phone }}";
       province = "{{ address.province }}";
     {% endfor %}
      
     $('body').on('click','[data-ga-claim]',function(e){
       e.preventDefault();
       var gift_id = $(this).attr('data-gift-id');
       $(this).text('Please Wait...').addClass('disabled');
       $('[data-ga-claimAll], [data-ga-claim]').addClass('disabled');
       if(address1 != undefined
          && country != undefined
          && city != undefined
          && province != undefined
          && zip != undefined){
         giftApp._claimSingleGift(email_id,first_name,last_name,address1,address2,country,city,zip,phone,province,shop_id,gift_id);
       }else{
         $('[data-ga-overlay]').addClass('active');
         $('body').addClass('gift-popup-open');
         $(this).css('pointer-events','none');
         $('[data-ga-claimGiftModal]').addClass('show').show();
         giftApp._addressValidation('single',gift_id);
       }
     });
    
     $('body').on('click','[data-ga-claimAll]',function(e){
       e.preventDefault();
       $('[data-ga-claimAll]').text('Please Wait...').addClass('disabled');
       $('[data-ga-claim]').addClass('disabled');
       if(address1 != undefined
          && country != undefined
          && city != undefined
          && province != undefined
          && zip != undefined){
         giftApp._claimMultipleGift(email_id,first_name,last_name,address1,address2,country,city,zip,phone,province,shop_id);
       }else{
         $('[data-ga-overlay]').addClass('active');
         $('body').addClass('gift-popup-open');
         $(this).css('pointer-events','none');
         $('[data-ga-claimGiftModal]').addClass('show').show();
         giftApp._addressValidation('multiple','');
       }
     });
   },
  
   _addressValidation: function(callAction,gift_id){
     $('body').on('click','[data-ga-saveClaimShippingAddrs]',function(e){
       e.preventDefault();
       $(this).text('Please Wait...').addClass('disabled');
       $('[data-ga-claimgiftmodal]').css('pointer-events','none');
       const customerID = "{{ customer.id }}";
       const email_id = "{{ customer.email }}";
       const shop_id = "{{shop.permanent_domain}}";
       const $data = $('[data-ga-claimGiftAddressForm]').serializeArray();
       const first_name = $('[data-ga-claimGiftAddressForm]').find('[data-ga-claimFirstName]').val();
       const last_name = $('[data-ga-claimGiftAddressForm]').find('[data-ga-claimLastName]').val();
       const address1 = $('[data-ga-claimGiftAddressForm]').find('[data-ga-claimAddress1]').val();
       const address2 = $('[data-ga-claimGiftAddressForm]').find('[data-ga-claimAddress2]').val();
       const city = $('[data-ga-claimGiftAddressForm]').find('[data-ga-claimCity]').val();
       const province = $('[data-ga-claimGiftAddressForm]').find('[data-ga-claimProvince]').val();
       const zip_code = $('[data-ga-claimGiftAddressForm]').find('[data-ga-claimZip]').val();
       const country = $('[data-ga-claimGiftAddressForm]').find('[data-ga-claimCountry]').val();
       const phone = $('[data-ga-claimGiftAddressForm]').find('[data-ga-claimPhone]').val();
       $.ajax({
         url: "https://gifting.hulkapps.com/gifts/address_validation",
         type: 'POST',
         headers: {
           "X-Gift-Access-Token": "YOUR-GIFT-TOKEN",
           "Accept": "application/json"
         },
         data: {"first_name": first_name,"last_name":last_name,"address1":address1,"address2":address2,"city":city,"country":country,"state":province,"zipcode":zip_code,"phone":phone},
         success: function (errorData) {
           if(errorData.status == 'errors'){
             $('[data-ga-shopifyError]').text(errorData.message).removeClass('hide');
             return false;
           }else{
             $('[data-ga-shopifyError]').hide();
             $.ajax({
               url: "/account/addresses",
               type: 'POST',
               data: $data,
               success: function (getdata) {
                 if(callAction == 'single'){
                   giftApp._claimSingleGift(email_id,first_name,last_name,address1,address2,country,city,zip_code,phone,province,shop_id,gift_id);                 
                 }else if(callAction == 'multiple'){
                   giftApp._claimMultipleGift(email_id,first_name,last_name,address1,address2,country,city,zip_code,phone,province,shop_id);       
                 }
               }
             });
           }
         }
       });
     });
   },
  
   _claimSingleGift: function(email_id,first_name,last_name,address1,address2,country,city,zip,phone,province,shop_id,gift_id){
     $.ajax({
       url: "https://gifting.hulkapps.com/gifts/claim_gift",
       type: 'POST',
       headers: {
         "X-Gift-Access-Token": "YOUR-GIFT-TOKEN",
         "Accept": "application/json"
       },
       data: {"email": email_id,"shipping_address[address1]":address1,"shipping_address[address2]":address2,"shipping_address[country]":country,"shipping_address[city]":city,"shipping_address[zip]":zip,"shipping_address[first_name]":first_name,"shipping_address[last_name]":last_name,"shipping_address[phone]":phone,"shipping_address[province]":province, "shop_id": shop_id, "gift_id": gift_id},
       success: function (getdata) {        
         giftApp._afterClaim();
       }
     });
   },

   _claimMultipleGift: function(email_id,first_name,last_name,address1,address2,country,city,zip,phone,province,shop_id){
     $.ajax({
       url: "https://gifting.hulkapps.com/gifts/claim_gifts",
       type: 'POST',
       headers: {
         "X-Gift-Access-Token": "YOUR-GIFT-TOKEN",
         "Accept": "application/json"
       },
       data: {"email": email_id,"shipping_address[address1]":address1,"shipping_address[address2]":address2,"shipping_address[country]":country,"shipping_address[city]":city,"shipping_address[zip]":zip,"shipping_address[first_name]":first_name,"shipping_address[last_name]":last_name,"shipping_address[phone]":phone,"shipping_address[province]":province, "shop_id": shop_id},
       success: function (getdata) {
         giftApp._afterClaim();
       }
     });
   },
  
   _afterClaim: function(){
     $('[data-ga-claimgiftmodal]').css('pointer-events','visible');
     $('[data-ga-claimSuccess]').show();
     $('[data-ga-shippingform]').hide();
     $('[data-ga-giftProductsConatiner]').hide();
     $('[data-signlesuccess]').show();
     $('[data-ga-saveClaimShippingAddrs]').text('SAVE SHIPPING ADDRESS').removeClass('disabled');        
     $(this).css('pointer-events','visible');
     $('[data-ga-claimall],[data-ga-claim]').removeClass('disabled');
     setTimeout(function(){
       $('[data-signlesuccess]').hide();
       giftApp._pendingGifts();
     },5000);
   },
 }
  $(document).ready(function(){
   giftApp.init();
 });
</script>
            
        

4. Next, copy the following code:

            
{% include 'giftScript' %}
            
        

5. Under Layout, Select theme.liquid file
6. Include the above code before tag. View Example
7. Select Save.

Step 3 - Create a new Popup snippet.

1. Under Snippets, click Add a new snippet
2. Rename the file as: giftPopup.liquid View Example
3. Paste below code into file:

            
    <div style="display:none;">
    {% if shipping_interval_frequency.size == 1 %}
        <input type="hidden" name="properties[charge_interval_frequency]" value="{{ product.metafields.subscriptions.charge_interval_frequency }}">
    {% elsif shipping_interval_frequency.size > 1 %}
    <select name="properties[charge_interval_frequency]" class="rc_select__dropdown" data-ga-chargeInterval>
        {% for frequency in shipping_interval_frequency %}
        <option value="{{ frequency }}">
        {{ frequency }}    
        </option>
        {% endfor %}
    </select>
    {% endif %}
    </div>

    <div class="ga-popupContainer" style="display:none;" data-ga-popupContainer>
    <div data-ga-giftpopupWrapper class="ga-gift-popup-wrapper" itemscope itemtype="http://schema.org/Product">
    <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
    <meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">
    <meta itemprop="priceCurrency" content="{{ shop.currency }}">
    <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
    
    <!-- Modal -->
    <div data-ga-giftModel class="ga-modal in fade" itemprop="offers" itemscope itemtype="http://schema.org/Offer" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="ga-modal-dialog" role="document">

        <input type="hidden" data-ga-Inputs class="giftNotAvailable" id="gift_type" name="properties[type]" value="gift-box">
        <input type="hidden" name="id" value="{{ product.variants.first.id }}" />

        <!--   modal body 1  -->
        <div class="ga-modal-content ga-modal-body-1" data-ga-giftBoxmodel>
            <div class="ga-modal-header">
            <button data-ga-closePopup type="button" class="ga-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h1 class="ga-modal-title" id="myModalLabel">Gift {{ shop.name }}</h1>
            <h5 class="ga-process-bar"><p class="ga-active">Delivery<span></span></p><p>Recipient Info<span></span></p><p>Review Order</p></h5>
            </div>       
            <div class="ga-modal-body clearfix ga-three-parts-wrap">
            <div class="ga-gift-immediate-select ga-three-parts">
                <div class="ga-thumbnail">
                <div class="ga-upper-content">
                    <img src="{{ 'gift-imm.png' |  asset_img_url: 'medium' }}" alt="...">
                    <div class="ga-caption">
                    <h4 class="ga-head-title">Ship Gift Immediately</h4>
                    <p class="ga-head-body">Ship gift box as soon as
                        possible to the recipient with
                        personalized gift note.</p>                
                    </div>
                </div>
                <p class="ga-caption-btn"><a data-ga-selectGiftImmediate href="javascript:void(0);" class="ga-btn selectGiftImmediate" role="button">Select</a></p>
                </div>
            </div>
            <div class="ga-gift-email-select ga-three-parts">
                <div class="ga-thumbnail">
                <div class="ga-upper-content">
                    <img src="{{ 'gift-email-nmew.png' |  asset_img_url: 'medium' }}" alt="...">
                    <div class="ga-caption">
                    <h4 class="ga-head-title">Send Gift through email</h4>
                    <p class="ga-head-body">Recipient receives an email
                        with your personal message
                        and a link to claim their gift.
                        Email may be sent immediately
                        or at any future date.</p>                 
                    </div>
                </div>
                <p class="ga-caption-btn"><a data-ga-selectGiftEmail href="javascript:void(0);" class="ga-btn selectGiftEmail" role="button">Select</a></p>
                </div>
            </div>
            <div class="ga-gift-self-select ga-three-parts">
                <div class="ga-thumbnail">
                <div class="ga-upper-content">
                    <img src="{{ 'gift-self.png' |  asset_img_url: 'medium' }}" alt="...">
                    <div class="ga-caption">
                    <h1 class="ga-head-title">I’m buying for myself.</h1>                                   
                    </div>
                </div>
                <p class="ga-caption-btn"><a data-ga-rechargeCheckout href="javascript:void(0);" class="ga-link-btn directonRecharge" role="button">Add to cart</a>
                </div>
            </div>
            </div> 
        </div>

        <!--     modal body 2     -->
        <div class="ga-modal-content ga-modal-body-2" style="display:none" data-ga-giftBoxmodel>
            <div class="ga-modal-header">
            <button data-ga-closePopup type="button" class="ga-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h1 class="ga-modal-title" id="myModalLabel">Gift {{ shop.name }}</h1>
            <h5 class="ga-process-bar"><p>Delivery<span></span></p><p class="ga-active">Recipient Info<span></span></p><p>Review Order</p></h5>
            </div>       
            <div class="ga-modal-body">
            <div class="ga-gift-immediate-form clearfix ga-modal-form" data-immediate-form id="data-immediate-form">
                <h4 data-ga-zipErr class="errorzipcode error ga-text-center hidden"></h4>             
            
                {% if product.metafields.subscriptions.subscription_id != blank %}
                <input required disabled class="required" id="address" type="hidden" name="properties[type]" value="gift-recharge-immediately">
                {% else %}
                <input required disabled class="required" id="address" type="hidden" name="properties[type]" value="gift-immediately">
                {% endif %}

                <div  class="ga-input-field ga-half-width">
                <label for="first_name" class="login">First Name<span>*</span></label>
                <input required type="text" name="properties[first_name]" id="first_name" class="" disabled data-fields/>          
                </div>

                <div  class="ga-input-field ga-half-width">
                <label for="last_name" class="login">Last Name<span>*</span></label>
                <input required type="text"  name="properties[last_name]" id="last_name" class="" disabled data-fields/>
                </div>

                <div class="ga-input-field ga-full-width">
                <label for="email_name" class="login">email<span>*</span></label>
                <input required type="email"  name="properties[email]" id="email_name" class="" disabled data-fields/>
                </div>

                <div class="ga-input-field ga-one-third-width">
                <label for="street_number">Street Address<span>*</span></label>
                <input required type="text" disabled id="street_number" class="address_form" name="properties[address1]" autocapitalize="words" data-field="Address" data-fields>
                </div>

                <div class="ga-input-field ga-half-width" style="display:none;">
                <label for="route">Address 2<span></span></label>
                <input required type="text" id="route" disabled class="address_form" name="properties[address2]" autocapitalize="words" data-field="First Name" data-fields>
                </div>       

                <div class="ga-input-field ga-one-third-width">
                <label for="locality" class="login">city<span>*</span></label>
                <input required type="text" name="properties[city]" id="locality" class="" disabled data-fields/>          
                </div>

                <div class="ga-input-field ga-one-third-width country-selector">
                <label for="country" class="login">country <span>*</span></label>
                <select required id="country" name="properties[country]" disabled data-default="{{form.country}}">{{ country_option_tags }}</select>
                </div>

                <div class="ga-input-field ga-one-third-width" id="data-hide-ele">
                <label for="administrative_area_level_1">state/province<span>*</span></label>
                <select required id="administrative_area_level_1" name="properties[province]" disabled data-default="{{form.province}}" data-field="{{ 'customer.addresses.province' | t }}">
                </select>         
                </div>

                <div class="ga-input-field ga-one-third-width">
                <label for="postal_code" class="login">postal code<span>*</span></label>
                <input required type="text" name="properties[zip]" id="postal_code" class="" disabled data-fields/>          
                </div>

                <div class="ga-input-field ga-one-third-width">
                <label for="phone" class="login">Phone <span>*</span></label>
                <input required type="text" name="properties[phone]" id="phone" class="" disabled data-fields/>     
                </div>

                <div class="ga-input-field ga-full-width">
                <label for="add_p_note">personalized gift note ( Optional )</label>
                <textarea data-ga-pNote required id="add_p_note" class="address_form" name="properties[gift_note]" disabled autocapitalize="words" data-fields></textarea>               
                </div>
            </div>
            </div>
            <div class="ga-modal-footer">
            <div class="ga-back-btn"><a data-ga-prevBtn href="javascript:void(0);" data-current="2" data-prev="1" class="ga-link-btn ga-prevBtn" role="button">
                <i class="fa fa-angle-left"></i>Go Back</a>
            </div>

            <div class="ga-next-btn" ><a data-ga-immediateBtn href="javascript:void(0);" class="ga-btn ga-action-btn action-btn nextGiftEmail disabled" role="button">Next</a>
            </div>
        </div>
        </div>
        <!--     modal body 3     -->
        <div class="ga-modal-content ga-modal-body-3" style="display:none" data-ga-giftBoxmodel>
            <div class="ga-modal-header">
            <button data-ga-closePopup type="button" class="ga-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h1 class="ga-modal-title" id="myModalLabel">Gift {{ shop.name }}</h1>
            <h5 class="ga-process-bar"><p>Delivery<span></span></p><p class="ga-active">Recipient Info<span></span></p><p>Review Order</p></h5>
            </div>       
            <div class="ga-modal-body">
            <div class="ga-gift-email-form ga-modal-form clearfix" data-email-form>
                <h4 data-ga-zipErr1 class="errorzipcode error ga-text-center hidden"></h4>
            
                {% if product.metafields.subscriptions.subscription_id != blank %}
                <input required disabled class="required" id="email" type="hidden" name="properties[type]" value="gift-recharge-email">
                {% else %}
                <input required disabled class="required" id="email" type="hidden" name="properties[type]" value="gift-email">
                {% endif %}
                
                <div class="ga-input-field ga-one-third-width">
                <label for="datepicker">SEND Gift EMAIL<span>*</span></label>
                <input data-ga-datepicker id="datepicker" disabled type="text" placeholder="Select Date" name="properties[date]" required autocomplete="off" data-fields>
                </div>
                <div class="ga-input-field ga-one-third-width">
                <label>first name<span>*</span></label>
                <input id="first_name_add" type="text" name="properties[first_name]" disabled required autocomplete="off" data-fields>      
                </div>

                <div class="ga-input-field ga-one-third-width">
                <label>last name<span>*</span></label>
                <input id="last_name_add" type="text" name="properties[last_name]" required disabled autocomplete="off" data-fields>
                </div>

                <div class="ga-input-field ga-full-width">
                <label>email<span>*</span></label>
                <input id="email_add" type="email" name="properties[email]" required disabled autocomplete="off" data-fields>
                </div>
                <div class="ga-input-field ga-full-width">
                <label>personalized gift note ( Optional )</label>
                <textarea id="p_note_add" maxlength="250" name="properties[gift_note]" required autocomplete="off" disabled data-fields></textarea>            
                </div>
            </div>
            </div>
            <div class="ga-modal-footer">
            <div class="ga-back-btn"><a data-ga-prevBtn href="javascript:void(0);" data-current="3" data-prev="1" class="ga-link-btn prevBtn" role="button">
                <i class="fa fa-angle-left"></i>Go Back</a>
            </div>
            <div class="ga-next-btn"><a data-ga-GiftEmailbtn href="javascript:void(0);" class="ga-btn ga-action-btn nextGiftEmailbtn disabled" role="button">Next</a>
            </div>
            </div>
        </div>

        <!--  modal body 4   -->
        <div class="ga-modal-content ga-modal-body-4" style="display:none" data-ga-giftBoxmodel>
            <div class="ga-modal-header">
            <button data-ga-closePopup type="button" class="ga-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h1 class="ga-modal-title" id="myModalLabel">Gift {{ shop.name }}</h1>
            <h5 class="ga-process-bar"><p>Delivery<span></span></p><p>Recipient Info<span></span></p><p class="ga-active">Review Order</p></h5>
            </div>       

            <div class="ga-modal-body">
            <div class="clearfix ga-modal-form">             
                <div class="ga-product-item clearfix">               
                <div class="ga-product-img">
                    {% assign featured_image = current_variant.featured_image | default: product.featured_image %}
                    <img src="{{ featured_image | img_url: 'grande' }}" alt="{{ featured_image.alt | escape }}">
                </div>
                <div class="ga-product-desc">
                    <p class="ga-product-title">{{ product.title }}</p>
                    <p class="ga-product-price">{{ product.price | money }}</p>
                </div>
                </div>
                <div class="ga-address-content clearfix">            
                <div class="ga-customer-name">
                    <h4>TO :</h4>
                    <p data-ga-shippingtxt class="ga-shippingName"></p>
                </div>
                <div class="ga-customer-address">
                    <h4 data-ga-address >address :</h4>
                    <p data-ga-shippingAddress class="ga-shippingAddress"></p>
                </div>
                <div class="ga-edit-item">
                    <a data-ga-prevBtn href="javascript:void(0);" data-current="4" data-prev="2" class="ga-prevBtn" >edit</a>
                </div>            
                </div>
                <div class="ga-gift-message clearfix">
                <div class="ga-gift-note">
                    <h4>personalized gift note :</h4>
                    <p data-ga-giftMessage class="ga-giftMessage"></p>
                </div>
                <div class="ga-edit-item">
                    <a data-ga-giftMsg href="javascript:void(0);" data-current="4" data-prev="2" class="ga-giftMsg">edit</a>
                </div>
                </div>
            </div>
            </div>
            <div class="ga-modal-footer">
            <div class="ga-back-btn"><a data-ga-prevBtn href="javascript:void(0);" data-current="4" data-prev="2" class="ga-link-btn ga-prevBtn" role="button">
                <i class="fa fa-angle-left"></i>Go Back</a>
            </div>
            <div class="ga-cart-btn"><a data-ga-shopifyCheckout href="javascript:void(0);" class="ga-btn ga-action-btn btn-shopifyCheckout" role="button">Add to cart</a>
            </div>
            </div>
        </div>
        </div>
    </div>
    </div>
    </div>
            
        

4. Next, copy the following code:

            
{% include 'giftPopup' %}
            
        

5. Under Templates, Select product.liquid file
6. Include the above code after the below line. View Example

            
{% include  'subscription-product' %}
{% include 'giftPopup' %}
            
        

7. Select Save

Step 4 - Create a new Account snippet.

1. Under Snippets, click Add a new snippet
2. Rename the file as: giftAccount.liquid View Example
3. Paste below code into file:

            
<div data-signlesuccess style="display:none;">
<p>
  <center>
    <h4 class="ga-paragraph">Your gift has been claimed. We are fulfilling your order and we will email you when your gift is on it’s way!</h4><h5>Thank you!</h5>
  </center>
</p>
</div>
<div class="ga-gift-account" style="display:none" data-ga-giftProductsConatiner >
<hr class="hr--small">

<div class="container">
 <div class="ga-claim-head-wrap">
   <h2 class="ga-heading">Your gifts</h2>
   <a href="#" class="claim-link clamingGift" data-ga-claimAll >Claim All Gifts<i class="fa fa-angle-right"></i></a>
 </div>
 <table class="ga-table footable ga-subscription-order-table ga-account-table ga-gift-claimed" data-ga-claimedGiftlisting >
   <thead>
     <tr>
       <th>Gift item</th>
       <th data-breakpoints="xs">sent by</th>
       <th data-breakpoints="xs"></th>
     </tr>
   </thead>
   <tbody data-ga-claimGiftTable >
    
   </tbody>
 </table>
</div>
</div>

<div class="ga-gift-popup-wrapper ga-claim-popup-wrapper" data-ga-claimGift>
 <!-- Modal -->
 <div class="ga-modal fade" id="claimModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display:none" data-ga-claimGiftModal>
   <div class="ga-modal-dialog" role="document">

     <div class="ga-modal-content ga-modal-body" data-ga-shippingForm>
       <div class="ga-modal-header">
         <button data-ga-closePopup type="button" class="ga-close shippingaddressClose" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
         <h1 class="ga-modal-title" id="myModalLabel">Claim your gift</h1>
         <h5 class="ga-sub-note">Add your shipping address below so we can send you your gift!</h5>
       </div>       
       <div class="ga-modal-body">       
         <form class="ga-save-address-form" method="post" id="addAddressBilling" name="addAddressBilling" data-ga-claimGiftAddressForm>
           <h4 data-ga-shopifyError class="ga-shopifyError" style="display: none;text-align: center;color: red;margin-bottom:20px;"></h4>
           <div class="ga-input-field ga-half-width">
             <label for="gift_FirstName" class="login">First Name<span>*</span></label>
             <input data-ga-claimFirstName type="text" value="" name="address[first_name]" id="gift_FirstName" class="" />          
           </div>

           <div class="ga-input-field ga-half-width">
             <label for="gift_LastName" class="login">Last Name<span>*</span></label>
             <input data-ga-claimLastName type="text" value="" name="address[last_name]" id="gift_LastName" class="" />
           </div>

           <div class="ga-input-field ga-half-width">
             <label for="street_number">Address 1<span>*</span></label>
             <input data-ga-claimAddress1 type="text" id="street_number" class="address_form" name="address[address1]" value="{{form.address1}}" autocapitalize="words" data-field="Address">
           </div>

           <div class="ga-input-field ga-half-width">
             <label for="route">Address 2<span></span></label>
             <input data-ga-claimAddress2 type="text" id="route" class="address_form"  name="address[address2]" value="{{form.address2}}" autocapitalize="words" data-field="First Name">
           </div>

           <div class="ga-input-field ga-one-third-width">
             <label for="locality" class="login">city<span>*</span></label>
             <input data-ga-claimCity type="text" value="" name="address[city]" id="locality" class=""  />          
           </div>

           <div class="ga-input-field ga-one-third-width">
             <label for="country">COUNTRY<span>*</span></label>
             <select data-ga-claimCountry id="country" name="address[country]" data-default="{{form.country}}">
               {{ country_option_tags }}</select>
           </div>

           <div class="ga-input-field ga-one-third-width" id="data-hide-ele">
             <label for="administrative_area_level_1">state<span>*</span></label>
             <select data-ga-claimProvince id="administrative_area_level_1" class="address_form add-provinceName" name="address[province]" data-default="{{form.province}}" required></select>
           </div>

           <div class="ga-input-field ga-half-width">
             <label for="postal_code" class="login">postal code<span>*</span></label>
             <input data-ga-claimZip type="text" value="" name="address[zip]" id="postal_code" class=""  />          
           </div>

           <div class="ga-input-field ga-half-width">
             <label for="gift_phone">PHONE NUMBER<span>*</span></label>
             <input data-ga-claimPhone type="text" id="gift_phone" class="address_form" name="address[phone]" value="{{form.phone}}" >
           </div>
         </form>
       </div>
       <div class="ga-modal-footer">
         <div class="ga-back-btn"></div>           
         <div class="ga-save-address-btn">
           <a data-ga-saveClaimShippingAddrs href="javascript:void(0);" class="ga-btn disabled" id="add_address" role="button" >SAVE SHIPPING ADDRESS</a>
         </div>
       </div>
     </div>
     <!--     modal body 2 - Gift Claimed PopUp     -->
     <div class="ga-modal-content ga-modal-body-6" style="display:none" data-ga-claimSuccess>
       <div class="ga-modal-header">
         <button type="button" class="ga-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
       </div>  
       <div class="ga-modal-body">   
         <h1 class="ga-modal-title">congrats!</h1>
         <p class="ga-sub-note">Your gift has been claimed. We are fulfilling your order
           and we will email you when your gift is on it’s way!</p>
         <div class="ga-btn-wrap clearfix">
           <a href="/account" class="ga-btn ga-btn-ghost">
             return to my account
           </a>
           <a href="/collections/all" class="ga-btn">
             shop {{ shop.name }}
           </a>
         </div>
       </div>
     </div>
   </div>
 </div>
</div>
            
        

4. Next, copy the following code:

            
{% include 'giftAccount' %}
            
        

5. Under Templates, Select customer/account.liquid file
6. Include the above code at your desired location where you would like to display the gift products View Example
7. Select Save.

Step 5 - Add attribute in existing snippet.

1. Under Templates, Select product.liquid file
2. Find your Add to Cart button
3. Add the below attribute after <button> class View Example
data-openGiftBox
4. Select Save.

Step 6 - Optional step for ReCharge users only.

1. Under Templates, Select subscription-cart-footer file
2. Find the below snippet code:

            
{% if p.first == 'shipping_interval_frequency' %}
            
        

3. Replace the above code with the following code View Example

            
{% if p.first == 'shipping_interval_frequency' or p.first == 'gift_shipping_interval_frequency' %}
            
        

4. Select Save.

Step 7 - Email token settings.

1. Under Settings, Select Notifications
2. Open Customer Account Invite email. View Example
3. Enter the following code in Email Subject:

            
{% if customer.tags contains 'Gift Receiver' %}You've Received a Gift!{% else %}Customer account activation{% endif %}
            
        

4. Under Email Body, Find the below CSS code:

            
<h2>{{ email_title }}</h2>
{% if custom_message != blank %}
    <p>{{ custom_message }}</p>
    {% else %}
    <p>{{ email_body }}</p>
{% endif %}
            
        

5. Replace the above with the below CSS code:

{% if customer.tags contains 'Gift Receiver'  %}
    <h2>Congratulations!</h2>
    <p>You've received a Gift Box from {{ name | replace:'_',' ' }} as a Gift redeemable at <a href="{{shop.url}}">{{shop.name}}</a> Ready To claim your Gift? Click on the link below to activate your account and claim your Gift.</p>
{% else %}
    <h2>{{ email_title }}</h2>
    {% if custom_message != blank %}
    <p>{{ custom_message }}</p>
    {% else %}
    <p>{{ email_body }}</p>
    {% endif %}
{% endif %}
                    

6. Also, Find the below CSS code:

<td class="button__cell"><a href="{% if customer %}{{ customer.account_activation_url }}” class="button__text">Activate your account</a></td>
                    

7. Replace the above with the below CSS code:

<td class="button__cell"><a href="{% if customer %}{{ customer.account_activation_url }}{% if customer.tags contains 'Gift Receiver'  %}?{{ name }}{% endif %}{% else %}https://YOUR_STORE_URL/account/register{% endif %}" class="button__text">{% if customer.tags contains 'Gift Receiver'  %}Claim your gift and setup your account{% else %}Activate your account{% endif %}</a></td>
                    

8. Select Save.

Step 8 - Replace snippets.

1. Under Templates, Select customers/activate_account.liquid file
2. Find the below snippet code: View Example

<p class="h1">{{ 'customer.activate_account.subtext' | t }}</p>.
            

3. Replace the below code next to the above line. View Example

<div data-show-receiver class="mainDiv">
    <p>You are one step away from claiming your gift.</p>
    <p><span data-giver-name class="subDiv"></span> has bought you a gift to <a href="{{shop.url}}">{{shop.name}}</a>. To claim your gift, we need to verify you and create your account so that you can manage your gift and securely add your address where we can ship it.</p>
</div>
            

4. Add the following code at the bottom of the file. View Example

<style>
 .mainDiv{
   max-width: 555px;
   margin: 0 auto;
 }
 .subDiv,.mainDiv a{
   color: #F36546;
   font-weight:bold;
   text-transform: uppercase;
 }
 .h1{
   font-size: 16px;
   color: #d4a747;
 }
</style>


<!-- History.js & Cookie.js -->
{{ 'history.js' | asset_url | script_tag }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"> </script>

<script>
 var giver = window.location.href;
 var title = $(document).attr('title');
 if(giver.indexOf('?') > -1){
   $.cookie("giver-name",giver.split('?')[1].replace('_',' '), { expires : 1 });
   giver = giver.split('?')[0];
   History.pushState({path: giver}, title , giver);
 }
 $('[data-show-riceiver]').show();
 $('[data-giver-name]').text($.cookie("giver-name"));
</script>
                

5. Select Save.

Step 9 - Create a new GoogleAutoComplete snippet.

1. Under Snippets, click Add a new snippet
2. Rename the JS file as: giftGoogleAutoComplete.liquid View Example
3. Paste below code into file:

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDw3XZ65IVKNH6_8WeuT29XShA9mlf2pyw&sensor=false&libraries=places" type="text/javascript"></script>
<script>
    // Call the init function
  google.maps.event.addDomListener(window, 'load', initAutocomplete);

  var placeSearch, autocomplete;
  var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
  var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'long_name',
  country: 'long_name',
  postal_code: 'short_name'
  };
  setTimeout(function() {
  var container = document.getElementsByClassName('pac-container')[0];
  container.addEventListener('touchstart', function(e) {
  e.stopImmediatePropagation();
  setTimeout(function(){document.activeElement.blur();},300);
  });
  }, 500);

  function initAutocomplete() {
  autocomplete = new google.maps.places.Autocomplete(
  (document.getElementById('street_number')),
  {types: ['geocode']});

  autocomplete.addListener('place_changed', fillInAddress);
  }

  function fillInAddress() {
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
  document.getElementById(component).value = '';
  document.getElementById(component).disabled = false;
  }

  for (var i = 0; i < place.address_components.length; i++) {
  var streetAll;
  var addressType = place.address_components[i].types[0];
  if(componentForm[addressType]) {
  var val = place.address_components[i][componentForm[addressType]];
  $('#'+addressType).val(val);
  if(addressType == 'street_number'){
  streetAll = place.address_components[i][componentForm[addressType]];
  }
  if(addressType == 'route'){
  if(streetAll == undefined || streetAll == null || streetAll == ''){
  $('#street_number').val(place.address_components[i][componentForm[addressType]]);
  }else{
  $('#street_number').val(streetAll+', '+place.address_components[i][componentForm[addressType]]);
  }
  $('#route').val('');
  }
  }
  }
  new Shopify.CountryProvinceSelector('country', 'administrative_area_level_1', {
  hideElement: 'data-hide-ele'
  });
  for (var i = 0; i < place.address_components.length; i++) {
  var addressType = place.address_components[i].types[0];
  if(place.address_components[i].types[0] == 'administrative_area_level_1') {
  var val = place.address_components[i][componentForm[addressType]];
  $('#'+addressType).val(val);
  }
  }
  for (var component in componentForm) {
  $("#"+component).each(function(e) {
  if($.trim($(this).val()) == ''){
  $(this).closest('form').find('.select-btn-alter').removeClass('button-fill');
  }else{
  var email_id = $('#add_email_add').val();
  if(filter.test(email_id) && $('#add_phone').val() != '' && $('#add_email_add').val() != '' && $('#add_first_name').val() != '' && $('#add_last_name').val() != '' && $('#street_number').val() != '' && $('#locality').val() != '' && $('#postal_code').val() != '' && $('#add_p_note').val() != ''){
  $(this).closest('form').find('.select-btn-alter').addClass('button-fill');
  }
  }
  });
  }
  }
</script>
                  

4. Next, copy the following code:

{% if template contains 'product' or template contains 'account' %}
    {% include 'giftGoogleAutoComplete' %}
{% endif %}
                        

5. Under Layout, Select theme.liquid file
6. Include the above code before </body> tag. View Example
7. Select Save.

Step 10 - Checkout flow.

1. Under Snippets, select “subscription-cart-footer.liquid”
2. Find the below code:

{% if p.first == 'shipping_interval_frequency' %}
    {% assign cart_has_subscription_item = 'true' %}
{% endif %}
                    

3. Replace following code with above code:

{% if p.first == 'shipping_interval_frequency' or p.last == 'gift-recharge-immediately' or p.last == 'gift-recharge-email' %}
    {% assign cart_has_subscription_item = 'true' %}
{% endif %}
                    

4. Select Save.

Step 11 - Create a new API token.

1. Go to the Shopify Appstore
2. Search for GiftOtter App
3. Click add app button
4. Go to Naviation menu, Select MORE, then, Press API tokens. View Example
5. Next, Select Add API token View Example
6. Add Token Name. View Example
7. Select Create
8. A unique API token will be generated.
9. Copy the New token code
10. Save the token in your Notepad.

Step 12 - Replace old API token with new token

1. Under Snippets, select giftScript.liquid
2. Look for X-Gift-Access-Token: YOUR-GIFT-TOKEN
3. In place of “YOUR-GIFT-TOKEN” add the new token code which was saved in Notepad. View Example
4. Add the new token at ALL places replacing “YOUR-GIFT-TOKEN” in the snippet.

Step 13 - Add External JavaScript.

1. Under Layout, Select theme.liquid
2. Include the above code before </body> tag.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"> </script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.min.js" ></script>
  <script>
    var date = new Date();
    date.setDate(date.getDate());
    $('[data-ga-datepicker]').datepicker({
      orientation: "bottom",
      numberOfMonths: 1,
      ignoreReadonly: true,
      inline: false,
      minDate: 0,
      startDate: date,
      dateFormat:'MM dd, yy',
      autoclose: true,
      todayHighlight: true
    });
</script>
                

Step 14 - Globally access “shopify_common.js”.

1. Under Layout, Select theme.liquid
2. Find the below code View Example

{% if template contains 'customers' %}
  {{ 'shopify_common.js' | shopify_asset_url | script_tag }}
{% endif %}
                

3. Remove the condition from JS. View Example

Step 15 - Add Charge interval frequency.

1. You have manually add charge_interval_frequency in product metafields as per the Rulesets. View Example

Step 16 - Pre-populate the address.

1. Under Shopify APPs section.
2. Find Settings. Select Checkout. View Example
3. In Checkout, Find Enable JavaScript on page 1 of checkout. Checked it. View Example
4. Include the below code.