Eldora Shop — Mojtaba Mirbaqeri

01Overview

Eldora Shop is where the brand sells physical bullion — standard gold bars from several makers, and silver bars — by the piece rather than by the gram. It is a separate product from the Eldora trading platform earlier in this portfolio. The shop runs on Vima Shop, a commercial Laravel and Inertia store script, and I built the Eldora layer on top of it: the re-skin in the brand's colours and the Peyda typeface, a new home page, weight and fineness on every bar, and the live pricing behind all of it, down to the Laravel services that reprice the bars.

02The challenge

A store script expects a price that someone types in. A gold bar has no such price: it is worth its weight, times its fineness, times a rate that moves all day. The shop had to quote a number that stays true from the moment a buyer sees it to the moment the bank is asked for it — on the home page, the product page, the cart and the payment step — and it had to do that inside a large codebase written by someone else, as a client branch that still takes updates from the base script.

03Live rates, then the bars

The home page shown here opens its catalogue with the live rates — 18- and 24-carat gold per gram and 999 silver — and the time they last updated. Below them, each bar card carries its weight and fineness as chips over the photo, and its price is worked out from those two numbers and the rate rather than typed in. The page asks for a fresh quote every second while the tab is visible, and reloads prices only when the rate actually moves.

04A catalogue of real bars

The listing shown here is the script's own catalogue — the sort bar, and filters for brand, price range and stock — filled with the shop's whole range, from silver bars of a few grams up to a kilo, beside gold bars from one gram up. Each card adds the bar's weight, so two bars in the same packaging can be told apart at a glance.

Eldora Shop — A price that holds to the bank

05A price that holds to the bank

This shot pairs a 1.5-gram gold bar on desktop with a one-ounce silver bar on a phone. Under the price, the desktop page spells out the bar's metal, weight and fineness and says that the price follows the live rate. When the rate moves, the page reloads its prices without losing the buyer's selection; the cart, shipping and payment steps do the same, and the amount handed to the payment gateway is read again from the live price, so nobody pays a rate that has already gone.

06The shop in a hand

The screens shown here are the home page, a gold bar and the gold-bar listing at phone width. The brand's dark hero is still the first thing on screen, navigation moves to a bar along the bottom, and on a product page the live price and the add-to-cart button sit pinned at the foot of the screen, under the photo of the bar itself.

More work