Samples and Gifts on Shopify: How to do it Without Apps

I constantly receive emails from desperate merchants whose Shopify stores have become painfully slow on mobile devices. When I access the control panel of their standard plan, I almost always find the same scene: a string of fifteen or twenty monthly applications installed just to do elementary things. One of the functions I most often see delegated to external and incredibly heavy apps is the management of free samples or complimentary products in the cart. If you sell cosmetics, perfumes, food, or crafts, you know well that offering a small gift or letting customers choose a couple of samples at checkout is a powerful lever to increase the average order value and build customer loyalty. But if you destroy your site's performance to do this, you are literally driving users away before they even reach the cart. In this practical guide, I want to show you how you can break this system, eliminating paid apps and implementing a native system for gifts and samples directly in the Dawn theme's Cart Drawer (or any standard theme based on Online Store 2.0). We will only use the resources that Shopify already provides you for free: Metafields, the cart's AJAX APIs, and a touch of well-engineered Custom Liquid code. It's time to regain control of your code, speed up mobile loading, and stop wasting money on monthly subscriptions for functionalities you can easily manage on your own.

1. Why the obsession with "Free Gift" apps destroys your mobile speed

Most merchants don't realize what happens behind the scenes when an application is installed to manage gifts in the cart. These apps don't just add a visual block to your store; they inject heavy and unoptimized external JavaScript files that block page rendering. When a user lands on your store from a cheap smartphone with an unstable 4G network, every kilobyte of extraneous script delays the moment the page becomes interactive, severely penalizing the Interaction to Next Paint (INP) index and overall Core Web Vitals.

The impact of external scripts on Shopify's Core Web Vitals

External "Free Gift with Purchase" applications use third-party servers to check if the user's cart is eligible for the gift. This means that every time a customer adds a product to the cart, the browser has to send a request to an external server, wait for the response, download the necessary files, and finally modify the page's DOM. This chain of uncoordinated asynchronous requests blocks the browser's main thread. The result is a visible delay in opening the cart (the infamous Cart Drawer "lag") which annoys the user and prompts them to abandon the purchase before checkout. By managing everything natively with Liquid code and Shopify's native APIs, calls remain fast, secure, and internal to Shopify's highly optimized infrastructure.

The hidden cost of recurring subscriptions for SMEs

In addition to performance damage, there's a significant economic factor for an SME or a start-up operating on a Basic or Shopify Standard plan. An app for gifts or sample selection costs, on average, between $9 and $29 per month. If you add this expense to all the other apps installed to fill in theme gaps, you end up with a fixed monthly cost that heavily erodes your operating margins. Eliminating these apps is not just a technical choice to make the site lightning fast, but a real financial cleanup operation. Those 200 or 300 euros saved each year can be reinvested in advertising campaigns or in improving the quality of your packaging.

2. The technical logic: how a native freebie works on Shopify Standard

Before touching a single line of code, we need to understand how Shopify's cart works at a logical level. The cart is nothing more than a list of items (line items), each characterized by a variant ID, a quantity, and some specific properties. To add a freebie or a sample natively, we don't need complex external databases. We just need to use the Shopify AJAX APIs, a set of free and very fast endpoints integrated into every store that allow you to add, update, or remove products from the cart in the background, without reloading the page.

Managing free products at the inventory level

One of the main problems when managing samples and gifts is inventory. Many merchants make the mistake of creating fictitious products that do not correspond to actual stock availability, generating logistical bottlenecks and forced refunds. With the native method, the freebie is a real product in all respects within your Shopify panel. This means that if a face cream sample runs out in your physical warehouse, its quantity will also drop to zero in the panel and the system will automatically stop showing it as a selectable option in the cart, preventing customers from choosing unavailable gifts.

Controlling the price threshold via Liquid code and AJAX APIs

The logic for determining if a user is eligible for a gift is based on the cart's total price (cart.total_price). Using the Liquid templating language, we can write a very simple condition that analyzes the cart's value in real time. If the total exceeds the set threshold (e.g., 50 euros), the code visually unlocks the gift section in the Cart Drawer. When the customer clicks the "Choose Gift" button, a JavaScript fetch call sends the gift variant ID to the `/cart/add.js` endpoint. Everything happens in a fraction of a second, smoothly and transparently for the user, exactly as expected by my personal development standard on Shopify.

3. How to configure the free product in the Shopify control panel

The first operational step is completed directly within the Shopify administration interface, without writing any code. We need to create the products that will serve as freebies or samples and set them up so they are ready to be added to the cart at no cost, but without users being able to find them by browsing the site normally and purchasing them individually for zero euros.

Create the "Gift" product with zero price and purchase restrictions

Enter your Shopify panel, go to Products and click "Add product." Create a product calling it, for example, "Moisturizing Cream Sample" or "IFG Free Mug." Set the price to 0.00 euros. It is crucial to ensure that the "Track quantity" option is active and that the correct number of available pieces in stock is entered. If you want to prevent a cunning user from adding one hundred copies of the same gift to the cart, we will have to manage this restriction via code, but at the product page level, I recommend including a clear description explaining that the item is reserved as a gift for eligible orders.

Prevent the freebie from being directly purchasable from the common catalog

To ensure that these zero-euro products do not appear in your e-commerce's general collections, internal searches, or on Google, we need to take a couple of precautions. First, create a specific collection called "Gifts" or "Gift-Pool" and make sure to exclude it from the main navigation menu. Second, you can use Shopify's custom Metafields to set a SEO exclusion tag, or simply manage the conditions of your dynamic "All products" collection by excluding items that have "Gift" as their product type. If you want to delve deeper into catalog cleanup, I recommend reading my guide on how to manage a complex Shopify catalog without weighing down the theme.

4. Integrating free sample selection into the Dawn Cart Drawer

Now that the free products are configured in the panel, we need to make them visible and selectable within the cart. If you are using the Dawn theme, the side cart (Cart Drawer) is managed in the file you find under the components or sections folder. This is where we will insert our Custom Liquid code block.

Modifying the cart-drawer.liquid file with Custom Liquid code

In the Shopify control panel, go to Online Store > Themes, click the three dots next to the active Dawn theme, and select "Edit code." Search for the file named `cart-drawer.liquid` (usually located in the `snippets` folder). Identify the exact point where the items already in the cart are listed, usually just before the subtotal block and the checkout button. At that point, we will insert an HTML section enclosed in a Liquid condition that shows the samples only if the cart is not empty. The code will retrieve the products from the "Gifts" collection using the `collections['omaggi'].products` object and display their small images with a quick add button.

Synchronizing the addition of the freebie without reloading the page

To prevent the page from reloading when the customer selects their sample, we need to intercept the button click and handle the operation with JavaScript. Here's an example of how to structure the asynchronous call securely to avoid tracking errors from Google Search Console: ```javascript function aggiungiOmaggioNativo(variantId) { let formData = { 'items': [{ 'id': variantId, 'quantity': 1 }] }; fetch(window.Shopify.routes.root + 'cart/add.js', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(formData) }) .then(response => response.json()) .then(data => { // Dynamically update the Cart Drawer without reloading if (document.querySelector('cart-drawer')) { document.querySelector('cart-drawer').renderContents(data); } else { window.location.reload(); } }) .catch((error) => { console.error('Error adding freebie:', error); }); } ``` This script sends the variant ID to the cart and, if you are using Dawn's native Cart Drawer, calls the theme's internal rendering method to instantly update the product list and subtotal, ensuring a smooth and immediate experience.

5. Automating the freebie in the cart when a spending threshold is exceeded

In addition to allowing the user to actively choose samples, you might want to automatically add a specific gift as soon as the cart value exceeds a certain spending threshold (e.g., a free water bottle for orders over 70 euros). This is the highest level of native automation and requires a small cart control script.

Dynamic calculation of cart value in real time

Within the script that handles cart updates, we need to read the value of the `cart.total_price` variable. Remember that in Shopify, prices are expressed in cents, so 70.00 euros is equivalent to `7000`. We will write a logical control in JavaScript that runs every time the cart is modified. If the subtotal is equal to or greater than 7000 cents and the gift product is not yet in the cart, the script will automatically send a POST request to add the gift variant. If you also want to optimize the visual presentation and user engagement at this stage, I invite you to read my article on how to optimize the Dawn Cart Drawer with interactive elements.

Automatic removal of the freebie if the customer drops below the threshold

This is the step where almost all homemade implementations fail: what happens if the customer adds products for 80 euros, receives the automatic gift, and then removes an item from the cart, dropping the total to 40 euros? If you don't handle this scenario, the user will take home the free gift without being entitled to it. Therefore, we need to implement a reverse control function. If the cart total drops below the 7000 cents threshold and the gift ID is present in the item list, the script must send a request to the `/cart/change.js` endpoint, setting the gift quantity to 0. This automation protects your e-commerce's profitability, preventing abuses of the promotional system in a totally invisible and friction-free way for the customer.

6. Conversion strategy: how to promote the freebie to increase average order value

Developing the technical solution is fundamental, but it's not enough on its own. To ensure that this implementation leads to a real increase in sales and average order value (AOV), you need to integrate it into a clear visual communication strategy. The customer must know exactly how much they need to spend to unlock their exclusive gift.

The placement of persuasive micro-text and the progress bar

The best way to encourage the user to add another product to the cart is to insert a dynamic progress bar just above the product list in the Cart Drawer. If the threshold is 50 euros and the user has 35 euros worth of items in the cart, the bar will fill up to 70% and a persuasive micro-text will say: "You only need €15.00 more to receive our exclusive sample set!" This visual stimulus leverages purchasing psychology and almost always prompts the user to return to category pages to look for a small accessory or complementary product, increasing the average order value without you having to spend a single cent on additional advertising.

Testing the effectiveness of samples to retain customers in post-sales

The selection of free samples not only makes the customer happy at checkout but is also an extraordinary marketing weapon at almost no cost. Allowing the user to actively choose which samples to receive (for example, by giving them the choice between "dry skin line" or "mature skin line") reduces the waste of unwanted samples and ensures that the customer will try a product at home that perfectly matches their needs. In the physical package you send, include a card with a personalized discount code for the purchase of the "full size" version of the sample they chose. In this way, you will transform a simple gift into a recurring conversion funnel that will drastically increase the repurchase rate (Retention Rate) of your standard Shopify store.

Discover my Shopify Maintenance and Support service.