Creating a Custom Purchase Flow ⚒️

Whether you use the Shopify online store, or have a completely unique storefront, you can leverage Gift Card Pro’s delivery and scheduling tools within your own user interface. Any product can be used to issue a gift card with Gift Card Pro, so long as it contains the same properties added by the application using the standard form.

Please note: Do not use a product in the “Gift Cards” product category or any product that appears in the “View gift card products” section of your dashboard. Use of these products alongs side Gift Card Pro’s properties will result in gift cards being double issued.
More information on gift card products, as well as Shopify gift cards can be found: Here.

If you are using the Shopify online store, we recommend doing all of your edits on a separate development store, with your current theme copied over. Any changes made can then be copied over to your production store, as any new templates will only be selectable if they’re available on your live theme.

Create a new product template called “product.gift-card.json” and copy the contents of your product.json template into this new template.

If you instead have a product.liquid file, create a new product template called “product.gift-card.liquid”, and copy the contents of your product.liquid template into this new template

Additionally, create a new section named “main-product-gift-card.liquid” and copy the contents of your main-product.liquid section into this new section

Edit product.gift-card template to render “main-product-gift-card” instead of “main-product”. Here is an example of where that might be in a json template.

Once this is done, you can begin editing the “main-product-gift-card.liquid” section file. Find the code that generates the product options for your gift card, you will be putting all of your additional form fields underneath this.

In most cases, this will be a variant-radios tag. Where and what the variant selector is will vary depending on your theme.

Adding the following template under your variant picker should give your product all the required properties. Once an order is created in Shopify, Gift Card Pro will look for the properties, and issue a gift card. If the “_gcp_delivery_time” property is set to “Send Later”, and a delivery date is selected, the Gift Card will be scheduled for that particular date and time.

<!-- Gift Card Pro Form Fields -->

<!-- Send to self toggle -->
<div id="gcp_send_to_self">
  <input type="checkbox" id="sendToSelf" value="true" name="properties[_gcp_send_to_self]" onclick="toggleSendToSelf(this)"/>
  <label for="sendToSelf" class="gcp_label">Send to myself</label>
</div>

<!-- Script that allows the send to self toggle to hide the rest of the form -->
<script>
  function toggleSendToSelf(checkbox){

  var name = document.getElementById("gcp_recipient_name");
  var msg = document.getElementById("gcp_recipient_msg");
  var from = document.getElementById("gcp_sender_name");
  var phone =  document.getElementById("gcp_recipient_phone");
  var email =  document.getElementById("gcp_recipient_email");
  var sendNow =  document.getElementById("gcp_send_now");

  if(checkbox.checked){
    name.style.display = "none";
    msg.style.display = "none";
    from.style.display = "none";
    phone.style.display = "none";
    email.style.display = "none";
    sendNow.style.display = "none";
  } else {
    name.style.display = "block";
    msg.style.display = "block";
    from.style.display = "block";
    phone.style.display = "block";
    email.style.display = "block";
    sendNow.style.display = "block";
  }
}
</script>

<!-- Greeting card image url -->
<input required name="properties[_gcp_selected_card_image]" type="hidden" value="placeholder"/>

<!-- Standard gifting inputs -->
<div id="gcp_recipient_name">
  <label for="recipientName" class="gcp_label">Recipient’s Name</label><br/>
  <input required type="text" id="recipientName" placeholder="John Smith" name="properties[_gcp_recipient_name]" class="gcp_textbox">
</div> 
<div id="gcp_recipient_email">
  <label for="recipientEmail" class="gcp_label">Recipient’s Email</label><br/>
  <input required type="text" id="recipientEmail" placeholder="example@example.com" name="properties[_gcp_recipient_email]" class="gcp_textbox">
</div> 
<div id="gcp_recipient_msg">    
  <label for="recipientMsg" class="gcp_label">Gift Message</label><br/>
  <textarea type="text" id="recipientMsg" class="text-area field__input" placeholder="Enter gift message" name="properties[_gcp_message_text]" class="gcp_textbox"></textarea>
</div> 
<div id="gcp_sender_name">
  <label for="senderName" class="gcp_label">From</label><br/>
  <input required type="text" id="senderName" placeholder="John Smith" name="properties[_gcp_message_from]" class="gcp_textbox">
</div>

<!-- OPTIONAL: Ensure to validate for a valid mobile phone number, including the country code. eg. +18008881234 -->
<div id="gcp_recipient_phone">
  <label for="recipientPhone" class="gcp_label">Recipient’s Mobile Number</label><br/>
  <input type="text" id="recipientPhone" placeholder="000-000-0000" name="properties[_gcp_recipient_phone]" class="gcp_textbox">
</div>
<br/>

<!-- Send Now and Send Later buttons -->
<span id="gcp_send_now">
  <span class="gcp_radio">
  <input type="radio" id="sendNow" value="Send Now" name="properties[_gcp_delivery_time]" onclick="toggleDatePicker(this)" checked>
  <label for="sendNow">
    Send Now
  </label>
  <input type="radio" id="sendLater" value="Send Later" name="properties[_gcp_delivery_time]" onclick="toggleDatePicker(this)">
    <label for="sendLater">
      Send Later
    </label>
 </span>

  <!-- Script that allows for the toggling of the delivery date scheduler -->
  <script>
  function toggleDatePicker(button){
    var datePicker = document.getElementById("gcp_delivery_date");
    if(button.value === "Send Now"){
      datePicker.style.display = "none";
    } else if(button.value === "Send Later"){
      datePicker.style.display = "block";
    } 
  }
  </script>

  <!-- Delivery date scheduler. By default, this will only show up when Send Later is selected -->
  <span id="gcp_delivery_date" style="display: none;">
    <label for="deliveryDate" class="gcp_label">Delivery Date</label><br/>
    <input type="datetime-local" id="deliveryDate" class="gcp_textbox" placeholder="Delivery Date" name="properties[_gcp_delivery_date]">
  </span>
</span>

<!-- Beyond this are hidden fields that are required for GCP to generate a gift card. Some of these fixed inputs may need to be modified. -->

<!-- Delivery date timezone -->
<input name="properties[_gcp_delivery_timezone]" type="hidden" value="+10:00" />

<!-- Recipient language -->
<input name="properties[_gcp_locale]"type="hidden" value="en" />

<!-- Optionally add in a video message to send to the recipient. Enter the url of the saved video in the below field -->
<input name="properties[_gcp_video_url]"      type="hidden" value="" />
                        
<!-- The thumbnail image to use for the video -->
<input name="properties[_gcp_thumbnail_image]" type="hidden" value="" />

<!-- Leave this empty. For custom pricing, use the Shopify Draft Order API to create a custom priced product, containing all of the above properties -->
<input name="properties[_gcp_custom_value]"type="hidden" value="" />

If your product is still missing the required properties, make sure the fields are either inside of the product form tags, or are referencing the product form.

Once you have completed the order, the line item in Shopify should contain all of the properties added in the form:

After installation is complete, the form may not match the styling of your theme. This can be fixed by adding rules to the following classes:
“gcp_label” – all form field labels.
“gcp_textbox” – all textboxes and textareas.
“gcp_radio” – Send Now and Send Later radio buttons.

As an example, here are CSS rules that turn the Send Now and Send Later radio buttons into buttons for the Dawn theme. This can be used as a template to do the same with your own theme.

.gcp_radio input[type="radio"] {
  display: none;
}
.gcp_radio label {
  border: 1px solid;
  border-radius: 40px;
  background: #FFF;
  display: inline-block;
  margin: 0.7rem 0.5rem 0.2rem 0;
  padding: 1rem 2rem;
  cursor: pointer;
}
.gcp_radio input:checked+label{
  background: #000;
  color: #fff;
}

Can't find the answer in our documentation?
Contact Support