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
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