# Displaying Entries on Product Pages & Product Cards

Giveaway Gator can show entry calculations on both individual product pages (PDP) and collection page product cards.

## What It Shows
- **Base entries** based on product price and dollar-per-entry setting
- **Bonus entries** from product bonuses, multipliers, or bonus periods
- **Visual indicators** like "2X" badges for multipliers

## Prerequisites
1. Giveaway Gator app installed and configured
2. Active promotion with products selected
3. App embed enabled in your theme

## Product Pages (PDP) — No Code Required

To show entries on individual product pages, use the **Giveaway Entry Tag** app block through the Shopify theme editor:

1. Go to **Online Store > Themes > Customize**.
2. Navigate to your **product page** template.
3. Click **Add block** in the product information section.
4. Under **Apps**, select **Giveaway Entry Tag**.
5. Position it where you'd like (e.g., below the price), then click **Save**.

The entry tag automatically displays the correct entry count based on the product's price and your promotion settings. It updates when a customer selects a different variant.

Each Giveaway Entry Tag block has its own settings in the theme editor — a **Display style** (Minimal or Detailed), an optional **custom colors** override, font size, and border radius. Leave custom colors off to inherit your global Giveaway Gator app embed styling so every tag matches.

## Collection Page Product Cards

How you add entry tags to collection product cards depends on your theme.

### Horizon and newer themes — No Code Required

Shopify's Horizon theme and other up-to-date Online Store 2.0 themes let you add the **Giveaway Entry Tag** block directly to product cards through the theme editor — no code needed. On a collection or product-grid section, the block automatically reads each card's own product, so every card shows the right entry count.

1. Go to **Online Store > Themes > Customize**.
2. Navigate to your **collection** template (or wherever your product grid appears).
3. Select the product card / product grid section and click **Add block**.
4. Under **Apps**, select **Giveaway Entry Tag**.
5. Position and style it, then click **Save**.

> **Tip:** If your section doesn't offer **Add block** for app blocks, your theme may not support app blocks on product cards yet — use the code snippet below instead.

### Older themes — Code Snippet

On themes that don't support app blocks on product cards, add this HTML snippet to your theme's product card template:

```html
<div
  class="gg-entry-tag"
  data-gg-entry-tag
  data-product-id="{{ card_product.id }}"
  data-price="{{ card_product.price | money_without_currency | strip }}"
>
  <span class="gg-entry-total"></span>
  <span class="gg-entry-bonus"></span>
</div>
```

> **Important:** Make sure the product variable (e.g., `card_product`) matches what your theme uses in the same snippet or section.

#### Common Template Locations
- `snippets/product-card.liquid`
- `snippets/card-product.liquid`
- `sections/collection-template.liquid`
- `sections/main-collection.liquid`

#### Variant Support

Include variant data for automatic price updates when customers select different variants:

```html
<div
  class="gg-entry-tag"
  data-gg-entry-tag
  data-product-id="{{ product.id }}"
  data-price="{{ product.selected_or_first_available_variant.price | money_without_currency | strip }}"
  data-variant-id="{{ product.selected_or_first_available_variant.id }}"
  data-variants="{{ product.variants | json | base64_encode }}"
>
  <span class="gg-entry-total"></span>
  <span class="gg-entry-bonus"></span>
</div>
```

Variant updates work automatically via URL parameter watching and DOM selector watching.

## CSS Customization

```css
.gg-entry-tag {
  --gg-tag-bg: #f4f4f4;
  --gg-tag-text: #333333;
  --gg-tag-accent: #000000;
  --gg-tag-bonus: #17a2b8;
  --gg-tag-font-size: 16px;
  --gg-tag-border-radius: 4px;
}

.gg-entry-multiplier {
  --gg-tag-multiplier-bg: #059669;
  --gg-tag-multiplier-text: #ffffff;
  --gg-tag-multiplier-radius: 4px;
}
```

> **Tip:** It's best to use the style settings in the App Embed settings to keep things consistent across your store.

## Testing Entry Tags

Open your browser console and run:
```javascript
window.GiveawayGator.test();    // Enable test mode
window.GiveawayGator.test(false); // Disable test mode
```

## Troubleshooting

**Entry tag not showing:**
- Verify the app embed is enabled in your theme
- Check that `window.GiveawayGator` exists in the browser console
- Ensure all required attributes are present (`class`, `data-gg-entry-tag`, `data-product-id`, `data-price`)
- Verify inner spans exist (`gg-entry-total`, `gg-entry-bonus`)

**Shows "0 entries":**
- Check the app embed is enabled
- Verify the product liquid variable matches the rest of the section
- Check that `data-price` has a valid number
- Verify the dollar-per-entry setting in your promotion

**Variants not updating:**
- Ensure `data-variants` attribute is present
- Check that variant data is properly base64-encoded