As the title suggests, we’d like to display a checkbox on the Shopify checkout page/cart drawer in our Impluse theme 7.5.2. We would like this functionality purely for data collection to understand how many of our customers are purchasing our products as gifts. Thanks!
Hi @mmeals ,
Adding a checkbox directly on the checkout page can be quite complex. Instead, consider using the Easify Product Options app (free plan available) to easily create an “Is this a gift?” option on your product page. Many stores use similar checkboxes on their product pages for a smoother experience.
Here’s a demo for your reference 
:
- Product page:
With this app, not only can you add an “Is this a gift?” checkbox, but you can also use the Conditional logic feature to display additional Gift wrapping and Card options when the checkbox is selected, making it a great upselling opportunity.
- Simple settings:
Thanks for following up. Is it possible to add the checkbox to the cart drawer and/or checkout?
To add a “Is this a gift?” checkbox to the cart drawer or checkout page in your Shopify store using the Impulse theme, you can follow these steps:
Important Note
Making changes to the cart or checkout process involves editing theme code, so it’s recommended to have a backup of your theme to avoid issues. Additionally, due to restrictions, Shopify’s native checkout (for non-Plus merchants) has limited customization.
Adding a Checkbox to the Cart Drawer
Navigate to Your Shopify Admin:
Go to Online Store > Themes.
Click Actions > Edit code on your published theme.
Locate and Edit the Cart Drawer Code:
Find and open the cart-drawer.liquid or a similar file related to your theme’s cart drawer.
Look for the form section that handles the items or cart content.
Insert the Checkbox Code:
Add the following code within the form in the cart drawer to create the checkbox:
Style the checkbox using CSS to fit your theme’s design, if necessary.
Save and Test:
Save your changes.
Go to your store’s cart drawer, add an item, and ensure the “Is this a gift?” checkbox is displayed.
Optional: Collect Data on Checkbox Status
To collect data when the checkbox is checked, you may need to modify the theme’s JavaScript to store this information in the cart attributes, which can be accessed through the order’s properties when checking out. Here’s a basic example:
Modify the Javascript
Open the cart.js or relevant JavaScript file for cart interactions.
Add code to capture the checkbox state and send it to the cart attributes:
document.querySelector('#is-gift').addEventListener('change', function() { fetch('/cart/update.js', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ attributes: { 'Is this a gift?': this.checked ? 'Yes' : 'No' } }) }); });
Testing:
Test adding items to the cart and selecting the checkbox.
Ensure the attribute is reflected on orders (visible in the order details in the Shopify Admin).
Considerations for Checkout Customization
If you want to collect this data at checkout instead, Shopify’s native checkout for non-Plus merchants is limited in terms of custom fields. For more advanced customization, you would need Shopify Plus, which allows deeper checkout modification through checkout.liquid.