A money-back guarantee section is one of the highest-ROI additions to any pricing page. Research consistently shows that a visible, prominent refund guarantee reduces purchase anxiety and increases conversion — sometimes by 20–40% — because it transfers the perceived risk from buyer to seller. This snippet provides a complete pricing trust section: a shield SVG badge with the guarantee duration, a descriptive paragraph, trust chips, four trust badges (SSL, SOC 2, Support, Uptime), and three customer review cards.

The shield badge

The shield uses an inline SVG path that draws a classic security shield shape. The fill is a very light indigo tint and the stroke is the accent colour. A .shield-days div with position: absolute overlays the "30" number directly on the shield — communicating the guarantee length at a glance before reading any text.

Trust chips

Three pill-shaped chips ("Full refund", "No questions", "Cancel anytime") use indigo tinted backgrounds and check SVG icons. These chips compress the key guarantee points into scannable tokens — users can confirm the terms in under 2 seconds.

The four trust badges

SSL Secure, SOC 2 Type II, 24/7 Support, and 99.9% Uptime — four common purchase objections addressed in a 4-column grid. Each badge has an icon, a label, and a sub-label with the specific detail. The grid collapses to 2 columns on mobile.

Customer review cards

Three review quotes specifically about the guarantee — not general product praise — build trust at the exact point where a prospect is evaluating risk. Guarantee-specific reviews are more persuasive than generic five-star ratings because they address the specific question: "Will the refund process actually work?"

Placement on the pricing page

Place this section directly below the tier cards on your pricing page. The guarantee section catches users who are interested but hesitant, and converts them by removing the primary risk objection. The trust badges below the main guarantee card reinforce credibility on multiple dimensions.

Guarantee-specific reviews

The three review cards show customer quotes specifically about the guarantee and refund experience — not generic product praise. Guarantee-specific reviews address the exact question a prospect has at this section of the page: "Will they actually honour the refund?" Research consistently shows that testimonials about the guarantee experience convert hesitant buyers more effectively than general five-star reviews, because they prove the safety net works in practice. Use real customer quotes from refund confirmation emails or support tickets where possible.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Since this section has zero JavaScript, the interesting mechanics are all in the markup and CSS — paste the HTML and CSS into an AI coding assistant like Claude and ask it to explain exactly how the .shield-days div is layered on top of the inline shield SVG path using absolute positioning, or why the guarantee card's border uses a low-opacity rgba indigo instead of a solid color. The same assistant is useful for optimizing it too, for example checking whether the four trust badges and three review cards could share one grid component instead of duplicating grid-template-columns rules, or whether the section's responsive breakpoints (4 to 2 columns, 3 to 1 column) line up with your actual pricing page's container width. It's also a fast way to extend the section: ask it to wire the shield's day count to a CMS field, add schema.org MerchantReturnPolicy markup automatically, or generate a condensed checkout-page variant with just the shield and two trust chips. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build a pricing-page "money-back guarantee" trust section in plain HTML and CSS only — no JavaScript at all, since nothing in it needs to be interactive.

Requirements:
- A shield badge made from a single inline SVG path drawing a classic shield outline with a checkmark polyline inside it, with a semi-transparent tinted fill and a solid accent stroke; overlay the guarantee's day count (e.g. "30") as a separate absolutely-positioned element centered on top of the shield rather than baking the number into the SVG itself.
- Next to the shield, a heading, a descriptive paragraph, and a row of pill-shaped "trust chips" (e.g. "Full refund", "No questions", "Cancel anytime"), each with a small inline checkmark SVG icon and a tinted background matching the accent color.
- Below the main card, a responsive grid of trust badges (for example SSL security, compliance certification, support hours, uptime SLA), each with its own inline SVG icon, a bold label, and a smaller sub-label with a specific stat; the grid must collapse from four columns to two on narrow viewports using a media query.
- Below that, a labeled section of guarantee-specific customer review cards (star rating, an italicized quote specifically about the refund/guarantee experience, and a reviewer name/role) laid out in a responsive grid that collapses from three columns to one on narrow viewports.
- The entire section must render correctly with JavaScript completely disabled, and must be structured so it could be shipped as a static server-rendered component with no client-side hydration.

Step by step

How to Use

1
Update the guarantee periodChange "30" in the .shield-days div and "30-Day Money-Back Guarantee" in the h2 to your actual guarantee period (14, 30, or 60 days). Update the guarantee description paragraph to match your exact refund policy terms.
2
Update the trust chipsEdit the three .chip texts to match your guarantee terms. Common options: "Full refund", "No credit card required", "Cancel anytime", "Data export included", "No lock-in contract".
3
Update the trust badgesEdit the four .trust-badge .trust-name and .trust-sub texts to match your actual certifications and support stats. Remove badges for certifications you do not have. Add new badges for GDPR, HIPAA, ISO 27001, or other certifications you hold.
4
Replace the review quotesEdit the three review .review p texts with real customer quotes about your guarantee or support quality. Update .reviewer with the real customer name, role, and company. Use initials or first names if the customer prefers anonymity.
5
Add this below your pricing tier cardsThe guarantee section is most effective when placed immediately below the pricing cards, before the FAQ section. It catches hesitant buyers at the point of decision.
6
Export in your formatClick "HTML" for a standalone file to paste after your pricing cards, "JSX" for a React server component, or "Tailwind" for a Tailwind CSS version.

Real-world uses

Common Use Cases

Pricing page risk reduction and conversion optimisation

Place below pricing tier cards to catch hesitant buyers at the point of decision. The 30-day shield badge, trust chips, and guarantee-specific review quotes address purchase risk directly and convert users who would otherwise bounce from the pricing page.

E-commerce and subscription checkout risk removal

Add the guarantee card to checkout pages alongside the order summary. Research shows that guarantee visibility at checkout — not just on the pricing page — significantly reduces cart abandonment on the final payment step.

Agency and service retainer trust building

Adapt for service-based businesses: replace "Money-Back Guarantee" with "Satisfaction Guarantee" or "No-risk pilot". Update trust badges to years of experience, client count, and project types rather than technical certifications.

Course and digital product launch pages

Online courses and digital products benefit greatly from visible refund guarantees. The shield badge with "30 days" is universally understood. The embedded review cards showing a frictionless refund experience can triple refund request rates while also tripling purchase conversion.

SaaS trial-to-paid conversion improvement

Show the guarantee section in the upgrade flow for trial users converting to paid. At this decision point, the guarantee removes the primary psychological barrier: "What if I pay and it doesn't work?" The guarantee-specific reviews are especially persuasive here.

Study SVG shape creation and trust UI patterns

The shield is a hand-drawn SVG path — no icon library needed. The section demonstrates how layering SVG with absolute-positioned text creates a badge component. The trust chip pattern shows how to compress policy information into scannable pill labels.

Got questions?

Frequently Asked Questions

The shield is an inline SVG path element that draws a classic security shield shape. The fill is a light indigo tint (rgba(99,102,241,0.1)) and the stroke is the accent colour. The "30" number is a .shield-days div with position: absolute and z-index: 1, overlaying the SVG. To change the guarantee period: update .shield-days textContent to your number (14, 60, 90), update the h2 heading, and update the description paragraph to reference the correct period.

Add a script type="application/ld+json" with Offer and hasMerchantReturnPolicy schema: {"@type":"MerchantReturnPolicy","applicableCountry":"US","returnPolicyCategory":"https://schema.org/MerchantReturnFiniteReturnWindow","merchantReturnDays":30,"returnFees":"https://schema.org/FreeReturn","returnMethod":"https://schema.org/ReturnByMail"}. Reference this from your Product schema's hasMerchantReturnPolicy property. This can enable Google Shopping rich results.

Yes — and the checkout page version often has a higher ROI. At checkout, the user has already decided they want the product and is in the final payment step. Showing the guarantee here reduces the last-moment hesitation ("what if this doesn't work after I pay?") that causes cart abandonment. Use a condensed version on the checkout page: just the shield badge, the guarantee period, and two trust chips. The full review section is better suited to the pricing page where users are earlier in their evaluation.

Yes. Since this snippet has no JavaScript, it can be a pure Server Component in Next.js App Router — no "use client" directive required. Export it as default function GuaranteeSection() and import it in your pricing page server component. Pass the guarantee period, trust badge data, and review quotes as props from getStaticProps or directly from your content source.

Loading…