Ceramics online store
FORMA
Ceramics online store with a filtered catalogue, product pages, a persistent cart and an order form.
- Task
- Let customers examine pieces, select products and place an order.
- What I built
- Built a filtered catalog, product pages, a persistent cart and a checkout form.
- Result
- Customers can compare pieces, add them to the cart and proceed to checkout.
My role
Store concept, responsive development, catalogue and filters, product pages, cart, and checkout.
- Scope
- E-commerce / Catalogue / Frontend
- Period
- 2024
- Status
- completed
Stack
- Vue
- Vite
- Vue Router
- Tailwind CSS
The opening screen establishes the workshop’s quiet character and introduces its ceramics through large photographs.
A catalogue that continues the studio story
Editorial pages and products share one restrained visual system.
The home page connects product selections, the workshop story and paths into the catalogue.
The catalogue combines product cards and selection criteria to help compare available options.
An editorial page tells the workshop story and explains its process alongside the shop.
The cup page combines photographs, a product description and the add-to-cart action.
The bowl page presents another product type within the same specification and selection system.
The complete store works on a phone
The catalogue, filters, cart, and checkout all adapt to a vertical screen.
The mobile home page preserves the photographic rhythm and paths to products.
On a phone, the product grid adapts while retaining photographs, names and prices.
Care instructions form a dedicated, readable page for ceramic buyers.
The mobile vase page presents photographs and specifications in sequence before adding the item to the cart.
A focused cart and checkout
The path from a chosen piece to a completed order stays short, calm, and clear.
The cart collects selected items and saves its contents in the browser for a later return.
Checkout is a separate flow containing customer details and the contents of the purchase.
The mobile cart keeps item names, quantities and the checkout action readable.
On a phone, checkout uses a sequential form with large fields.
Mobile filters open in a separate panel, returning visitors to the products after choosing criteria.
Technical details
Vue Router connects the catalogue, product pages and editorial pages. The cart persists in the browser, and filters, cart and checkout have dedicated mobile layouts.
Let’s discuss your project
Tell me what you need: a website, store, service or workflow automation.