Online stores

Online cat and dog food store

Client: Craftia

The Craftia online store introduces shoppers to the brand’s food and helps them choose a diet that suits their pet

Visit the website
ReactVueFlaskDjangoPython
Online cat and dog food store

Project at a glance

Problem

The task was to build an online store for Craftia, a brand of premium cat and dog food. The range includes everyday food and veterinary diets.

What we did
  • Catalog of cat and dog food
  • Everyday food and veterinary diet sections
  • Filters by special needs and flavor
  • Sorting of product listings
What the client wanted
  • Present Craftia’s food range in an online store
  • Give shoppers access to the catalog on desktop and mobile
  • Introduce shoppers to the ingredients and nutrition principles

Want the same for your business? Tell us about your task — we’ll propose a solution and estimate the timeline.

A catalog by type of diet

We split the catalog into products for cats and for dogs. Each group separates everyday food from veterinary diets, so shoppers see right away where to look for the type of food they need.

On desktop, the sections appear as two large cards with animal photos and links to food categories.

Two product groups with links to everyday food and veterinary diets
Two product groups with links to everyday food and veterinary diets

Choosing food in the catalog

The product listing has filters by the pet’s special needs and by flavor. Sorting is available next to the product list, and search is in the site header.

The cards show the package, name and price. The rating and number of reviews are placed next to the “Add to cart” button, so this information is available right in the list.

Cat products: filters on the left, sorting and cards with prices on the right
Cat products: filters on the left, sorting and cards with prices on the right

The store on a phone

On a narrow screen, the categories are stacked one under another. Instead of photos, the catalog shows section names and large link rows leading to the types of food.

The product listing shows two cards per row. Filters open from a separate button next to sorting, and links to the home page, catalog, cart and account sign-in are in the bottom navigation bar.

Mobile catalog with large links to food categories for cats and dogs
Mobile catalog with large links to food categories for cats and dogs
Two cards per row, filter and sort buttons above the products, navigation at the bottom
Two cards per row, filter and sort buttons above the products, navigation at the bottom

Information for choosing a diet

The home page introduces the brand and the ingredients of its food. The “About the brand” section explains its nutrition principles and production technology, so shoppers can learn about Craftia’s approach before choosing a food.

The design uses pet photos, package images and green accents on the controls. On the home page, a large banner sits next to search and the catalog entry point.

Home page: a banner introduces the brand, while search and the catalog button lead to the product range
Home page: a banner introduces the brand, while search and the catalog button lead to the product range
The “Our philosophy” section explains the brand’s approach to pet nutrition
The “Our philosophy” section explains the brand’s approach to pet nutrition

Target audience

  • Cat and dog owners
  • Buyers of everyday food and veterinary diets

What’s inside

1

Catalog of cat and dog food

2

Everyday food and veterinary diet sections

3

Filters by special needs and flavor

4

Sorting of product listings

5

Cards with prices, ratings and review counts

6

Product search

7

Mobile version with bottom navigation

8

Information on ingredients and production

9

Region confirmation and access to support

How it looks

Need a similar project?

Tell us about your task — we’ll estimate the scope, timeline and cost and propose a solution.