In stores where you are buying gifts for someone it is more than likely that the shipping (delivery) address is different than the billing address. Unfortunately, it is not possible to set the default state of the checkbox on the checkout page in Shopify, so you have to be creative in terms of how to overcome the problem. For Santa Monica Flowers, we came up with a solution based on three parts: 1) we created a form for capturing the delivery address on the cart page, 2) we hid the shipping section entirely on the checkout pages and 3) we added the additional attributes to the order notification email. Here is how we did it.

I’ll start with hiding the shipping address on the checkout page first, as it is the easiest. Here is the CSS that needs to be put in checkout.css:
#billing-is-shipping, #addresses .gright { display:none; }

This code hides the “Ship items to the above billing address” checkbox, and the right hand side of the screen where the shipping address would normally go.

Creating the form is straightforward HTML, with the caveat that fields must be named “attributes[foo]”, where foo is unique. This is the standard way to capture additional attributes on the cart page. To be honest, creating the form and making it look nice was the most time consuming part of this project. Once that was done I used the excellent jQuery Validation plugin to ensure the required fields were filled out and the phone number valid.

The final piece of the puzzle is to carry the shipping details through to the order notification email. Here is the liquid code that was used:

Delivery date: 
  date: {{ attributes.delivery_date }} time: {{ attributes.delivery_time }}

Delivery address:
    {{ attributes.address_location}}

    {{ attributes.recipient_first }} {{ attributes.recipient_last }} 
    {% if attributes.recipient_relationship.size > 0 %}({{ attributes.recipient_relationship }}){% endif %}
    {{ attributes.address_line1 }}
    {% if attributes.address_line2.size > 0 %}{{ attributes.address_line2 }}{% endif %}
    {{ attributes.address_city }}, {{ attributes.address_state }}  {{ attributes.address_zip }}
    {{ attributes.address_phone }}

So that is it. One downside to this approach is that if the customer really does want to have it shipped to their billing address they will need to enter the information twice, but in the case of most gift shops that is definitely not the 80/20 rule.