I designed a parts store’s website around WhatsApp instead of a cart

The first decision was something to leave out. The Repuestos Alto site has no shopping cart and no checkout. The catalog, every product page and the 3D estimate form end in the same place: a WhatsApp message with the details already written.

WhatsApp is the channel the site puts first, from the button in the hero to the floating button on all 40 pages in the sitemap. A cart would have brought payments, stock counts and refunds with it. The trade-off is simple: nobody can pay on the site, and a message sent at night waits for a person to answer.

In the first version, the content sat inside the code. Sixteen days after the first commit (the first saved version of the code), I moved it into Sanity, a hosted CMS. A CMS is an editing screen for people who do not program. Hero slides, LED products, categories, services and FAQs now come from it, and a marker like {{LED}} lets staff color a word in the brand orange without touching code. The next day I wrote a guide in Spanish for the staff.

Most pages are built ahead of time and served from a cache, so a visit does not wait on the CMS. The catch is that a published edit needs a signal before it shows. In August the project gained a signed webhook route for that, which refreshes cached pages by content type. Key pages also keep fallback text, so the site does not go blank if the CMS has nothing to show.

In August the LED catalog gained search and filters. Its 28 products have codes like POD5-954MD-02, and people type codes in different ways, so the search ignores accents, capitals and dashes. Typing “tamano” or “tamaño” gives the same list, and a code typed with a dash or with a space finds the same products. If someone types an exact code, that product comes first.

Two smaller choices matter more than they look. The type filter (pods, round lights, bars) is set by hand on each product in the CMS, because a code prefix does not tell you the shape. And the search, the type and the sort order live in the page address, so a filtered view can be sent on WhatsApp already applied.

That approach suits 28 products. A catalog of thousands would need a dedicated search service.

ALTO 3D prints replicas of car parts, and a customer needs a way to describe a part before visiting. I built the estimate form to ask for length, width and height, where the part will live, how strong it must be, the finish and the quantity. It suggests a material and shows an approximate figure. The suggestion follows the answers: PLA by default, ASA for outdoor parts, ABS for strong parts inside the car. The site explains each in a line; ASA, for example, is the outdoor choice because it resists sunlight.

The page says plainly that the figure is approximate. Then it opens WhatsApp with every choice written into the message. The form calls no server and stores nothing. That keeps it simple, but there is no list of past requests to review; they live in WhatsApp.

Four pages open with a 3D scene made with Three.js: home, ALTO LED, ALTO 3D and the brand page. Each scene loads in the browser after the page itself, and its resolution is capped so phones do less work. The scenes are decoration, so the page reads even before one appears.

The 21.7-second promo video is code too, written with Remotion. That paid off in March, when four car brands were removed from the site: I re-rendered the video from its code, with those brands taken out, instead of editing footage by hand. On the home page it never starts by itself; a visitor presses play.

Visual effects add code to load and maintain, so I keep the 3D scenes and the video on the pages that sell the idea. Product pages get photos, specs and a button instead.

The site uses the store’s own photos, such as the LED display wall and the stockroom. I added them in March, already converted to WebP. The server then sends AVIF to browsers that support it: for one 1200-pixel stockroom photo, that means 43,757 bytes instead of 91,164.

Photos are often the heaviest part of a page, so they are worth checking in any project. On the catalog, 28 of the 30 images load lazily, only when they get close to the screen.