vi

projects

MacBook retail website design for MacOne

A retail website for MacBooks and Apple accessories with spec filters, multi-variant product management, and prices synced directly from KiotViet in the stores.

WordPress CMSKiotviet APIPHP
MacOne website home page
MacOne product category page
MacOne product detail page
MacOne website footer
Role
WordPress Developer
URL
macone.vn

MacOne is a chain of stores selling MacBooks and Apple accessories, with several branches. The brief had two parts: rebuild the whole interface around the new brand identity, and connect the website to KiotViet (a Vietnamese point-of-sale system for retail shops), which the stores already run, so that prices on the web always match real prices.

One model line, dozens of price variants

A used Apple device doesn't have a single price. The same MacBook Pro line splits by generation, RAM/SSD configuration, color and condition, and each combination has its own price.

The easiest approach is one post per combination. That way one model line produces dozens of duplicate posts: the same description, the same photos, only the numbers differ. The operations team can't keep up with them, and Google sees a pile of nearly identical pages.

The result:

  • One clean URL per model line
  • No duplicate content across variants
  • Price updates that need nobody in the CMS

Price and stock sync per branch

Prices and stock levels come from KiotViet, the system store staff already use every day. Nobody has to enter the data a second time on the website.

The part that needed special handling at MacOne was stock per branch: a device can be in stock at one store and sold out at another. The product page shows the status at each branch instead of one combined number, so customers don't travel to a store only to find the device gone.

I later split this integration into a service shared by several websites and wrote it up in the post syncing KiotViet with WordPress.

An interface built for people shopping on their phones

Most MacOne customers visit from their phones, often while comparing prices across several shops. So the layout is mobile-first and puts three things up front: price, device condition, and warranty policy.

The category filters follow how Apple buyers actually search: model line and year of manufacture first, then specs and price range.

I wrote the whole theme from scratch. The code stays lean, it carries none of the dozens of features nobody uses, and I control the load speed.

More projects

all projects →