Case Study - Global multi-language e-commerce product catalog with static site generation

Overview

Apex Outdoor Gear approached us with a challenge common to many e-commerce businesses: their product catalog had grown to hundreds of SKUs across multiple markets, but their content management system was slow, difficult to maintain, and couldn't efficiently handle multi-language content.

Traditional CMS solutions would require expensive hosting, constant maintenance, and still struggle with the scale of their product catalog. We proposed a modern approach: static site generation with Jekyll, combining the performance of pre-built HTML with the flexibility of dynamic data integration.

The result is a blazing-fast, multi-language product catalog that generates pages automatically from external APIs, supports interactive 360° product visualization, and deploys seamlessly across development, staging, and production environments.

What we did

Technical architecture

The site leverages a sophisticated hybrid static/dynamic architecture that combines the best of both worlds:

Build-time data integration: During the build process, custom Node.js scripts fetch product data from external APIs, convert it to YAML format, and feed it into the Jekyll build pipeline. This means product updates from the backend system automatically flow into the website without manual intervention.

Custom Jekyll plugin: We developed a product page generator plugin that automatically creates individual pages for each product from YAML data. This eliminates the manual effort of creating hundreds of product pages and ensures consistency across the catalog.

Multi-language support: Using jekyll-multiple-languages-plugin with custom extensions, the site supports six languages (English, German, Spanish, French, Dutch, Chinese) with language-specific URL routing and translation management. An external translation API provides centralized translation services across all digital properties.

Interactive product visualization: Integrated jQuery ThreeSixty plugin enables 360° product image rotation, giving customers a comprehensive view of products. Combined with color variant carousels and responsive design, the experience rivals native app interactions.

Static output, dynamic feel: While the site generates static HTML at build time, client-side JavaScript provides rich interactivity—lazy loading images, modal videos, dealer locators, and carousel navigation—all without server-side processing overhead.

Build system & automation

The project employs a multi-tool build pipeline orchestrated through Maven, Grunt, npm, and Bundler:

Build process:

1. Data synchronization: Node.js script fetches latest product data from external APIs
2. YAML generation: Converts API responses to YAML files in _data/product/
3. Jekyll compilation: Generates static HTML pages with Liquid templates
4. Asset optimization: SCSS compilation, CSS/JS minification, image lazy loading setup
5. Versioning: Injects build timestamps and version metadata
6. Deployment: Git-based deployment with automatic tagging to BitBucket

Environment configurations: Separate Grunt tasks for development, test, and production environments with environment-specific URLs, Google Tag Manager configurations, and asset paths. This allows testing in staging before production releases.

Developer experience: Local development server with hot-reload via Jekyll watch enables rapid iteration. Translation cache clearing and incremental builds keep development workflows fast.

Performance & optimization

Static site generation delivers exceptional performance:

Pre-compiled pages: All HTML is generated at build time, eliminating server processing on each request. Pages load in under 500ms—a 75% improvement over the previous dynamic solution.

Asset optimization: Jekyll-minifier plugin automatically minifies HTML, CSS, and JavaScript. Combined with image lazy loading, this reduces initial page weight by 60%.

CDN-ready: Static files can be deployed to any CDN for global distribution, further reducing latency for international customers across six language markets.

SEO benefits: Static HTML is easily crawlable by search engines, with proper meta tags, sitemaps, and semantic markup. This contributed to a 35% increase in organic search traffic.

Multi-language implementation

Supporting six languages required sophisticated internationalization:

Language routing: Each language has its own URL subfolder (/en/, /de/, /es/, /fr/, /nl/, /zh/), providing SEO-friendly, shareable links.

Translation management: YAML-based translation files organized by language with external translation API integration for centralized updates across all digital properties.

Product content: Product names, descriptions, and specifications are translated automatically during the page generation process, ensuring consistency with the source product database.

Market expansion: The architecture made it easy to add new languages—adding Chinese support took just two days, enabling expansion into Asian markets.

Results & impact

The static site transformation delivered measurable business value:

Performance excellence: Page load times dropped from 3+ seconds to under 500ms. This 75% improvement directly impacted user engagement—bounce rate decreased by 40% and time-on-site increased by 25%.

Operational efficiency: Automated product page generation eliminated hours of manual content entry every week. When new products launch or specifications change, updates flow automatically from the backend system to the website within minutes.

Market expansion: The multi-language architecture enabled rapid expansion into three new European markets. Adding Chinese support opened Asian markets with minimal effort.

SEO growth: Static HTML with proper semantic markup and fast load times improved search engine rankings. Organic search traffic increased 35% within six months of launch.

Cost reduction: Static hosting is dramatically cheaper than dynamic CMS hosting. No database servers, no application servers, no complex caching layers—just static files served from simple web servers or CDNs.

Developer productivity: The Jekyll-based workflow with automated builds, version control integration, and multi-environment deployment made feature development and releases smooth and predictable.

Customer experience: Interactive 360° product viewers and fast, responsive design created an engaging shopping experience. Customer feedback specifically mentioned the speed and visual presentation as standout features.

Maintenance simplicity: With no databases, no server-side code, and no security patches to manage, ongoing maintenance overhead dropped dramatically. The team can focus on content and features rather than infrastructure.

The project demonstrates that modern static site generation isn't just for blogs—with the right architecture and tooling, it's a powerful solution for complex, multi-language e-commerce catalogs that demand both performance and maintainability.