So, your customer arrives at the cart page, and realizes they wanted to send one cart item as a gift. Let's make it easy to enable this functionality right in the cart!

This article discusses updating your theme's code using the Liquid programming language. If you're not sure how to do this, contact us!

Create a Backup Theme

This is always a good idea to prevent your store's live cart page from accidentally breaking. In the Online Store sales channel, click the menu button next to Customize on your live theme, and click on Duplicate.

Next, on this duplicated theme, do the same, but this time click on Edit code.

Find the Cart Page

Every Shopify theme can do this a bit differently, but most have begun standardizing how themes are built. This is our best guess to help you find the cart page for your theme.

Open the templates folder, and look for cart.json. Find the type of section this template displays. In this case, it's main-cart-items.

Open the sections folder, and look for the name of the file mentioned above. Click the file to edit it.
Now, look for the item properties "for" loop. You can likely search the theme for properties to find this loop.
Find the end of the loop, and add some space for the new Liquid code

Add Liquid Code

Next. copy and paste the following code on a new line after the {% endfor %} we found at the end of the property loop. This script does a few things:

Goes through each line item property on the line item
Checks to see if the product is already being sent as a gift
If it isn't, display a new link which launches the Givy modal in update mode

{% assign has_property = false %} 
{% for property in item.properties %}
   {% if property[0] == '_givy_send_method' %} 
      {% assign has_property = true %}
      {% break %}
   {% endif %}
{% endfor %}

{% unless has_property %}
   <script>
      function sendAsGiftClicked() { event.preventDefault();
         window.GIVY.displayLineItemGiftingModal('{{ item.key }}', 
         {
            displaySubscriptionOptions: true, 
             addToCartSuccessCallback: function()     
             {window.location.reload()}});
         } 
   </script>
<a href="#" onClick="sendAsGiftClicked()" >Send as gift</a>
{% endunless %}

It should look something like this. Save the theme.

Check Cart Page

You may need to wait a minute, or clear your cache before your changes appear, but if you preview your backup theme, and add a non-gifted product to the cart, you should now see a Sent as gift button on each line item that isn't gifted!

Of course you can decide where this link appears, and how it should appear.

Cart Drawers

Updating cart drawers can be just as easy on some themes, and quite difficult on others. For the theme we looked at, there was a file located at snippets/cart-drawer.liquid that we could edit, and do the same thing we did above to get a similar result.

Creating a Custom Gifting Flow

Add Custom Line Item Properties on Gifted Products