Soccer Supplement

Custom subscription builder page resulting in a 4% uplift on conversion & a massive increase in AOV.
Scientifically-formulated supplements are designed by industry-leading nutritionists to give footballers what they need to unleash their full potential on the pitch.

Soccer Supplement_image

Why Rainy City?

Soccer Supplement needed a Shopify design and development agency to hit the ground running and take their Shopify store to the next level.

After researching our past success with other supplements brands and our Shopify expertise, Soccer Supplement approached us to find out a bit more.

Project details:

  • Long-form product pages
  • Full Shopify UX Audit
  • CX Audit & Improvements

The challenge

After analysing customer purchase behaviour on the Soccer Supplements website, we found that people were buying a range of different products in different categories.

We wanted to create a truly unique customer experience, designing a one-page purchasing flow to allow visitors to create bespoke bundles with various subscription options.

When carrying out extensive research on UI/UX, we came up with a design that was user friendly and intuitive and followed a complete thought process


Bundled subscriptions on Shopify

In order to handle subscriptions here, we used one of our favourite apps – ReCharge. This makes creating subscriptions a breeze for both an agency and also clients too.

We tapped into their API to create a bespoke Build-A-Box subscription landing page. In addition to this, we also utilized the power of jQuery and our own CSS to style modules within the page.

We started off by creating a page template for our subscription page, dividing the whole user experience into 3 steps:

  1. Create your subscription box
  2. Choose your delivery time
  3. Select your free gifts

Subscription pages that sell

An issue we faced when building out the process is that the page was too long for the user to traverse.

To overcome this we used offset().top, helping us calculate each section position and move the user along automatically based on the current viewpoint location.

Adding a bespoke landing page that allows users to select products, to create their own subscription bundle. We then applied a custom script, to automatically discount the bundle and fire it into Recharge’s subscription.

Lets get to work

Ready to discuss the finer details? Let’s talk Shopify.

Contact us

Get in touch

UK: 0800 5202 212 | USA: 929-999-5854

Book a call