Rhythm of Life

Page header background

Fashion E-Commerce Platform with Custom Shopify Stack & Performance Engineering

About

📍 Location: Europe

🗓️ Start Date: Apr 3, 2023

Status

Completed

Overview

High-end fashion brand with modern aesthetic and lightning-fast performance

Rhythm of Life is a high-end fashion brand with a modern aesthetic. I was responsible for leading the technical architecture, custom development, and performance optimization of the e-commerce platform. The goal was to deliver a pixel-perfect, lightning-fast online store with high visual fidelity and seamless user experience — all while maintaining clean, maintainable code.

We used Shopify as the base for scalability and stability, but extended it beyond default limitations with deep Liquid templating, custom JavaScript logic, and performance-first front-end practices.

Portfolio item image

Evidence

What it looks like running

  • Product row on the homepage — Traditional Chinese Medicine supplements with prices and stock state, captured from the April 2025 Internet Archive snapshot of the store
  • Homepage hero and main navigation, captured from the April 2025 Internet Archive snapshot of the store
  • Homepage about block describing the store's Traditional Chinese Medicine range, from the April 2025 Internet Archive snapshot
  • Blog teasers on the homepage, from the April 2025 Internet Archive snapshot of the store
  • The product carousel at a 390px mobile width, captured from the April 2025 Internet Archive snapshot of the store

Engineering

How it was built

Frontend

  • Custom Shopify theme built with Liquid, SCSS (BEM methodology), and vanilla JS
  • Product filtering with AJAX collections (dynamic rendering, no reloads)
  • Custom cart drawer with real-time inventory sync
  • IntersectionObserver & native lazy loading for image efficiency
  • Responsive breakpoints with fluid typography and grid layout
  • SVG sprite icons, inline asset delivery for better paint times

Backoffice & admin

  • Metafield-driven CMS for non-dev updates (products, lookbooks, banners)
  • Sections everywhere: fully modular JSON templates with dynamic schema
  • Custom liquid logic for conditional layouts, campaign timers, and geo-based banners

Checkout

  • Custom upsell logic pre-checkout (Shopify Plus script injection)
  • Multi-currency support using Shopify Markets
  • Analytics hooks via GTM + Shopify events

Performance

  • Lighthouse tuning: LCP < 2.5s, CLS < 0.1, TTI < 2s
  • Asset bundling and critical CSS extraction
  • WebP image delivery + CDN-based caching for all assets
  • JS hydration strategy for interaction-heavy components

SEO & metadata

  • JSON-LD structured data for products, breadcrumbs, and pages
  • Meta automation via Shopify metafields + fallback logic
  • Canonical URL setup + clean pagination & robots.txt configs

CI/CD & workflow

  • Theme version control using Git + Shopify CLI / Theme Kit
  • Development in Theme Dev environments
  • Codebase linted with Stylelint, Prettier, manual QA + staging pipeline

Applied

Skills on this project

ShopifyLiquidJavaScriptSCSSResponsive DesignAJAXSEOWeb PerformanceCI/CDThemingConversion OptimizationAnalyticsVersion ControlAccessibility (WCAG)CDN tuningLazy loadingTheme KitShopify Markets

Next step

Ready to bring your project to life?

Schedule a free 30-minute strategy call with our team.

Book Your Free Consultation or email contact@disit.tech

No sales call. You will talk to the engineer who would do the work, and you will get a written summary either way.