Specialty coffee

Kiss the Hippo: one subscription experience across product, search, cart and quiz

As the Shopify developer on this project at PATH Product & Software House, I integrated the subscription purchase and management experience into product pages, search results, the drawer cart, the cart page and the coffee quiz of an existing Shopify Plus store.

  • Subscriptions
  • Figma to Liquid
  • Quiz integration
  • Drawer cart
  • Metafield-driven content
  • App integrations
Client
Kiss the Hippo
Sector
Specialty coffee
Market
United Kingdom
Role
Shopify developer on the project, within PATH Product & Software House
Collaboration
Project delivered through PATH; design, SEO and store management were handled by separate team members.
Technologies
Liquid · JavaScript
External reference
Visit the reference site (kissthehippo.com) The live store may have changed since this engagement.
Subscription entry points across the store, as built for Kiss the HippoA customer can start or change a coffee subscription from five places — the product page, a search result, the drawer cart, the cart page and the end of the taste quiz — and every entry point leads into the same subscription purchase and management flow, implemented on the subscription app's own interface.
Fig. 1 — Five entry points into one subscription flow, as built for Kiss the Hippo. Schematic, not a product screenshot.

Context

Kiss the Hippo is a UK specialty-coffee brand with its own branches. It was a client of PATH Product & Software House, where I worked as a Shopify developer, and I was the developer assigned to the project; design, SEO and store management sat with other team members at PATH and at the brand. The subscription work is a problem many coffee and consumables brands share.

The problem

The store sold both one-off purchases and subscriptions, to consumers and to the brand’s own branches, across a wide range of coffees and brewing equipment. Two things were not working well enough: customers struggled to find the right coffee, and the subscription option was not presented consistently — it appeared in some places and not in others, which made subscribing harder than it should be.

Scope of my work

Subscriptions everywhere a customer decides

I integrated the subscription app’s purchase and management structure into every touchpoint where a customer chooses a product:

  • the product detail page, with plan selection and pricing;
  • search results, so a subscribable coffee could be added as a subscription directly from a result;
  • the drawer cart and the cart page, where customers can switch a line between one-off and subscription and adjust it;
  • the quiz page, so a recommendation can be taken straight into a subscription.

The implementation used the subscription app’s own interface for creating and updating selling-plan selections, keeping the integration stable across the app’s updates.

Finding the right coffee

A quiz structure was built to guide customers from taste preferences to a recommended product, with its result connected to the purchase and subscription flow described above. External JavaScript libraries (sliders and similar) were integrated for the interactive parts.

Design implementation and store changes

Designs arrived from the designer as Figma files and were implemented in Liquid, as new sections or changes to existing ones. Ongoing requests from the brand covered design and logic changes, bug fixes and new sections. I built structures that let the team use metafields effectively from within the theme, added a custom app that enabled order customization, and integrated several public apps.

Technical notes

  • Theme work on an existing Shopify Plus store, in Liquid and JavaScript.
  • Subscription controls bound to the app’s public JavaScript API on PDP, search, drawer, cart and quiz.
  • Metafield-driven content so merchandising information could be managed per product without code changes.
  • A small custom app for order customization alongside the theme work.

Outcome

Subscribing became possible from wherever the customer was — a product page, a search result, the cart or the end of the quiz — with the same controls and behavior in each place, and the team gained a quiz and metafield structures they could maintain.

Working on something similar? Most of these projects started with a short email describing the store and the problem.

Discuss your project