Helelai
Let’s talk
All work

01 Custom Shopify theme · multi-page corporate site

B2B Colombian food importer & distributor

A seven-page corporate Shopify site built from 55 hand-written sections — including an animated 50-state distribution map.

ShopifyB2BSVG AnimationE-commerce
All nine projects
Custom Shopify theme · multi-page corporate site screenshot pending

[TODO-DUEÑO] Confirm written permission to publish the client name, logo and live link.

A public live site exists for this project. The link is held back until the client approves being named — linking to their domain from a portfolio is itself a claim about the relationship.

AThe problem

A U.S. importer and distributor of Colombian food had to speak to three different audiences from one site — retail buyers looking for products, distribution partners evaluating coverage, and export prospects checking credibility — without the weight or the sameness that a page builder would impose.

BWhat we built

A Shopify theme written from scratch, with no Dawn or Horizon base underneath it. Seven pages — Home, U.S. Catalog, Distribution, Logistics, Brands, About and Export — assembled from 55 hand-built sections, every one of them editable from the admin.

CSignature pieces

The parts worth looking at.

  1. 01

    Animated 50-state distribution map in SVG

    Coverage zones drawn per warehouse, a Medellín→U.S. freight arc that draws itself and then flows, and pulsing pins that open the real warehouse in Google Maps. Hand-built SVG, no mapping library.

  2. 02

    The ordering app, demoed in a pure-CSS phone

    A phone mockup built entirely in CSS, where an animated finger taps through the whole ordering flow — filter, add to cart, checkout, confirmation, and a delivery truck running its route. Bilingual, with playback speed set from the admin.

  3. 03

    A 50+ brand wall on one reusable modal

    Every logo opens a panel with that brand’s history, founding year, parent company and why it matters in the U.S. market. Fifty-odd entries, one modal component, all content admin-editable.

  4. 04

    The details that carry the rest

    A floating pill header that shrinks on scroll, an animated process timeline, an adaptive video hero, and a gallery that turns into a swipeable slider on a phone.

EOutcome

A conversion and quality audit run by 11 parallel agents produced 172 findings, of which roughly 70 were applied as fixes. Domain and SSL connected, structured data and technical SEO shipped with the site.

FStack

  • Shopify
  • Liquid
  • HTML
  • CSS
  • JavaScript
  • SVG animation
  • JSON-LD

GStill to supply

  • [TODO-DUEÑO] Screenshots, or authorization to capture them from the live site.
Back to the work What happens next