This snippet allows you to show the order entries directly on your cart drawer, providing real-time feedback to customers as they shop.

Why is coding needed? At the moment, Shopify does not provide a way to add App Blocks to a Cart Drawer. Additionally, there are many third-party cart drawer apps available, and the implementation might be slightly different depending on your theme or cart app.

Note: Implementing this requires minimum coding skills, though.

Video Tutorial

Watch the complete installation walkthrough:

[Screen recording will be available here]

Download the Snippet File

Download the ready-to-use snippet file:

Step 1: Upload Snippet to Your Theme

Step 2: Add Snippet to Cart Drawer

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

Step 3: Get Your Giveaway ID

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 the following parameters to customize its behavior and appearance:

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 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 modify 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 cart and verify the entry counter appears
2. Change item quantity - counter should update automatically
3. Remove an item - counter should decrease
4. If using minimum order requirement: Verify the badge shows the minimum order message when cart total is below the threshold
5. If using minimum order requirement: Add items until minimum is reached and verify the badge switches to showing entries
6. Test time multipliers if configured - multiplier badge should appear
7. Test on mobile device - should display correctly
8. Check browser console for errors (press F12)
9. Verify the entry count matches your giveaway rules
10. Test cart drawer opening after adding product from product page

Troubleshooting

Counter doesn't appear:

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

Counter stuck on "Calculating entries...":

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

Counter doesn't update when cart changes:

• Clear your browser cache
• Check browser console for JavaScript errors
• The snippet listens for multiple cart events - most themes are supported
• Some themes may need additional configuration - contact support

Wrong entry calculation:

• Verify your Giveaway ID is correct
• Check your giveaway rules in the dashboard
• The counter uses your actual giveaway settings (multipliers, minimum order, etc.)
• If using minimum order requirement, ensure it's configured correctly in your giveaway settings

Minimum order message not showing:

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

Cleanup After 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 (~630 lines, ~16 KB) includes all the functionality described in this guide, including:

• Real-time entry calculation using GiveawayNinja API
• Automatic cart change detection
• Support for minimum order requirements
• Time multiplier display
• Rock-solid error handling that never crashes
• Dynamic cart drawer support
• Fully customizable labels and styling