Peak Performance

Scope: Design and implement fully responsive custom sales funnel and landers on AWS. Build a custom Shopify extension to support Klaviyo forms on the Brave web browser.

Peak Performance is a supplements company that sells high-quality superfood powders, protein, organic coffee, mushroom extracts, vitamins, and more.

Peak Performance Logo

Sales Funnel

Peak needed a high-converting sales funnel for their affiliate marketing channel. After working closely with the designer and incorporating known elements for successful, high-converting sales funnels, I coded the design from its PSD form into fully responsive Bootstrap 5 HTML/CSS. I also built custom javascript extensions to help increase conversion rates, like a social proof nudge (see examples below).

Page One - Above the Fold
Sales Funnel Page 1

Page Two - Order Form

I built the order form to be very dynamic, and depending on the quantity chosen, the price and data update automatically. On submission, all data is saved in a local MySQL database and then pre-populated onto the Peak Performance Shopify checkout flow.

Sales Funnel Page 2

Custom Social Proof Nudge Examples

I initially used a known social proof script from a 3rd party, but it had some inherent limitations that we couldn't overcome. So, I just built my own. sentiment_very_satisfied I created a very similar design and made a javascript that mimicked the exact behavior of the 3rd party script. When a potential buyer lands on the order page, a small modal pops up. If on desktop, it displays in the lower left-hand corner of their screen. If on mobile, it appears at the bottom. The name, location, and quantity get fetched from a live customer feed or randomly generated if the product is new.

Sales Funnel Nudges

Sales Letter

In addition to the sales funnel, I implemented a 3,500-word sales copy into a fully responsive sales letter. Working with the same designer as the sales funnel page, I coded the design into responsive bootstrap 5 HTML/CSS. Sales Page Full

Because the sales letter was very long and had many images, I had to build a way to make sure images didn't load until scrolled on so that the page load speed remained snappy. This strategy is sometimes called "lazy loading." I was able to achieve this ability with a short script using the Intersection Observer API that works across all browsers:

document.addEventListener('DOMContentLoaded', function () {
        let observer = new IntersectionObserver((entries, observer) => {
          entries.forEach(function (entry) {
            if (entry.intersectionRatio > 0 || entry.isIntersecting) {
              const image = entry.target;
              observer.unobserve(image);

              if (image.hasAttribute('src')) {
                // image is already loaded, so skip
                return;
              }

              const sourceUrl = image.getAttribute('data-src');
              image.setAttribute('src', sourceUrl);

              image.onload = () => {
                image.style.visibility = "visible";
              }

              observer.unobserve(image);
            }
          });
        });

        document.querySelectorAll('.lazyload').forEach((el) => {
        el.style.visibility = "hidden";
          observer.observe(el);
        });
   });

You add each image like so:

 <img data-src="image.png" class="lazyload">

Klaviyo Support for Brave Browser

Finally, the Peak Performance website uses Klaviyo's embedded form code to capture e-mail addresses. Due to Brave Browser's strict privacy settings, it blocks Klaviyo scripts. I figured out a simple if/else statement to detect if the Brave Browser is being used to get around this annoyance. If it is, it replaces the Klaviyo form div with their legacy ajax version.

Brave Browser Detection

//returns true if using Brave, false if not
(navigator.brave && await navigator.brave.isBrave() || false)

Technologies Used

Have a web project and need an expert you can trust?

I am available for hourly, per-project, short-term, and long-term contract work.

Contact Me