How do I add an entry counter to the cart drawer?

This snippet shows order entries right in your cart drawer, giving customers real-time feedback as they shop.

Why is coding needed? Shopify doesn't currently offer a way to add app blocks to a cart drawer. There are also many third-party cart drawer apps, and the setup can differ slightly depending on your theme or cart app. You'll need basic coding skills to set this up.

Download the snippet file

Download the ready-to-use snippet file:

Download giveaway-cart-drawer-entries.zip

Step 1: upload the snippet to your theme

First, download and extract the zip file using the link above.

1. Download the zip file and extract it to get the giveaway-cart-drawer-entries.liquid file
2. Go to Online Store > Themes > Actions > Edit Code
3. In the left sidebar, find the Snippets folder
4. Right-click the Snippets folder
5. Select Upload file from the menu
6. Choose the extracted giveaway-cart-drawer-entries.liquid file
7. The file uploads to your theme automatically

That's it! The snippet is ready to use in your theme.

Step 2: add the snippet to the cart drawer

1. Find your cart drawer file. Common locations:
   • sections/cart-drawer.liquid (Dawn and most modern themes)
   • snippets/cart-drawer.liquid (older themes)
   • sections/main-cart-footer.liquid (some themes)
2. Add this line where you want the entry counter to appear (usually after the cart items, before the checkout button):

{% render 'giveaway-cart-drawer-entries', giveaway_id: 'YOUR_GIVEAWAY_ID' %}

Important: replace YOUR_GIVEAWAY_ID with your actual Giveaway ID from the Giveaway Ninja dashboard.

Step 3: get your Giveaway ID

1. Log in to your Giveaway Ninja dashboard
2. Open your active giveaway in the Campaign editor
3. Click GIVEAWAY and copy the Giveaway ID from the Giveaway Details section
4. Paste it into the render tag above

Example placement (Dawn theme)

In sections/cart-drawer.liquid, add the snippet like this:

<div class="cart-drawer__footer">
  {% render 'giveaway-cart-drawer-entries', giveaway_id: 'abc123xyz' %}  <!-- ADD THIS -->

  <div class="cart-drawer__footer-content">
    <!-- existing checkout button code -->
  </div>
</div>

Customization options

The snippet supports these parameters to customize its behavior and appearance.

Available parameters:

• giveaway_id: required. Your Giveaway Ninja Giveaway ID
• entries_label: text shown when earning entries. Use the {entries} placeholder. Default: "You're earning {entries} giveaway entries!"
• no_entries_label: text shown when no entries are earned. Default: "Add items to earn giveaway entries"
• min_order_not_reached_label: text shown when the minimum order value isn't met. Use the {value} placeholder. Default: "No entries, minimum order required: ${value}"
• loading_label: text shown while calculating. Default: "Calculating entries..."
• icon_emoji: icon or emoji to display. Default: "🎟️"
• hide_when_expired: hide the badge if the giveaway has expired. Default: false
• show_multiplier: show the time booster multiplier badge. Default: true

Example: basic customization

{% render 'giveaway-cart-drawer-entries',
  giveaway_id: 'YOUR_ID',
  entries_label: 'You have {entries} tickets!',
  no_entries_label: 'Add items to get tickets'
%}

Example: full customization with all options

{% render 'giveaway-cart-drawer-entries',
  giveaway_id: 'YOUR_ID',
  entries_label: '🎉 Earning {entries} entries with this order!',
  no_entries_label: 'Add qualifying items to earn entries',
  min_order_not_reached_label: 'Minimum purchase of ${value} required for entries',
  loading_label: 'Loading...',
  icon_emoji: '🎫',
  hide_when_expired: true,
  show_multiplier: true
%}

Example: hide when the giveaway ends

{% render 'giveaway-cart-drawer-entries',
  giveaway_id: 'YOUR_ID',
  hide_when_expired: true
%}

Example: custom minimum order message

{% render 'giveaway-cart-drawer-entries',
  giveaway_id: 'YOUR_ID',
  min_order_not_reached_label: 'Spend ${value} or more to earn giveaway entries!'
%}

Change colors: open the snippet file and edit the CSS in the <style> section:

.giveaway-cart-drawer-wrapper {
  background: linear-gradient(135deg, #YOUR_COLOR 0%, #YOUR_COLOR 100%);
  border-color: #YOUR_COLOR;      /* Border color */
}

.giveaway-cart-drawer-text {
  color: #YOUR_COLOR;             /* Text color */
}

.giveaway-multiplier-value {
  color: #YOUR_COLOR;             /* Multiplier badge color */
}

Testing checklist

Before publishing to your live theme:

1. Add an item to the cart and check the entry counter appears
2. Change the item quantity. The counter should update automatically
3. Remove an item. The counter should go down
4. If you use a minimum order value: check the badge shows the minimum order message when the cart total is below the threshold
5. If you use a minimum order value: add items until the minimum is reached and check the badge switches to showing entries
6. Test time multipliers if configured. The multiplier badge should appear
7. Test on a mobile device. It should display correctly
8. Check the browser console for errors (press F12)
9. Check the entry count matches your giveaway rules
10. Test the cart drawer opening after adding a product from the product page

Troubleshooting

Why doesn't the cart drawer counter appear?

• Check the snippet was saved correctly
• Check you added the render tag to your cart drawer file
• Make sure you replaced YOUR_GIVEAWAY_ID with your actual ID
• Make sure the Giveaway Ninja app is installed and active

Why is the counter stuck on "Calculating entries..."?

• This happens when the Giveaway Ninja main script loads after the cart drawer opens
• The latest version (in the download) handles this automatically by retrying when the cart drawer opens
• Make sure you're using the latest version of the snippet
• Check the browser console for the "[GiveawayNinja Cart Drawer] Access token now available" message

Why doesn't the counter update when the cart changes?

• Clear your browser cache
• Check the browser console for JavaScript errors
• The snippet listens for several cart events, so most themes are supported
• Some themes may need extra configuration. Contact support

Why does the counter show the wrong number of entries?

• Check your Giveaway ID is correct
• Check your giveaway rules in the dashboard
• The counter uses your actual giveaway settings (multipliers, minimum order and so on)
• If you use a minimum order value, make sure it's configured correctly in your giveaway settings

Why isn't the minimum order message showing?

• Make sure "Enable Minimum Order Value" is checked in your giveaway settings
• The minimum order value must be greater than 0
• The counter uses the "calculation base" (order subtotal or total, depending on your settings)
• Check the browser console for the API response to see the minimum order values

Cleanup after the giveaway

Once your giveaway ends, remove the entry counter:

1. Go back to your cart drawer file
2. Remove the {% render 'giveaway-cart-drawer-entries'... %} line
3. (Optional) Delete the snippet from the Snippets folder
4. Save and publish

Complete snippet code reference

The complete snippet file (about 630 lines, around 16 KB) includes all the functionality in this guide:

• Real-time entry calculation using the Giveaway Ninja API
• Automatic cart change detection
• Support for minimum order requirements
• Time multiplier display
• Error handling that won't break your cart drawer
• Dynamic cart drawer support
• Fully customizable labels and styling

Download the complete snippet code

No cart drawer? Use the giveaway entry counter for the Shopify cart page instead.