Social Proof & Marketing Features

From theme version 7.3.0, Supermarket ships with a suite of social-proof and marketing popups: PDP urgency widget, cart-goal progress bar, recent-sales notifications, promotional popup, and exit-intent popup. All features are configured through a single window.supermarketThemeSettings object injected via BigCommerce Script Manager, so merchants can tune behavior without touching theme files.

Overview

Configuration via Script Manager

All settings live in one JavaScript snippet injected through the BigCommerce Script Manager. No schema.json or theme-editor changes are required.

1. Log in to BigCommerce Admin.
2. Go to Storefront > Script Manager.
3. Click Create a Script.
4. Set the fields:
   • Name of Script: Papathemes Social Proof
   • Placement: Footer
   • Location on page: All pages
   • Select script category: Essential
   • Script type: Script
5. Paste your snippet (see examples below) wrapped in <script> tags.
6. Click Save.

Starter snippet

Copy this as a starting point and adjust per feature. Keys you don't include fall back to the theme defaults.

<script>
  window.supermarketThemeSettings = {
    urgency: {
      enabled: true,
      viewCount: { min: 8, max: 42 },
      viewRange: { min: 3, max: 15 },
      lastOrder: { min: 2, max: 60 },
      orderRange: { min: 5, max: 30 },
      refresh: 20000
    },
    cartGoal: {
      enabled: false,
      currency: 'USD',
      hideForGuests: false,
      items: [
        { amount: 50,  icon: 'shipping', label: 'Free Shipping' },
        { amount: 100, icon: 'discount', label: '10% Off' },
        { amount: 150, icon: 'gift',     label: 'Free Gift' }
      ]
    },
    recentSales: {
      enabled: true,
      source: 'best-sellers',
      timing: { delay: 8000, duration: 6000, interval: 20000, maxShows: 3 },
      position: 'bottom-left',
      pages: 'all',
      excludePages: ['/cart.php', '/checkout']
    },
    promo: {
      enabled: false,
      title: 'Special Offer',
      description: 'Get 15% off your first order!',
      coupon: 'WELCOME15',
      buttonText: 'Copy Code',
      delay: 10000,
      freqDays: 7
    },
    exit: {
      enabled: false,
      mode: 'discount',
      title: 'Wait! Before you go...',
      description: 'Here\'s 10% off to help you decide.',
      coupon: 'STAY10',
      buttonText: 'Copy Code',
      buttonUrl: '',
      mobileDelay: 30000,
      freqDays: 7
    }
  };
</script>

PDP Urgency Widget

Shows live-like social proof on product pages: "12 people are viewing this" and "Last ordered 8 minutes ago". Numbers are deterministic per product + visitor using a hashed PRNG so repeat views look consistent.

Disable the widget:

<script>
  window.supermarketThemeSettings = {
    urgency: { enabled: false }
  };
</script>

Cart Goal Bar

A progress bar on the cart / mini-cart that gamifies reaching checkout thresholds (free shipping, percentage discount, free gift, etc.). Thresholds are display-only — create an actual BigCommerce promotion that matches each milestone so customers actually receive the reward.

Example — 3-milestone ladder:

<script>
  window.supermarketThemeSettings = {
    cartGoal: {
      enabled: true,
      currency: 'USD',
      items: [
        { amount: 50,  icon: 'shipping', label: 'Free Shipping' },
        { amount: 100, icon: 'discount', label: '10% Off' },
        { amount: 150, icon: 'gift',     label: 'Free Gift' }
      ]
    }
  };
</script>

Example — single milestone (free shipping only):

<script>
  window.supermarketThemeSettings = {
    cartGoal: {
      enabled: true,
      items: [
        { amount: 75, icon: 'shipping', label: 'Free Shipping' }
      ]
    }
  };
</script>

Important: Each amount must correspond to a real BigCommerce promotion (Marketing > Promotions). The bar only reflects progress visually — it does not create discounts.

Recent Sales Popup

A small popup in the corner of the page saying "Someone in Chicago just bought [Product Name] — 3 minutes ago". Products come from BigCommerce via GraphQL Storefront API.

Example — manual product list:

<script>
  window.supermarketThemeSettings = {
    recentSales: {
      enabled: true,
      source: 'manual',
      items: [
        { sku: 'SKU-001', location: 'New York, NY',    timeAgo: '2 minutes ago' },
        { sku: 'SKU-002', location: 'Los Angeles, CA', timeAgo: '5 minutes ago' },
        { sku: 'SKU-003', location: 'Chicago, IL',     timeAgo: '12 minutes ago' }
      ],
      timing: { delay: 5000, duration: 6000, interval: 15000, maxShows: 5 },
      position: 'bottom-right'
    }
  };
</script>

Troubleshooting — popup not showing?

• Verify the GraphQL Storefront API token is available — the theme emits a console warning if the token is missing.
• Check browser ad-blockers / privacy extensions — some strip the popup container.
• Confirm the current URL isn't in excludePages and that pages includes the current page type.
• Clear sessionStorage — dismissing the popup sets a papathemes_socialproof_recentSales_dismissed key that suppresses it for the remainder of the session.
• Open DevTools and check for [papathemes-socialproof] warnings.

Promotional Popup

A centered modal advertising a coupon or campaign with click-to-copy of the coupon code.

Example:

<script>
  window.supermarketThemeSettings = {
    promo: {
      enabled: true,
      title: 'Spring Sale - 20% Off',
      description: 'Use the code below at checkout for 20% off sitewide.',
      coupon: 'SPRING20',
      buttonText: 'Copy Code',
      delay: 8000,
      freqDays: 14
    }
  };
</script>

Exit-Intent Popup

Appears when the user is about to leave the page. On desktop, the trigger is the mouse moving out the top of the viewport. On mobile, since there is no mouse-leave event, the trigger is mobileDelay ms of user inactivity (no scroll / no tap).

Example:

<script>
  window.supermarketThemeSettings = {
    exit: {
      enabled: true,
      mode: 'discount',
      title: 'Wait! Here\'s 10% off',
      description: 'Don\'t leave empty handed — use this code at checkout.',
      coupon: 'STAY10',
      buttonText: 'Copy Code',
      mobileDelay: 30000,
      freqDays: 7
    }
  };
</script>

Newsletter Popup

The existing Newsletter popup is unchanged — all theme-editor settings (nl_popup_show, nl_popup_start, nl_popup_hide) and the NL_POPUP_HIDE cookie continue to work as before.

From theme 7.3.0 onward, the newsletter popup is coordinated with the new social-proof popups through a priority queue so only one popup is shown at a time. The queue order (highest priority first) is: Exit Intent > Promo > Newsletter > Recent Sales. No configuration is required to enable this — it kicks in automatically when the new popups are active.

Disable All

If you want to opt out of every new popup and keep only the legacy behavior:

<script>
  window.supermarketThemeSettings = {
    urgency:     { enabled: false },
    cartGoal:    { enabled: false },
    recentSales: { enabled: false },
    promo:       { enabled: false },
    exit:        { enabled: false }
  };
</script>

Debugging

• Open DevTools console and run console.log(window.supermarketThemeSettings) to confirm your snippet loaded and merged correctly.
• Check the console for warnings prefixed with [papathemes-socialproof] — they indicate missing tokens, invalid config, or GraphQL errors.
• Open the Network tab and filter for graphql to diagnose failed Storefront API calls (typical for recentSales with source: 'best-sellers' | 'new' | 'featured').
• Inspect sessionStorage and localStorage under Application in DevTools — look for papathemes_socialproof_* keys. Delete them to reset dismiss state while testing.
• Confirm the bundle loaded: window.__papathemesSocialproofActive === true in the console. If it is undefined, the theme-bundle has not initialized the module (most likely a cached legacy bundle — hard-reload the page).