How to add functionality to the Shipping form in checkout

New Member
1 0 0

New to Shopify. Long-time L.A.M.P. web/app developer trying to get my head around Shopify methods and approaches. I've read lots of docs, searched this community and others, and watched lots of videos to get a basic grasp of initiating an app, Liquid, Node.js, React, the API, and GraphQL.

 

Here's what I'd like to add to my client's store:

1. On admin screen my client can add holidays (Thanksgiving, Christmas) and corresponding dates (attached image)

2. When a customer gets to the Shipping form, there is an additional dropdown populated with those holidays

3. The optional selected holiday is "saved" and exported with the order

 

At first I thought a custom private app, then maybe metafields, but I can't determine if a dropdown: 1.) is even allowed to be added to the shipping form, 2) how the selection is posted and saved to the order, or if that's even possible.

 

I'm not asking for code or a solution, but a simple "sorry, can't be done", or "you need to write a private app and I recommend a combo of Liquid, metafields, and Node.js," or "here's a couple of resources you obviously missed."  Thank you!

 

shipon.jpg

0 Likes
Shopify Partner
236 59 70

Hey @baquette,

 

The checkout.liquid asset is the one you would need to edit to add the holiday dropdown to the shipping section of the checkout. This asset is available to Shopify Plus merchants only. If your client's store isn't on Shopify Plus, then you will not have access to customizing this and the checkout page will not be able to be modified beyond the options available in your theme editor.

 

One other option is to use cart attributes. You would edit your cart.liquid (or cart-template.liquid) asset to include the dropdown box. The data from the dropdown box will display in a note on the customer's order in Shopify admin.

 

Here's my example code for cart-template.liquid:

 

<div class="form-horizontal">
  <p class="cart-attribute__field">
    <select id="ship-for-holiday" name="attributes[Ship For Holiday]">
      <option selected="true" disabled="disabled">Ship-for Holiday</option>
      <option value="No Holiday"{% if cart.attributes["Ship For Holiday"] == "No Holiday" %} selected{% endif %}>No - Ship Now</option>
      <option value="Christmas"{% if cart.attributes["Ship For Holiday"] == "Christmas" %} selected{% endif %}>Christmas</option>
      <option value="Father's Day"{% if cart.attributes["Ship For Holiday"] == "Father's Day" %} selected{% endif %}>Father's Day</option>
      <option value="Mother's Day"{% if cart.attributes["Ship For Holiday"] == "Mother's Day" %} selected{% endif %}>Mother's Day</option>
      <option value="New Years"{% if cart.attributes["Ship For Holiday"] == "New Years" %} selected{% endif %}>New Years</option>
      <option value="Valentine's Day"{% if cart.attributes["Ship For Holiday"] == "Valentine's Day" %} selected{% endif %}>Valentine's Day</option>
    </select>
  </p>
</div>

 

Let me know if you found this useful or if you need more help!

 

*Edit - screenshot attached* 

 

Screen Shot 2019-07-05 at 9.35.24 AM.png

 

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

1 Like
New Member
1 0 0

Brilliant. Thanks so much for this. My follow up question, just to clarify: would this value, e.g., "Christmas" be in an export of the order? (My client needs to map this to their fulfillment software's import).

 

Thanks again.

 

Brad

0 Likes
Shopify Partner
236 59 70

Yes, you can include cart attributes in an export of the orders. They are an attribute of the Order resource (note_attributes).

 

You may also include cart attributes in your fulfillment request emails by editing your notification template:

 

{% if attributes.size > 0 %}
  <h4>Additional details</h4>
  <p>
  {% for attribute in attributes %}
    {{ attribute | first }}: {{ attribute | last }}
  {% endfor %}
  </p>
{% endif %}

 

I'm glad I was able to help out. Cheers!

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

1 Like