Real-World Examples

This page gives you 12 complete, copy-ready examples that store owners actually use with HTMLBox Pro. Each example includes the business goal, the hook to use, which conditions to set, and the full HTML/CSS code — ready to paste into the code editor.

Example 1: Announcement Bar — Free Shipping Threshold

Goal: A persistent, full-width bar below the header on every page reminding customers of the free shipping threshold. Unobtrusive but always visible.

Hook: displayTop
Conditions: None (show to all visitors)
Scheduling: None (always on)

<div style="background:#1a56db;color:#fff;text-align:center;padding:10px 20px;font-size:14px;font-weight:500;letter-spacing:.01em;">
  Free delivery on all orders over <strong>€50</strong>
  &nbsp;·&nbsp;
  <a href="/delivery" style="color:#bfdbfe;text-decoration:underline;">See delivery info</a>
</div>

Tips:

Keep the message under 12 words — users scan, not read, announcement bars
Test different threshold amounts with A/B testing to find which one increases average order value the most
Add a close button (×) if you want to respect users who dismiss it; requires a small JavaScript toggle

Example 2: Holiday Promotional Banner with Auto-Expiry

Goal: A Christmas sale banner on the homepage that goes live December 1st and disappears automatically on December 26th. Zero manual takedown required.

Hook: displayHome
Conditions: Date Range: December 1 – December 26
Scheduling: Start = December 1, End = December 26

<div style="background:linear-gradient(135deg,#c0392b,#922b21);color:#fff;border-radius:8px;padding:32px 24px;text-align:center;margin:0 0 24px;">
  <p style="margin:0 0 4px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;opacity:.85;">Limited time</p>
  <h2 style="margin:0 0 8px;font-size:28px;font-weight:700;">Christmas Sale — Up to 30% Off</h2>
  <p style="margin:0 0 20px;font-size:16px;opacity:.9;">On all software licenses and digital products</p>
  <a href="/sale" style="display:inline-block;background:#fff;color:#c0392b;padding:12px 28px;border-radius:6px;font-weight:600;text-decoration:none;font-size:15px;">
    Shop the sale &rarr;
  </a>
</div>

Example 3: Payment Trust Badges on Every Product Page

Goal: A row of payment method icons and a "Secure checkout" badge directly below the Add to Cart button on every product. Reduces purchase hesitation at the moment of decision.

Hook: displayProductAdditionalInfo
Conditions: None (all products, all visitors)

<div style="display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 0;border-top:1px solid #e5e7eb;margin-top:12px;">
  <span style="font-size:12px;color:#6b7280;margin-right:4px;">We accept:</span>
  <!-- Replace /img/payment/ paths with your actual payment icon paths -->
  <img src="/img/payment/visa.svg" alt="Visa" height="22" loading="lazy">
  <img src="/img/payment/mastercard.svg" alt="Mastercard" height="22" loading="lazy">
  <img src="/img/payment/paypal.svg" alt="PayPal" height="22" loading="lazy">
  <img src="/img/payment/blik.svg" alt="BLIK" height="22" loading="lazy">
  <img src="/img/payment/przelewy24.svg" alt="Przelewy24" height="22" loading="lazy">
  <span style="margin-left:8px;font-size:12px;color:#059669;display:flex;align-items:center;gap:4px;">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
    Secure checkout
  </span>
</div>

Tip: Use SVG payment logos for sharpness at all screen densities. Download official brand logo kits from each payment provider's press kit.

Example 4: Wholesale Price Notice — Two Blocks, One Hook, Two Audiences

Goal: Same hook position, different message depending on whether the visitor is a wholesale customer or a guest/retail customer. No extra configuration — the conditions handle the targeting.

Block A — Guest prompt:

Hook: displayProductPriceBlock
Conditions: Customer Group = Guest

<p style="font-size:13px;color:#374151;margin:8px 0 0;padding:8px 12px;background:#f0fdf4;border-radius:6px;border:1px solid #bbf7d0;">
  Trade customer?
  <a href="/login" style="color:#059669;font-weight:600;">Log in for wholesale pricing</a>
</p>

Block B — Wholesale confirmation:

Hook: displayProductPriceBlock
Conditions: Customer Group = Wholesale

<p style="font-size:13px;color:#374151;margin:8px 0 0;padding:8px 12px;background:#eff6ff;border-radius:6px;border:1px solid #bfdbfe;">
  <strong style="color:#1d4ed8;">Your wholesale discount is active.</strong>
  Prices shown include your tier discount.
</p>

Retail customers (logged in, not wholesale) see neither block — add a third block for them if needed.

Example 5: Sizing Guide Tab on Clothing Products

Goal: Add a "Sizing Guide" tab to the product tabs section for all products in the Clothing category. The tab should not appear on non-clothing products.

Two blocks required: one for the tab label, one for the tab content.

Block A — Tab label:

Hook: displayProductTab
Conditions: Category = Clothing

<li class="nav-item">
  <a class="nav-link" data-toggle="tab" href="#sizing-guide" role="tab">
    Sizing Guide
  </a>
</li>

Block B — Tab content:

Hook: displayProductTabContent
Conditions: Category = Clothing

<div class="tab-pane fade" id="sizing-guide" role="tabpanel">
  <h3 style="margin:0 0 16px;font-size:18px;">Size Chart</h3>
  <p style="margin:0 0 12px;color:#6b7280;font-size:14px;">All measurements in centimetres. If you are between sizes, we recommend sizing up.</p>
  <div style="overflow-x:auto;">
    <table style="width:100%;border-collapse:collapse;font-size:14px;">
      <thead>
        <tr style="background:#f3f4f6;">
          <th style="padding:10px 12px;text-align:left;border:1px solid #e5e7eb;">Size</th>
          <th style="padding:10px 12px;text-align:left;border:1px solid #e5e7eb;">Chest (cm)</th>
          <th style="padding:10px 12px;text-align:left;border:1px solid #e5e7eb;">Waist (cm)</th>
          <th style="padding:10px 12px;text-align:left;border:1px solid #e5e7eb;">Hip (cm)</th>
          <th style="padding:10px 12px;text-align:left;border:1px solid #e5e7eb;">Inseam (cm)</th>
        </tr>
      </thead>
      <tbody>
        <tr><td style="padding:8px 12px;border:1px solid #e5e7eb;">XS</td><td style="padding:8px 12px;border:1px solid #e5e7eb;">82–86</td><td style="padding:8px 12px;border:1px solid #e5e7eb;">62–66</td><td style="padding:8px 12px;border:1px solid #e5e7eb;">88–92</td><td style="padding:8px 12px;border:1px solid #e5e7eb;">76</td></tr>
        <tr style="background:#f9fafb;"><td style="padding:8px 12px;border:1px solid #e5e7eb;">S</td><td style="padding:8px 12px;border:1px solid #e5e7eb;">87–91</td><td style="padding:8px 12px;border:1px solid #e5e7eb;">67–71</td><td style="padding:8px 12px;border:1px solid #e5e7eb;">93–97</td><td style="padding:8px 12px;border:1px solid #e5e7eb;">78</td></tr>
        <tr><td style="padding:8px 12px;border:1px solid #e5e7eb;">M</td><td style="padding:8px 12px;border:1px solid #e5e7eb;">92–96</td><td style="padding:8px 12px;border:1px solid #e5e7eb;">72–76</td><td style="padding:8px 12px;border:1px solid #e5e7eb;">98–102</td><td style="padding:8px 12px;border:1px solid #e5e7eb;">80</td></tr>
        <tr style="background:#f9fafb;"><td style="padding:8px 12px;border:1px solid #e5e7eb;">L</td><td style="padding:8px 12px;border:1px solid #e5e7eb;">97–101</td><td style="padding:8px 12px;border:1px solid #e5e7eb;">77–81</td><td style="padding:8px 12px;border:1px solid #e5e7eb;">103–107</td><td style="padding:8px 12px;border:1px solid #e5e7eb;">82</td></tr>
        <tr><td style="padding:8px 12px;border:1px solid #e5e7eb;">XL</td><td style="padding:8px 12px;border:1px solid #e5e7eb;">102–108</td><td style="padding:8px 12px;border:1px solid #e5e7eb;">82–88</td><td style="padding:8px 12px;border:1px solid #e5e7eb;">108–114</td><td style="padding:8px 12px;border:1px solid #e5e7eb;">84</td></tr>
      </tbody>
    </table>
  </div>
  <p style="margin:16px 0 0;font-size:13px;color:#9ca3af;">Not sure? <a href="/contact" style="color:#6366f1;">Contact us</a> and we will help you choose the right size.</p>
</div>

Example 6: Exit-Intent Discount Popup

Goal: When a visitor moves their mouse toward the browser's top navigation (a strong exit signal), show a discount offer to re-engage them.

Hook: displayBeforeBodyClosingTag
Conditions: Customer Group = Guest (only new visitors — customers already know the brand)

<div id="exit-popup" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99999;align-items:center;justify-content:center;">
  <div style="background:#fff;border-radius:12px;padding:40px 32px;max-width:420px;width:90%;text-align:center;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3);">
    <button onclick="closeExitPopup()" style="position:absolute;top:12px;right:16px;background:none;border:none;font-size:20px;color:#9ca3af;cursor:pointer;line-height:1;">&times;</button>
    <p style="margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#6366f1;font-weight:600;">Wait — before you go</p>
    <h2 style="margin:0 0 12px;font-size:24px;font-weight:700;color:#111827;">Get 10% off your first order</h2>
    <p style="margin:0 0 20px;color:#6b7280;font-size:15px;">Use code <strong style="color:#111827;background:#f3f4f6;padding:2px 8px;border-radius:4px;">WELCOME10</strong> at checkout.</p>
    <a href="/sale" onclick="closeExitPopup()" style="display:inline-block;background:#6366f1;color:#fff;padding:14px 32px;border-radius:8px;font-weight:600;text-decoration:none;font-size:15px;width:100%;box-sizing:border-box;">
      Shop with 10% off
    </a>
    <p style="margin:12px 0 0;"><a href="#" onclick="closeExitPopup();return false;" style="color:#9ca3af;font-size:13px;text-decoration:underline;">No thanks</a></p>
  </div>
</div>
 
<script>
(function() {
  var shown = sessionStorage.getItem('exitPopupShown');
  if (shown) return;
  
  document.addEventListener('mouseleave', function(e) {
    if (e.clientY < 10) {
      document.getElementById('exit-popup').style.display = 'flex';
      sessionStorage.setItem('exitPopupShown', '1');
    }
  });
})();
 
function closeExitPopup() {
  document.getElementById('exit-popup').style.display = 'none';
}
</script>

Note: sessionStorage prevents the popup from showing again in the same browser session. Combine with an A/B test to find the best headline and discount amount.

Example 7: Post-Purchase Referral Block

Goal: After a successful purchase, show a referral offer at maximum goodwill — the moment the customer is most satisfied.

Hook: displayOrderConfirmation
Conditions: Customer Group = Default customer (logged-in buyers; guests may not have an account to track referrals)

<div style="background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:24px;text-align:center;margin:24px 0;">
  <h3 style="margin:0 0 8px;font-size:18px;color:#065f46;">Know someone who would love this?</h3>
  <p style="margin:0 0 16px;color:#374151;font-size:15px;">
    Share your unique referral link and you both get <strong>€10 off</strong> your next order.
  </p>
  <a href="/referral" style="display:inline-block;background:#059669;color:#fff;padding:12px 28px;border-radius:6px;font-weight:600;text-decoration:none;font-size:15px;">
    Get your referral link
  </a>
</div>

Example 8: Dynamic Free Shipping Progress Bar (Cart Page)

Goal: Remind visitors how close they are to the free shipping threshold while they are in the cart, dynamically updating based on their cart total.

Hook: displayShoppingCartFooter
Conditions: None

<div id="shipping-bar" style="margin:16px 0;padding:12px 16px;background:#eff6ff;border-radius:6px;border:1px solid #bfdbfe;">
  <div id="shipping-bar-text" style="font-size:14px;color:#1e40af;margin-bottom:8px;"></div>
  <div style="background:#dbeafe;border-radius:4px;height:8px;overflow:hidden;">
    <div id="shipping-bar-fill" style="background:#3b82f6;height:100%;border-radius:4px;transition:width .3s;"></div>
  </div>
</div>
 
<script>
(function() {
  var threshold = 50; // Change to your free shipping threshold in the store currency
  var cart = window.prestashop && window.prestashop.cart;
  if (!cart) return;
  
  var total = parseFloat(cart.totals && cart.totals.total ? cart.totals.total.value : 0);
  var bar = document.getElementById('shipping-bar');
  var text = document.getElementById('shipping-bar-text');
  var fill = document.getElementById('shipping-bar-fill');
  
  if (total >= threshold) {
    text.innerHTML = '<strong>You qualify for free shipping!</strong>';
    fill.style.width = '100%';
    fill.style.background = '#059669';
    document.getElementById('shipping-bar').style.background = '#f0fdf4';
    document.getElementById('shipping-bar').style.borderColor = '#bbf7d0';
    text.style.color = '#065f46';
  } else {
    var remaining = (threshold - total).toFixed(2);
    var pct = Math.round((total / threshold) * 100);
    text.innerHTML = 'Add <strong>€' + remaining + ' more</strong> for free shipping';
    fill.style.width = pct + '%';
  }
})();
</script>

Example 9: Category Description for SEO

Goal: Add a 200-word category description above or below product listings to support organic search rankings for the category page. Better SEO content without touching the PrestaShop back office category editor.

Hook: displayTopColumn (above product grid) or displayLeftColumn (sidebar)
Conditions: Category = Software Licenses

<div style="padding:20px;background:#f8fafc;border-radius:8px;margin-bottom:20px;">
  <h2 style="margin:0 0 12px;font-size:18px;font-weight:600;">Software Licenses — Genuine Keys, Instant Delivery</h2>
  <p style="margin:0 0 10px;font-size:14px;line-height:1.6;color:#374151;">
    Browse our full catalogue of software licenses for Windows, Microsoft Office, antivirus, 
    and professional tools. All keys are genuine, sourced directly from authorised distributors, 
    and delivered to your email within minutes of payment.
  </p>
  <p style="margin:0;font-size:14px;line-height:1.6;color:#374151;">
    Whether you need a single Windows 11 Pro license or volume licensing for your business, 
    we offer competitive pricing with full activation support. 
    <a href="/contact" style="color:#6366f1;">Contact us</a> for volume quotes.
  </p>
</div>

SEO tip: Use the primary keyword in the <h2> and within the first 50 words of body text. Target keywords your category page already ranks for (use Google Search Console to find them) and expand on those topics.

Example 10: Age Verification Banner

Goal: Display an age verification prompt on product pages for age-restricted products (alcohol, tobacco, etc.) before the customer adds to cart.

Hook: displayProductAdditionalInfo
Conditions: Category = Alcohol (or whichever age-restricted category)

<div style="border:2px solid #f59e0b;border-radius:8px;padding:16px;background:#fffbeb;margin:16px 0;display:flex;gap:12px;align-items:flex-start;">
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2" style="flex-shrink:0;margin-top:2px;"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
  <div>
    <p style="margin:0 0 4px;font-weight:600;color:#92400e;font-size:14px;">Age-restricted product</p>
    <p style="margin:0;color:#78350f;font-size:13px;">By purchasing this product, you confirm you are 18 years of age or older. We may request proof of age on delivery.</p>
  </div>
</div>

Example 11: Social Proof Counter

Goal: Show a live or periodically updated order counter to build confidence. Works especially well on hero landing pages or product pages for bestselling items.

Hook: displayProductAdditionalInfo or displayHome
Conditions: Specific product (via Product condition) or none for global

<div style="display:flex;align-items:center;gap:8px;padding:10px 0;font-size:14px;color:#374151;">
  <span style="display:flex;gap:-4px;">
    <!-- Simple avatar stack using initials/circles as a lightweight alternative to actual photos -->
    <span style="width:28px;height:28px;border-radius:50%;background:#6366f1;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;border:2px solid #fff;">AK</span>
    <span style="width:28px;height:28px;border-radius:50%;background:#ec4899;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;border:2px solid #fff;margin-left:-8px;">MR</span>
    <span style="width:28px;height:28px;border-radius:50%;background:#f59e0b;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;border:2px solid #fff;margin-left:-8px;">JW</span>
  </span>
  <span><strong>2,847 customers</strong> have purchased this product</span>
</div>

Note: Update the count periodically (monthly) to keep it accurate. Displaying a visibly static or declining number has the opposite effect.

Example 12: Product Video Embed in a Custom Tab

Goal: Embed a product demonstration video in a dedicated "Video" tab on a specific product page.