Unlock Custom Cart Options: Add a Checkbox to Your Shopify Cart Drawer (and Order Printer!)

Hey there, fellow store owners! Ever found yourself needing a little extra something on your cart page or drawer? Maybe a special offer, a free add-on, or a simple opt-in that isn't a product itself? It's a surprisingly common request, and it often leads to some fantastic discussions in the Shopify Community forums. Today, I want to dive into a recent thread that perfectly illustrates how to tackle this, specifically focusing on adding a custom checkbox to your cart drawer – and making sure that information follows through to your orders and even your Order Printer documents.

This all started with a great question from a store owner, cha241, who was looking to add a "Free Scoop" checkbox to their cart drawer on the Horizon theme. The goal was simple: let customers opt-in for a free item (not a product that needs to be added to the cart normally), and have that choice reflected in the order notes as "Scoop: Yes." Sounds straightforward, right? Well, it involves a little peek under the hood of your Shopify theme, but don't worry, it's totally doable!

Adding a Custom Checkbox to Your Cart Drawer: The "Free Scoop" Example

The core of this solution comes from a super helpful community member, Maximus3, who provided a clear, step-by-step guide. This method leverages Shopify's "cart attributes," which are essentially custom fields you can attach to an order. Here's how you can implement it:

Step 1: Access Your Theme Code

First things first, you'll need to get into your theme's code editor. Always, and I mean always, duplicate your theme before making any code changes. This way, you have a safe rollback point if anything goes awry.

1. From your Shopify admin, go to Online Store > Themes.
2. Find your current theme, click the … (three dots) button, and select Duplicate.
3. Once duplicated, click the … button again on your active theme and choose Edit Code.

Step 2: Locate the Right File

For the cart drawer, especially with modern themes like Horizon, you're often looking for files related to the cart's UI. Maximus3 pointed to a specific file, which is usually found under the "Sections" directory:

• Open the file named main-cart-footer.liquid.

Here's what that file might look like in your editor (the screenshot from the thread helps pinpoint it):

Step 3: Find the Insertion Point and Paste the Code

You'll want to place this checkbox strategically, usually somewhere near the cart totals or checkout button. Maximus3 provided a screenshot to guide this:

Paste the following code into that exact spot:

  

  Free Scoop
  
    
    Yes
  

After pasting, it should look something like this:

Make sure to hit Save!

A Quick Note on Cart Attributes: The key part here is name="attributes[Free Scoop]". This tells Shopify to store the value "Yes" (because of value="Yes") under a cart attribute named "Free Scoop." The Liquid snippet {% if cart.attributes['Free Scoop'] == 'Yes' %}checked{% endif %} ensures that if the customer has already checked the box and navigated away or refreshed, it remains checked when they return to the cart.

Maximus3 wisely pointed out that while this checkbox will be visible on your cart drawer and the main cart page, it will not appear in the checkout process itself. However, the good news is that this attribute will show up in your Shopify order details, looking something like this:

Displaying Your Custom Field in Order Printer Documents

After successfully implementing the checkbox, cha241 had a smart follow-up question: "How do I get this field to show up on my Order Printer documents?" This is a crucial step for fulfillment teams who rely on these documents for accurate order processing. Luckily, Maximus3 had the answer for this too!

When a cart attribute is submitted with an order, it becomes an order.attribute. To display this in your Order Printer template (or any other custom order notification/document), you'll need to add a small Liquid snippet that checks for its presence.

Step 1: Access Your Order Printer Template

Go to Apps > Order Printer (or whatever app you use for custom printing) and select the template you wish to edit.

Step 2: Add the Conditional Code

Within your Order Printer template, find a suitable place where you want this "Free Scoop" notification to appear (e.g., near the order items or customer notes). Then, paste one of these Liquid snippets:

Option 1: Using order.attributes

This is generally the most direct way to access attributes associated with the entire order:

{% if order.attributes['Free Scoop'] != blank %}
Free Scoop
{% endif %}

Option 2: Using order.cart_attributes

While order.attributes is usually sufficient, some older or specific setups might benefit from explicitly checking order.cart_attributes. It's good to know both exist, but the first option is often preferred for simplicity and directness if it works.

{% if order.cart_attributes['Free Scoop'] != blank %}
Free Scoop
{% endif %}

As cha241 confirmed, the first snippet "worked like a charm!" which is always great to hear!

This whole exchange really highlights the power of Shopify's flexibility and the incredible value of the community. What might seem like a small custom feature can make a big difference in customer experience and internal workflow. By understanding how to tap into cart attributes and display them where needed, you're unlocking a whole new level of customization for your store. Don't be afraid to experiment (on a duplicated theme, of course!) and leverage these simple code snippets to tailor your Shopify experience exactly how you need it. Happy customizing!