How do I show entry badges on my collections grid?

This guide shows you how to add the Giveaway Entries Badge to your Shopify theme's collection grid, so entry counts appear on product cards.

There are two ways to add the badge to your product cards, depending on your theme.

Method A: app blocks (recommended for modern themes)

Use this if your theme supports app blocks in product cards (for example Dawn, Refresh, Sense, Craft, Studio, Horizon and most themes released after 2022).

App blocks let you add the badge in the theme editor without editing code:

1. Go to Shopify Admin > Online Store > Themes
2. Click Customize on your theme
3. In the theme editor, open a Collection page
4. Click a Product Card in the collection grid
5. Click Add block
6. Under the Apps section, select Entries Badge
7. Configure your giveaway settings and styling
8. Click Save

Note: if you don't see the option to add blocks to product cards, your theme doesn't support app blocks on product cards. Use Method B instead.

Method B: manual integration (for themes without app block support)

Use this if your theme doesn't support app blocks in product cards (for example Spotlight, Debut, Brooklyn and most themes released before 2022).

To make your theme support app blocks on product cards:

1. Go to Shopify Admin > Online Store > Themes
2. Click Actions > Edit code
3. Find your collection product grid file (common names below)
4. Edit the file to allow app blocks

Common product grid files to look for:

• sections/main-collection-product-grid.liquid
• sections/collection-template.liquid
• sections/featured-collection.liquid
• snippets/product-card.liquid
• snippets/card-product.liquid

Step 1: add app blocks to the schema

Scroll to the bottom of your file to find the {% schema %} section. Add this inside the schema JSON:

"blocks": [
  {
    "type": "@app"
  }
]

Important: add commas where needed. The Shopify editor highlights errors if the JSON is invalid.

Example schema structure:

{% schema %}
{
  "name": "Product Grid",
  "settings": [...],
  "blocks": [
    {
      "type": "@app"
    }
  ]
}
{% endschema %}

Step 2: pass the section variable to the product card snippet

In your product grid section file, find where the product card snippet is rendered. Add section: section to the render statement so the snippet can access app blocks.

Example: if your code looks like this:

{% render 'card-product', card_product: product %}

Update it to:

{% render 'card-product', card_product: product, section: section %}

Note: the snippet name may vary by theme (for example product-card, card-product or product-grid-item).

Step 3: add the rendering code

Open the product card snippet, find where you want the badge (usually near the product price or title), and add this code:

{%- comment -%}Render app blocks with product context{%- endcomment -%}
{%- if section.blocks.size > 0 -%}
  {%- for block in section.blocks -%}
    {%- case block.type -%}
      {%- when '@app' -%}
        {%- if card_product and card_product.id -%}
          <div class="app-block-product-wrapper"
               data-product-id="{{ card_product.id }}"
               data-product-handle="{{ card_product.handle }}"
               data-variant-id="{{ card_product.selected_or_first_available_variant.id }}"
               data-product-price="{{ card_product.selected_or_first_available_variant.price }}">
            {%- render block -%}
          </div>
        {%- endif -%}
    {%- endcase -%}
  {%- endfor -%}
{%- endif -%}

Note: the product variable might have a different name in your theme (for example card_product or product_item). Check your theme file and adjust.

After saving, you can add the Entries Badge app block in the theme editor.

Test your integration

1. Go to your Shopify storefront
2. Open a Collection page
3. You should see the badge on each product card in the grid
4. The badge displays entry counts based on your giveaway rules

Why isn't the badge showing on my collection grid?

• Make sure you added the app block in the theme editor
• Check that your giveaway is active and not expired
• Check the app block is enabled on the Collection page template
• For Method B: make sure the wrapper code and schema were added correctly

Summary

• Method A (modern themes): add the app block directly in the theme editor
• Method B (older themes): edit your theme code to enable app blocks in product cards
• Configure your badge settings in the theme editor
• Test on a collection page to check the badge appears correctly
• Publish to your live theme when you're ready

Next, add a giveaway entry counter to the Shopify cart so shoppers see their total before checkout.

Done

That's it! Your collection grid now shows giveaway entry counts on product cards.