An Avada site and shop brought in line with a Figma design

A German company sells its own brand of building accessories through dealers. Its new Avada site sat on a test server and didn’t look like the Figma design. It had to serve two audiences: guests who ask for a price, and registered business customers who buy in a normal shop.

In my first estimate I proposed the shop in two parts: hidden prices and a price request form for guests, the standard shop for business customers. I argued against two synced sites, because every design change would have to be made twice.

Figma styles inside Avada

Avada’s page builder gives elements no unique classes, so broad style rules would break the rest of the theme. I added one wrapper class for sections in the editor. It gives the headings inside the Figma styles and forces nothing elsewhere in Avada.

I rebuilt the About page with Avada’s own tools, so the client can add similar pages alone. The contact page got a clickable phone, fax and email, a map and a form. I styled the shop, cart and checkout, and matched the product filter to the design on every screen size and added a German translation file for it. For the brand’s product icons I made an icon font, corrected the uneven icon sizes in CSS and recommended redrawing the set as squares. I joined the installation videos and downloads into one service page, with full-width videos and a clean list of PDF files.

I reported every step in a short video, and the client’s decisions came through the agency. The test site became the live site, with the heading class, the icon font and the service page in use there today.