E-commerce Promotional Products

Custom Patches — Full Product Showcase Landing Page

A landing page for a promotional products company specializing in custom patches. Six product types, social proof from 35,000+ clients, and a complete ordering flow from browse to quote request.

+47% Conversion Rate
-32% Cost Per Lead
1.4s Load Time (from 3.2s)
92+ Lighthouse Score

Page Preview

Here's how the finished page looks in the browser.

custompatches.com/landing-page

Project Overview

This client is an established promotional products company that specializes in custom patches — embroidered, woven, PVC, chenille, leather, and printed. They've served over 35,000 clients, but you'd never know it from their old landing page. The conversion rate was low, there was no social proof anywhere, and all six product types were just sort of dumped onto the page without any clear structure.

They needed a page that did three things well: showed off what they make, proved they're legit, and walked visitors through a clear path to requesting a quote. That's exactly what I built for them — a long-form landing page that takes someone from "I'm just browsing" to "I'm ready to order" in a single scroll.

Quick Facts
Industry E-commerce / Promo Products
Page Type Product Showcase Landing Page
Primary Font Inter (400–800)
Style Clean, Conversion-Focused
Backend Google Apps Script
Tracking GTM + GA4 + UTM

The Challenge

When I first looked at their existing page, the biggest issue was immediately obvious: six different product types were all competing for attention with no visual hierarchy. Embroidered, woven, PVC, chenille, leather, printed — they were all just listed out with no structure. Visitors couldn't quickly tell the difference between types or figure out which one they actually needed. It was decision paralysis in action.

The second problem was even more frustrating. This company has served over 35,000 clients across dozens of industries, but there was zero social proof on the page. No testimonials, no client count, no logos, nothing. They had this incredible credibility story to tell and the page was completely silent about it.

On top of that, the ordering process was a mystery. A visitor would land on the page and have no idea what requesting a quote actually involved — how long it takes, what info they need to provide, what happens after they submit. That kind of ambiguity kills conversions, especially when you're asking people to commit to a custom product order.

My Approach

I built this as a long-form landing page with a deliberate flow. Right at the top, a trust bar hits visitors with the key numbers — 35,000+ clients, free shipping, fast turnaround — before they even start scrolling. That immediately sets the tone: this company is established and legit.

For the product types, I created individual product cards for each patch variety with consistent sizing and clear labels. Each card shows a sample image, a brief description, and a CTA. This gives visitors a clean way to browse without feeling overwhelmed. Below that, a step-by-step "How It Works" section walks them through the ordering process — from uploading artwork to approving the proof to receiving their patches.

The quote request form opens in a modal instead of a separate page, which keeps visitors in context and preserves their scroll position. On mobile, a floating CTA button stays fixed at the bottom of the screen so the conversion path is always one tap away. I also built a full FAQ section with accordion toggles to handle common objections before they become reasons to leave.

For tracking, I set up GTM with a custom dataLayer event for every meaningful interaction, plus a UTM capture system that persists campaign attribution across sessions through a cookie-to-sessionStorage chain. Everything feeds into GA4 so the client can see exactly which ads and keywords are driving actual leads.

Design

The design is built around the client's brand green, extended into a full palette. The goal was clean professionalism that feels trustworthy without being cluttered.

Color Palette

Six core colors derived from the client's brand green, giving a cohesive look across backgrounds, text, and interactive elements.

#01CA76 Primary Green
#019A5A Primary Dark
#E6FAF2 Primary Light
#0E0E0E Text
#6B7280 Secondary Text
#FFFFFF Background

Typography

Primary — Inter
Custom Patches Designed For Your Brand
Inter 400–800 · Used for headings, body text, and UI elements · Fluid sizing via clamp()

Results

Post-launch performance compared to the previous page across the same traffic sources and ad spend.

+47% Conversion Rate Increase
-32% Cost Per Lead Reduction
1.4s Page Load Time (from 3.2s)
92+ Lighthouse Performance Score

Key Takeaways

The biggest win on this project was the product card system. Giving each patch type its own card with consistent sizing and a clear image made it so much easier for visitors to browse. Instead of a wall of text about different patch types, people could visually scan the options and click into the one they wanted. The modal form approach helped too — keeping users on the page instead of sending them somewhere else meant they didn't lose their place or their intent.

The FAQ section turned out to be a bigger deal than I expected. Turns out, a lot of people had the same questions about minimum order quantities, turnaround times, and artwork requirements. Addressing those objections directly on the page meant fewer people bounced to look for answers elsewhere. And the floating mobile CTA was a no-brainer — with so much of the traffic coming from phones, making the conversion action always visible was a simple change with a measurable impact.

On the tracking side, the UTM persistence system was critical. The client runs campaigns across Google Ads, Facebook, and email, and being able to trace each lead back to a specific campaign and keyword gave them the data they needed to optimize their ad spend. Before this page, they had almost no visibility into what was actually driving results.

Interested in a similar project?

Every project starts with a conversation about your business, your audience, and what you're trying to achieve. Let's talk about how a custom landing page can improve your results.

Get in Touch