Skip to content
ADOV
Free Website Audit

Case study

Koffiracha's website sets hot sauce in very big type.

A Webflow site with Shopify checkout for Koffiracha, a coffee hot sauce, led by oversized type and food photography.

Desktop — scrolling the homepage
Client
Koffiracha
Industry
Food & beverage
Services
Web design & development
Webflow
Shopify
Platform
Webflow
Live site
koffiracha.com (opens in a new tab)

01 — Overview

Koffiracha is a hot sauce made with coffee, sold online and in stores. The site is built in Webflow with Shopify handling products and checkout, and it treats type as the main graphic: big, black and close to the bottle.

Inside the build

  1. Product and picture together

    Each sauce sits beside a bold lifestyle photo, with a heat rating in small chilli icons and the price.

    Chilli Fire product with the bottle, a photo of a woman eating noodles, heat rating and price
    Product — Chilli Fire

  2. Recipes as a carousel

    Made 4 U runs recipe cards across the page, each with its cooking time.

    Recipe carousel titled Made 4 U with dish photos and cooking times
    Recipes — Made 4 U

  3. Recipes you can follow

    Opening a recipe shows ingredients and numbered steps in accordions, on the brand's yellow-green.

    Recipe on yellow-green with a photo, cooking time, ingredients and steps in accordions
    Recipe — spaghetti bolognese

  4. Type as the main graphic

    On a phone, oversized words wrap around the bottle: Spicy Tangy Sweet, Pour, Hot couple hotter sauce.

  • Oversized words Spicy Tangy Sweet around the bottle on yellow-green, on a phone
    Mobile — Spicy Tangy Sweet
  • Chilli Fire product with a lifestyle photo, bottle, heat rating and price, on a phone
    Mobile — product
  • Waffles with hot sauce above an open ingredients panel, on a phone
    Mobile — what's in the sauce
  • Chicken roast recipe card with cooking time, on a phone
    Mobile — recipe card
  • The word Pour repeated in large type behind the bottle, on a phone
    Mobile — Pour
  • Headline Hot couple hotter sauce set around the bottle, on a phone
    Mobile — Hot couple, hotter sauce
  • Oversized words Spicy Tangy Sweet around the bottle on yellow-green, on a phone
    Mobile — Spicy Tangy Sweet
  • Chilli Fire product with a lifestyle photo, bottle, heat rating and price, on a phone
    Mobile — product
  • Waffles with hot sauce above an open ingredients panel, on a phone
    Mobile — what's in the sauce
  • Chicken roast recipe card with cooking time, on a phone
    Mobile — recipe card
  • The word Pour repeated in large type behind the bottle, on a phone
    Mobile — Pour
  • Headline Hot couple hotter sauce set around the bottle, on a phone
    Mobile — Hot couple, hotter sauce
Koffiracha: two friends laughing over a table of food and hot sauce

More work

All work