Skip to content
Charm Charm Charm

Show points anywhere (collections, quick view & more)

The points on product page block covers the product template. For everywhere else — collection grids, search results, quick-view modals, featured-product sections, custom landing pages — Charm supports a lightweight custom placement: a plain <div> you paste into your theme code.

All divs on a page resolve in one batched request, and the line reuses the styling, wording, tone, and reward-page link you configured under Visibility → Points on product page. There is nothing new to configure in the app.

Modern themes: add it in the theme editor (no code)

On modern themes whose product cards are built from blocks — Shopify’s Horizon family and other recent themes — you don’t need code at all:

  1. Open Online Store → Themes → Customize and navigate to a page with a product grid (for example, a collection or a Featured collection section).
  2. Select the Product card group and click Add block → Charm points badge (under Apps).
  3. In the block’s settings, connect Product to the closest product using the dynamic-source picker (on many placements Shopify connects it automatically). The Style setting defaults to Compact — a subtle one-liner tuned for cards; switch to Standard for the full sentence with icon (better for featured-product sections).
  4. Save. Every repeated product card now shows the points estimate for its own product.

If the “Add block” list inside the product card doesn’t offer apps, your theme doesn’t accept app blocks there — use the code snippet below instead.

Any theme: add it with a code snippet

  1. In Shopify admin, go to Online Store → Themes → ⋯ → Edit code.
  2. Open your theme’s product card snippet — in Dawn that’s snippets/card-product.liquid, in Horizon snippets/product-card.liquid.
  3. Paste the snippet where you want the points line to appear (for example, under the price):
{%- assign charm_product = card_product | default: product -%}
<div
  data-charm-points
  data-style="compact"
  data-product-id="{{ charm_product.id }}"
  data-variant-id="{{ charm_product.selected_or_first_available_variant.id }}"
  data-price="{{ charm_product.selected_or_first_available_variant.price | divided_by: 100.0 }}"
></div>

The assign line makes the snippet work across themes: Dawn exposes the card’s product as card_product, while Horizon and most modern themes use product.

  1. Save. Every product card that renders through this snippet — collections, search results, product recommendations — now shows the points estimate.

Other placements

Anywhere you have a Liquid product object, the same snippet works — and on modern themes the Charm points badge app block can be added to any section that accepts app blocks:

  • Featured-product section: add the badge app block (its Product setting autofills from the section’s product), or use the snippet with the section’s product variable.
  • Quick-view modals: most themes render quick view from the same card or a product snippet — the div is picked up automatically when the modal opens.
  • Custom pages/sections: pass any product’s ids the same way.

Attribute reference

AttributeRequiredWhat it does
data-charm-pointsyesMarks the div for Charm to fill.
data-variant-idrecommendedCharm resolves the exact shop-currency price and the product’s collections from this id, so the estimate matches the product page and real awards exactly.
data-product-idrecommendedNeeded for product-specific bonus rules and product exclusions.
data-pricefallbackMajor units (e.g. 24.9). Only used if the variant lookup fails.
data-styleoptionalcompact (recommended in cards) renders a subtle one-liner — no icon, regular weight, points value in your accent color, short “+650 points” text. Omit for the full sentence with icon.
data-collection-idsfallbackComma-separated collection ids; only used if the variant lookup fails.

Good to know

  • No layout shift: the div stays empty until the estimate loads, and renders nothing when the program is off, the product is excluded, or the estimate is 0 points.
  • Estimates match everywhere: the batched lookup runs the same server logic as the product page — base rate, VIP multipliers, bonus campaigns, and collection/product bonus rules.
  • AJAX-friendly: collection filtering, infinite scroll, and quick view are detected automatically.
  • Compact copy: the compact text defaults to “+650 points” in every language (the points name is localized and declined automatically). You can reword it per language via the Compact card message field under Visibility → Points on product page → Text and translations.
  • Styling hooks: the rendered line carries charm-product-points--anywhere (and --compact for the compact style) for card-specific CSS tweaks. Colors and the icon follow your Visibility settings.
  • On the product template, prefer the Charm product points block — it updates live with variant and quantity changes.