A Crocs and Jibbitz storefront for the Russian market —
crocsclog.ru.
Built by FURAI LAB.
A project where the platform was chosen deliberately over writing our own. Tilda provides hosting, a catalogue, and a cart out of the box; everything it cannot do was written by hand — custom carousels, a size chart inside the product card, colour switching across separate products, a scrolling delivery ticker. None of these exist in the block library.
The studio already had Kokoc Store, its own storefront on Cloudflare Workers. The problem: it is unreachable from Russia without a VPN — the blocking happens upstream at the ISP level and has nothing to do with the site itself. Moving a working project to different hosting was not appealing; it is well built and serves an international audience.
The answer was a separate site on a Russian platform for the Russian market. Not a migration and not a mirror: a different domain, a different range (Crocs and Jibbitz only, no Adidas), and different logistics — Russia only, shipping free.
| Layer | Choice |
|---|---|
| Hosting and CMS | Tilda |
| Catalogue | Tilda's built-in store, sections and filters |
| Custom code | JS and CSS in the site <head> plus T123 blocks on pages |
| Delivery | CDEK, courier to the door |
| Header and footer | Separate pages assigned globally |
Choosing Tilda over a VPS with a hand-rolled engine came down to cost of ownership: the shop has a single operator, and the platform takes hosting, backups, SSL, and updates off their plate.
Size chart inside the product card. A script in <head> watches the DOM through a MutationObserver, finds the "Size" option heading in the product popup, and adds a link next to it that opens a modal with a US / EU / cm table. The click handler stops propagation — otherwise Tilda closes the product popup and the modal is left hanging over the catalogue.
Colour switching across products. One model in three colourways is three separate products, because Tilda hashes product image filenames and there is nothing left to filter a shared gallery by. The script matches the numeric product id from the URL against a group table and renders a row of swatches above the size selector, each linking to a sibling colourway. The products stay three pages in the index; the customer sees one choice.
Collection carousels. Tilda has no native carousel block for the store — every catalogue block lays products out in a grid. The row becomes a horizontal scroll-snap strip by overriding the grid with flex, with two caveats: Tilda keeps a separate skeleton container carrying the same class as the real one, and the cards use float-based column layout. Both have to be unset explicitly.
Delivery bar. Three equal columns with dividers on desktop. On mobile, a continuous CSS-animated ticker: the items are duplicated, the track travels half its own width and resets to zero, so the seam is never visible.
Category rows. Horizontal scroll with snapping, square tiles with category photography. Separate sets for the catalogue and for the collaborations page.
| Path | Description |
|---|---|
/ | Home: cover, collection rows |
/crocs | Catalogue: category tiles, SEO block with H1, price and size filters |
/collab | Collaborations: its own tile row by licence |
/supermario, /popmart, /lego, /onepiece, /disney, /cocacola | Individual collaboration pages |
/jibbitz, /kids | Jibbitz charms and kids' models |
/delivery | Delivery: terms, four steps, FAQ accordion |
/oferta | Public offer |
/privacy | Personal data policy |
Products are tagged into sections and pages are bound to sections — one product can sit in several at once. A collaboration model is marked both under "Collaborations" and under its own line, so it appears on both pages without duplicating the card.
Sizes and colours are modelled as characteristics, availability through variants. The selected size is highlighted in black: the rule has to target both the button and everything inside it, because the label lives in a nested element.
Checkout collects the delivery address in separate fields and a required personal-data consent checkbox. The box is not pre-ticked — pre-filled consent is not consent. The value travels with the order and serves as the record.
The public offer describes an agency service — purchasing goods abroad on the customer's behalf — rather than straight retail. Alongside it: a personal data policy and a cookie notice.
Sole proprietor registration details appear in the footer on every page.
FAQPage JSON-LD on the delivery page, with markup text matching the visible copy verbatimOnline payment. Orders currently arrive as enquiries and are invoiced manually — at launch that is a deliberate trade: the site ships in days rather than waiting weeks on merchant onboarding.