The making of A Step-by-Step Product Page Upsell Flow for an E-Scooter Retailer

LOCO Scooters sells e-scooters in Ireland. We built a four-step product page — scooter, accessories, care plan, summary — with automatic bundle discounts. See how.

Client: LOCO Scooters
Built with: Shopify, Liquid, Focal Theme, Shopify Functions, Klarna, Loox, Smile.io

Start a project like this

A Step-by-Step Product Page Upsell Flow for an E-Scooter Retailer — the delivered interface

Challenges

Accessory attach rate was the revenue the business was leaving on the table — a scooter without a lock, helmet or care plan is a lower-margin sale and a less protected customer — but a related-products carousel below the fold was being ignored, so the upsell had to move into the purchase decision itself
A bundle discount that depends on what else is in the basket cannot be a discount code, which anyone can share — it had to apply automatically and only to accessories bought alongside a scooter, which meant tagging each line at add-to-cart time and letting a Shopify automatic discount read that tag
A multi-step flow on a product page risks adding friction to a purchase that already works, so every step had to be skippable, the running total visible throughout and the standard buy box preserved as step one, so a customer who just wants the scooter is never slowed down

Solution

LOCO Scooters is Ireland's largest electric scooter retailer, with stores in Blanchardstown, Portobello and Cork, an in-house repair centre and more than 60,000 customers across its own LOCO range and brands such as PURE, KuKirin, Fiido and Engwe. A scooter is rarely bought alone — it needs a lock, a helmet, a GPS tag and, in Irish weather, a maintenance plan — but the standard product page sells the scooter and leaves the rest to chance. We rebuilt the product page on Shopify's Focal theme as a guided four-step configurator: Scooter, Accessories, Care, Summary. The customer picks a colour, moves through a curated accessories step where every add-on is 10% off when paired with a scooter, chooses one of three LOCO Care plans, and lands on a summary that lists everything chosen with a running total, a Klarna monthly figure and a single Add to Cart. The discount is applied automatically — each accessory added through the flow carries a hidden line property, and a Shopify automatic discount reads it and takes the 10% off in the cart — so there is no code to type and no way to claim the offer without the scooter. The result is a product page that behaves like a sales assistant in a store.

Services provided

Design

The step flow is built to look like part of the theme rather than an app bolted on. The buy box stays white with light grey rules, and the one colour on the page is LOCO's bright green: the active step in the breadcrumb, the selected accessory card's border, the Next Step and Add to Cart buttons. Because green marks both progress and selection, the customer can read the state of the whole configurator at a glance. Accessory and care-plan cards use the same 10px corner radius as the dispatch and regulation badges, so the new sections share the theme's geometry. Montserrat carries everything — headings, body, buttons and the step labels — in the weights Focal already uses, so nothing about the flow announces itself as custom. The black header and footer frame the white page the way the store's own signage does.

Colors

#111111
#38D430
#F8F9FA
#E2E8F0
#FFFFFF

Typeface

Headings, body and buttons
Montserrat
The single face across the storefront, set in Bold for product names and step titles, Medium for buttons and Regular for descriptions and plan inclusions. A wide geometric sans that holds up at the small sizes the accessory cards need.

What we built

Four Steps, One Product Page

A breadcrumb across the top of the buy box — 1. Scooter, 2. Accessories, 3. Care, 4. Summary — with a Next Step button in place of Add to Cart until the final step, so the customer is walked through the decision rather than dropped at a button.

Step 1: The Scooter

Price, colour swatches, quantity, Loox star rating, same-day-dispatch badge and the Regulation Ready Ireland mark — the standard product page, kept intact as the first step so nothing about the core purchase is hidden behind the flow.

Step 2: Make It Yours

Six curated accessories — GPS tag, helmet, U-lock, grips, pump, waterproof bag — as tap-to-select cards with a 10% off when paired with a scooter message, chosen per product rather than pulled from a generic related-products feed.

Step 3: LOCO Care Plans

Essential at €69, Peace of Mind at €129 and All-In at €229, each with its inclusions listed — free annual service, puncture repairs, priority queue, unlimited parts — presented as a comparison so the plan upsell reads as protection rather than an add-on.

Step 4: Summary With a Running Total

Every chosen item listed with its price, the combined total against the regular price, a Klarna 12-month figure, the same-day-dispatch note and the rewards points earned — the whole bundle reviewed once before a single Add to Cart.

Automatic Bundle Discount

Accessories added through the flow carry a hidden line-item property, and a Shopify automatic discount reads it to take 10% off each one in the cart — a €29.99 GPS tag lands at €27.00 — with no code to enter and no way to claim the discount without the scooter in the basket.

Live Total From the First Step

The total in the buy box updates as accessories and care plans are added, so the customer always knows what the configured bundle costs before reaching the summary.

Finance Surfaced in the Flow

Klarna monthly instalments calculated on the configured total and shown on the summary step, with humm finance available store-wide — on a €700 scooter plus extras, the monthly figure is often what closes.

Trust Signals Inside the Buy Box

Same-day dispatch before 3pm, the Regulation Ready Ireland badge, a two-year warranty, Trustpilot and Loox reviews and the Smile rewards points — all within the step flow so reassurance travels with the customer.

Cart That Explains the Saving

Each discounted accessory shows an ACCESSORY discount line with the amount saved beside the scooter, so the cart confirms the bundle rather than leaving the customer to work out why the total dropped.