How do I show giveaway entries on Shopify product pages?

Show customers how many giveaway entries they'll earn right on the product page. The badge updates automatically when they pick a different variant or change the quantity, which gives them a reason to buy more.

Before you start

Before adding the Entries Badge, make sure you have a giveaway with the "Make a Purchase" entry action configured.

1) Open the theme editor and find the product page

From your Shopify Admin, go to Online Store > Themes, then click Customize to open the theme editor.

2) Choose the position and add the Entries Badge block

Scroll through your product page template and find where you want the Entries Badge. Usually that's near the product price or the add to cart button.

3) Select the Entries Badge app block

Click Apps in the block selection menu and select Entries Badge.

4) Configure the Giveaway ID

Open the Giveaway Ninja Campaign editor and click GIVEAWAY. Copy the Giveaway ID from the Giveaway Details section, then paste it into the Giveaway ID field in the block settings.

5) Customize the Entries Badge

The Entries Badge has plenty of customization options to match your store's design and giveaway mechanics. These are the main settings.

API configuration

• Giveaway ID: your unique giveaway identifier (required)
• Hide if giveaway is not active: automatically hides the badge when the giveaway is disabled, hasn't started yet or has ended

Display settings

• Icon Type: choose Image or Emoji
• Icon Emoji: set a custom emoji when using the Emoji icon type (default: 🎟️)
• Icon Image URL: use a custom image URL when using the Image icon type
• Icon Background: background color for the icon
• Icon Size: icon dimensions (16-64px)
• Icon Padding: spacing around the icon (0-20px)
• Entries Label Template: customize the text. Use {entries} as a placeholder, for example "🎟️ {entries} entries"
• Font Size: text size (10-30px)
• Position: Block, Inline, Float Left or Float Right
• Font Weight: Normal or Bold
• Text Alignment: Left, Center or Right

Styling

• Border Width: border thickness (0-10px)
• Border Color: custom border color
• Border Radius: rounded corners (0-20px)
• Background Color: badge background color
• Text Color: badge text color
• Horizontal Padding: left and right spacing inside the badge (0-30px)
• Vertical Padding: top and bottom spacing inside the badge (0-30px)
• Margin: spacing around the badge (0-30px)

Block templates

Customize how different entry rules are displayed:

• Product Quantity Rule Template: template for quantity-based rules. Use the {entries} and {quantity} placeholders, for example "⭐ {entries} every {quantity} purchased"
• Product Amount Rule Template: template for amount-based product rules. Use the {entries} and {amount} placeholders, for example "⭐ {entries} per ${amount} spent"
• Order Rule Template (Per Amount): template for order-level rules based on amount spent, for example "🛒 {entries} per ${amount} spent"
• Order Rule Template (Fixed): template for fixed entries per order, for example "🛒 {entries} entries per order"

The product templates follow your product and variant rules.

Visibility settings

• Show Total Entries: display the total entries count
• Show Order Rules: display order-level rules (hidden automatically when the giveaway uses product-specific rules only)
• Show Product Rules: display product-specific rules
• Time Booster Background: background color for time booster displays
• Time Booster Text Color: text color for time booster displays
• Time Booster Font Size: font size for time booster text (10-30px)

Time boosters display your purchase period multipliers.

Advanced settings

• Enable Dynamic Updates: automatically update entries when the variant or quantity changes
• Quantity Input Selector: CSS selector for the quantity input field (for dynamic updates)
• Quantity Buttons Selector: CSS selector for the quantity increase and decrease buttons (for dynamic updates)
• Custom CSS: add your own CSS to customize the badge further

Troubleshooting

Why doesn't the entries badge appear on my product page?

• If the block appears, then disappears, click SAVE in the theme editor first.
• Check the Giveaway ID is entered correctly.
• Switch off "Hide if giveaway is not active" in the API Configuration settings while you test.
• Check the giveaway has the Make a Purchase entry action configured.
• Make sure the GiveawayNinja Script app embed is on under Theme Editor > App Embeds.
• Still nothing? Check why your giveaway isn't showing up on your store.

Why does the badge show the wrong number of entries?

• Check the giveaway rules in the Giveaway Ninja dashboard. The badge follows your purchase entry rules.
• Check the product is eligible for the giveaway's entries.
• Turn on Enable Dynamic Updates if you want the count calculated in real time.

Why doesn't the badge update when the variant or quantity changes?

• Make sure Enable Dynamic Updates is on.
• Check the Quantity Input Selector and Quantity Buttons Selector match your theme's selectors.
• Clear your browser cache and test again.
• Open the browser console (F12 > Console) and look for JavaScript errors.

Show the same count across the store: on your collections grid, in the cart, the cart drawer and on the checkout and thank-you pages.