Placement types

ProofNudge offers three ways to place messages on your product pages. Each has different strengths depending on your theme and design goals.

Theme Blocks

The simplest option. Theme blocks are placed using the Shopify theme editor — just drag and drop them into your product page template. This method works with any Shopify 2.0 theme and requires no code.

  • Open your theme editor (Online Store > Themes > Customize).
  • Navigate to a product page template.
  • Click "Add block" in the product information section.
  • Select the ProofNudge block from the app blocks list.
  • Drag it to your preferred position (e.g., below the title, above add-to-cart).
Theme blocks are the recommended placement method for most stores. They're the most reliable and work consistently across theme updates.

CSS Selectors

For more precise control, you can target a specific HTML element using a CSS selector. ProofNudge will inject the message before, after, or inside the selected element.

  • Insert before: The message appears directly above the targeted element.
  • Insert after: The message appears directly below the targeted element.
  • Insert inside (prepend): The message appears as the first child inside the element.
  • Insert inside (append): The message appears as the last child inside the element.

Example selectors:

  • .product-form__submit — Targets the add-to-cart button.
  • .product__title — Targets the product title element.
  • [data-product-price] — Targets any element with a data attribute.
Tip: Use your browser's DevTools (right-click > Inspect) to find the right CSS selector for any element on your product page.

Product Image Overlay

Messages can be overlaid directly on top of the product image. This is the highest-visibility placement and works well for urgency messages (low stock, live viewers) and trending indicators.

When using image overlay placement, you get a 9-point positioning grid:

TL
TC
TR
ML
MC
MR
BL
BC
BR

TL = Top Left, TC = Top Center, TR = Top Right, etc.

The most common overlay positions are bottom-left (BL) and bottom-center (BC) — they don't obstruct the product image while remaining clearly visible.

Desktop vs. mobile positioning

ProofNudge lets you configure separate placement and positioning for desktop and mobile. This is important because product page layouts often differ significantly between screen sizes.

  • Desktop: The product image is typically on the left, with info on the right. Image overlays work well here. Theme blocks and CSS selectors in the info column are highly visible.
  • Mobile: The product image is usually stacked above the info. Image overlays might be scrolled past quickly. Consider placing messages in the info section on mobile for better visibility.
You can set different placement types for desktop and mobile. For example, use an image overlay on desktop and a CSS selector placement on mobile.

Targeting

Targeting controls which products display your campaign's messages. ProofNudge evaluates targeting rules using data from the storefront context — the product information already available on the page — so targeting is instant with zero database queries.

All products

The simplest option. Messages appear on every product page in your store. Good for general-purpose messages like real-time visitor counts or free shipping nudges.

Specific products

Select individual products by name or ID. Messages only appear on the specified product pages. Useful for running targeted campaigns on new launches, hero products, or products you want to push.

Collection targeting

Target all products within one or more collections. For example, show ranking messages only on products in your "Best Sellers" collection, or urgency messages only on products in "Limited Edition."

Collection targeting works with both manual and smart (automated) collections. ProofNudge reads the product's collection memberships directly from the storefront context — so even smart collections that use complex rules are evaluated correctly and instantly.

Tag targeting

Target products by their Shopify tags. For example, tag products as "high-demand" and create a campaign that only shows on products with that tag. You can target by a single tag or multiple tags.

Tags are read directly from the product data on the page, so tag-based targeting is instant.

How targeting evaluates: When a shopper visits a product page, ProofNudge checks the product's collections, tags, and ID against all active campaigns. This evaluation happens entirely from the storefront context (product data already on the page), so it adds zero latency. No database queries are needed for targeting.

Campaign priority

When multiple campaigns target the same product, ProofNudge displays messages from all matching campaigns. Messages are rendered in the order campaigns were created, with the most recently created campaign's messages appearing last.

If you want to limit the number of messages on a product page, use conditional logic within each campaign to control when messages appear. For example, set conditions so that urgency messages only show when stock is low, and trust messages only show when purchase counts are high.

Testing your placement

Before publishing a campaign, use the preview feature to see exactly how messages will look on a live product page:

  • In the campaign editor, click "Preview."
  • Enter a product URL from your store.
  • The preview loads your actual product page with the messages overlaid.
  • Switch between desktop and mobile views to verify both placements.
  • Adjust positioning, styling, and conditions until you're satisfied.

Common placement patterns

Pattern 1: Info column + image overlay

Place trust messages (purchase counts, rankings) below the product title using a theme block or CSS selector. Place urgency messages (live viewers, low stock) as an image overlay on the bottom-left. This separates the two types of proof visually.

Pattern 2: Stacked below title

Place 2-3 messages in sequence below the product title. Use a theme block for each message. This keeps all social proof in one area and works well on both desktop and mobile.

Pattern 3: Above add-to-cart

Place a single, high-impact message directly above the add-to-cart button. This is the last thing shoppers see before clicking buy — a low stock alert or purchase count here is very effective.

Related guides