Unlocking Free Gifts & Custom Fields on Shopify: A Community Deep Dive

Hey there, fellow store owners! It’s a common scenario: you’re setting up your Shopify store, maybe migrating from another platform like Wix, and you hit a wall trying to do something that felt simple elsewhere – like offering a free gift or adding a custom question right in the checkout. Trust me, you’re not alone. This exact challenge popped up recently in the Shopify community, and the discussion that followed offered some fantastic insights we absolutely need to talk about.

Our friend CLD_Fab kicked things off, migrating from Wix and looking to add a free gift dropdown and a "Where did you hear about us?" question to their checkout. The immediate reaction? A bit of surprise at Shopify’s "lack of customization" in that crucial final step, especially when trying to avoid piling on more paid apps. This is a sentiment many of us can relate to!

The Shopify Checkout Reality Check

First things first, let’s address the elephant in the room. As community member mastroke rightly pointed out, "In Shopify, the checkout page is heavily restricted." This isn’t a bug; it’s a feature. Shopify locks down the checkout for security, consistency, and conversion optimization. They want that final step to be as smooth and predictable as possible. This means that while you can customize your cart page extensively, the actual checkout funnel (where you enter shipping, payment, etc.) has very limited customization, especially on a Basic plan.

So, what does this mean for our free gifts and custom questions? It means we need to get creative before the customer hits that final checkout button. The cart page, or even the cart drawer, becomes your primary canvas.

Option 1: The App Route (Sometimes Free!)

Before diving into code, it’s worth noting that apps can indeed solve this. Mastroke suggested looking into free options like AppHero Free Gift Upsell BOGO and AOV.ai Bundles Upsell. These can often handle the logic for displaying gifts based on cart value or specific products without you needing to write a single line of code. CLD_Fab initially considered an app but later "ditch[ed] the free gift for a free gift app that pops up" due to many variants making a dropdown cumbersome, proving apps are a valid, sometimes preferred, solution. However, CLD_Fab’s original goal was to avoid rising monthly app costs, which leads us to the next, more hands-on approach.

Option 2: Diving into Code – Cart Attributes to the Rescue

This is where the community really shines, providing a robust, code-based solution that leverages Shopify’s built-in cart attributes. These are essentially custom fields you can add to your cart form that will then be saved with the order. It’s a fantastic way to capture extra information without needing a paid app.

Wsp, another helpful community member, provided a brilliant step-by-step guide and code snippet that CLD_Fab ultimately used to get their solution working. Here’s how you can implement a free gift selector and a custom question field directly on your cart page or cart drawer:

Step-by-Step: Adding Custom Fields to Your Cart

This method involves editing your theme code, so always remember to duplicate your theme first before making any changes. That way, if something goes awry, you can easily revert.

1. Access Your Theme Code:
   • From your Shopify Admin, go to Online Store → Themes.
   • Find your active theme (e.g., "Ecomus" as CLD_Fab was using), click Actions → Edit Code.
2. Locate Your Cart File(s):

   Depending on your theme setup, your cart UI might be in one or more of these files. You’ll want to open whichever applies:

   • cart-drawer.liquid (for themes with a slide-out cart)
   • main-cart.liquid
   • cart.liquid (for themes with a dedicated cart page)
3. Find the Right Spot:

   Scroll through the file until you find a logical place to insert your custom fields. Wsp suggested looking for the "Checkout button section," "ending area," or "cart summary section." You want it to be clearly visible to the customer before they proceed.

4. Insert the Code:

   Copy and paste this HTML code into the chosen location:

   
   
   Choose your free gift
   
   
       Select a gift
       Gift A
       Gift B
       Gift C
     
   
   Where did you hear about us?
   
   
   
   

5. Ensure it’s Inside the Cart Form:

   This is crucial! The code you just added must be nested within the main cart form tags for the data to be saved. Double-check that it’s between

   and its closing
   tag.

6. Save Changes:

   Click the Save button in the top right corner.

7. Test on Your Store:

   Go to your live website, add a product to your cart, open the cart drawer or go to the cart page, select a free gift, fill in the referral field, and click checkout.

8. Verify Order Data:

   Finally, go back to your Shopify Admin → Orders, open the test order you just created. You should see "Free Gift" and "Referral Source" listed under the order details, complete with your selections!

Handling Cart Drawer vs. Main Cart

CLD_Fab ran into a common snag: "If I put the code in Cart-Drawer it doesnt show in the main cart." Wsp clarified that this is totally normal. Many Shopify themes handle the cart drawer (a slide-out panel) and the main cart page (a dedicated page) as separate templates (e.g., cart-drawer.liquid and main-cart.liquid). If you want your custom fields to appear in both places, you’ll need to add the code to both respective files.

But don’t worry about duplication! Wsp assured us that Shopify smartly merges these cart attributes. They are "saved once per field" and "displayed once in the final order." So, even if the fields appear in both views, your order won't have duplicate information.

CLD_Fab successfully implemented this, even doing some "vibe coding" to ensure values saved across both cart types and fine-tuning how the enter key behaved. It just goes to show that with a little persistence, these customizations are very achievable!

Bonus Tip: "Where Did You Hear About Us?" - The Native Way

For the "Where did you hear about us?" question, there’s an even simpler, native Shopify option if you prefer. As Trii pointed out, you can often enable "order notes" directly in your theme settings, and it will appear on the cart page for free. This is a great, hassle-free way to gather general customer notes without touching any code if that’s all you need.

So, there you have it! While Shopify’s checkout might feel restrictive at first, the community has clearly shown that with a bit of theme customization and understanding of cart attributes, you can absolutely add those coveted free gift selectors and custom questions to your store without breaking the bank on additional apps. It’s all about working within the platform’s strengths and leveraging those clever workarounds shared by fellow merchants. Happy customizing!