theKiss Lingerie

Problem

Lingerie is hard to sell when a shopper is unsure of the size, so sizing help had to sit right on the product page. Sets are bought piece by piece, which made product pages and the cart harder to read. The cart also had to push shoppers toward free shipping without cluttering a small phone screen. Behind the scenes, a large share of variants had no SKU in a consistent format.

Solution

I built a size guide as a modal with a calculator for bras, panties and swimwear. Its chart data lives in separate JSON files, and results are checked against the sizes a product really has. I then redesigned the cart drawer mobile-first, following the client's spec. It has a free-shipping bar, a compact list of what a set includes, a cross-sell carousel that appears only below the shipping threshold, one block for discounts and the total, and trust lines. Set pages got a variant picker with a sticky button. For speed I preloaded the main product image, deferred sliders and third-party scripts and lazy-rendered the country selector. A small Node tool generates SKUs from product data.

Key decisions

1. 01

   Chose JSON files for size charts over hard-coded tables

   Why The client can have sizes corrected in one data file without touching the calculator code.

2. 02

   Chose to build the cart mobile-first, with a shared calculation for the drawer and the cart page

   Why Most shoppers use phones, and one calculation keeps the shipping bar and totals consistent in both places.

3. 03

   Chose to build and test new features on separate dev themes first

   Why The live store kept selling while the size guide and cart were being changed, and everything went through pull requests.

Results

• A size guide with a calculator for bras, panties and swimwear, plus full charts and an inch and centimetre switch.
• A redesigned cart drawer with the same logic reused on the full cart page, and tracking for cross-sell clicks.
• Set product pages with a sticky add-to-cart button on mobile, and a revised header, mega menu and mobile menu.
• Faster product pages: the main image is preloaded, sliders and third-party scripts load later, and the country list renders on demand.