Adding a gift wrap option to your Shopify cart drawer can significantly enhance your customer experience and potentially increase your average order value. This feature allows shoppers to add gift wrapping services without leaving the checkout flow, making the process seamless and convenient.
Understanding cart drawers and gift wrap options
Cart drawers (sometimes called slide-out carts) appear when customers add items to their basket, showing a summary of their selections without directing them to a separate page. Adding gift wrap functionality to this drawer keeps customers in their shopping flow.
Many store owners don’t realise that Shopify doesn’t offer this feature out of the box for cart drawers. The standard gift wrap option is designed for the cart page, not the drawer version that slides in from the side.
Creating your gift wrap product
First, you’ll need to create a dedicated product for your gift wrapping service:
Go to your Shopify admin dashboard and navigate to Products. Click “Add product” and create a new item specifically for gift wrapping. Give it a clear name like “Gift Wrap Service” and set an appropriate price. Make sure to upload an image that represents your gift wrapping style.
It’s important to set this product as “non-shipping required” since it’s a service rather than a physical product that needs separate shipping calculations.
Modifying your theme code
Now comes the technical part. You’ll need to edit your theme files:
Navigate to Online Store > Themes in your Shopify admin. Find your active theme and click “Actions” then “Edit code”. Look for the cart drawer file, which might be called “cart-drawer.liquid” or something similar (often found in the Sections or Snippets directory).
Within this file, locate the area where you want the gift wrap option to appear. Typically, this would be just before or after the cart total.
Adding the gift wrap checkbox
Insert HTML code for a checkbox that customers can tick to add gift wrapping. The code might look something like:
<div class="gift-wrap-option">
<input type="checkbox" id="gift-wrap" name="gift-wrap">
<label for="gift-wrap">Add gift wrap for £5.00</label>
</div>Implementing the JavaScript functionality
The checkbox needs JavaScript to function properly. Add code that detects when the checkbox is clicked and adds the gift wrap product to the cart. This typically involves using Shopify’s AJAX API to add the gift wrap product when checked and remove it when unchecked.
You’ll need to include the gift wrap product’s variant ID in your code, which you can find in the product’s URL in your admin panel.
<script>
document.addEventListener(\"DOMContentLoadedTesting your implementation
After making these changes, thoroughly test the functionality. Add products to your cart and check that the gift wrap option appears correctly in the drawer. Confirm that when selected, the gift wrap charge is added to the total and appears in the checkout process.
Styling your gift wrap option
To make the gift wrap option visually appealing, add some CSS styling to match your store’s aesthetic. Consider using a small gift icon beside the checkbox for visual clarity.
Adding this thoughtful feature to your shop not only improves customer experience but also showcases your attention to detail, potentially leading to increased sales and customer satisfaction.
