AO·dev

Daniela Tombini

VTEX Legacy e-commerce for intimate apparel and fitness wear, from a Santa Catarina manufacturer with over 30 years in business — video hero, a redesigned product page and GTM tracking.

Company

Avanti

Period

2022 – 2023

Role

Frontend Developer, VTEX Specialist

Daniela Tombini was born in Caçador, Santa Catarina, in December 1993 — the founder received a pair of slippers as a gift and started making handmade slippers at home. In 1996 the company became the first in Brazil to make washable slippers with a non-slip sole, which opened the way to robes, then pajamas, then the entire line of intimate apparel, beachwear and fitness wear the brand carries today. Today there are six physical stores across Santa Catarina and Paraná, and 153 employees (RAIS 2024) — a real factory behind the store, not a reseller.

Daniela Tombini home page, with video hero and featured categories
Daniela Tombini home page, with video hero and featured categories

At Avanti, this was one of the VTEX stores that passed through my hands — I worked on the home banner, category listing, product page, and the GTM-customized checkout.

Under the hood

LayerTechnology
E-commerceVTEX (Legacy), no Store Framework
TemplatesDust.js, server-rendered
JavaScriptjQuery, Vanilla JavaScript
Gallery/lightboxprettyPhoto
Analytics/TagsGoogle Tag Manager

No React, no Store Framework — VTEX's legacy Portal renders everything server-side via Dust.js templates, with jQuery and vanilla JavaScript on top. Editing checkout on this generation of VTEX has no direct access: it meant going into the Tag Manager, pasting custom CSS, and testing in production with extra care — there was no faithful staging environment, and checkout is the last thing you want to break on a store with real traffic.

Two brands, one catalog

Under the same domain, two brands coexist: "Daniela Tombini" for lingerie, pajamas and beachwear, and "VIVAME" for fitness wear — leggings, tops, shorts, thermal sets. The store now carries over 1,400 active products, faceted by category, color and size.

Women's category with color, size and category filters
Women's category with color, size and category filters

The idea for a video hero

Every fashion brand reference I looked at back then had the same thing: video in the hero, not a static banner. I proposed that to the team and it got approved. The <video> needed muted and playsinline to autoplay on iOS, had to load asynchronously so it wouldn't hold back LCP, and needed a fallback for slow connections — all of it without a bundler, just HTML/CSS/JS wired straight into the template.

The product page

My PO at the time wanted to change the product page and shared a reference store just to give a sense of direction — there was no ready-made design. What we ended up with was a two-column grid with full-size product images, instead of the usual small-thumbnail-plus-large-image pattern. Clicking opened the gallery with zoom. I also built a rule for when a product had video: it would take the grid's second slot and autoplay on its own, with no visible controls. All of it in document.createElement and getElementById, fetching the data through VTEX.

I tried to find a product with video today to confirm the behavior still exists, but couldn't find one among the catalog's current 1,000+ products — it may have been dropped from the catalog, or I just didn't get lucky searching. The two-column grid, though, is still there.

Product page with the two-column image grid
Product page with the two-column image grid

About

About Us page, telling the brand's origin story in Caçador
About Us page, telling the brand's origin story in Caçador

The brand's story told in detail, along with the physical stores, a careers page, and — since 2023, by legal requirement — a public pay-equity report between men and women.

This was one of the Avanti projects that taught me the most about solving interface problems without leaning on any framework — just vanilla JavaScript, attention to detail, and the will to make it look good.