Badge Select whtSmall
Book a call

Case studiesKIF

KIF case study: a custom Shopify theme, built pixel-perfect from Figma.

A ground-up custom Shopify theme for a sustainable oral care brand — 7 page templates, 30+ custom sections, full customizer control, and a 1.3s LCP on Shopify's speed report.

Getkif Case Study
Client
KIFSustainable oral care · DTC
Scope
Figma to Shopify custom theme7 templates, 30+ sections, subscription PDP
Platform
ShopifyLiquid, vanilla JavaScript, CSS (BEM)
Live site
getkif.com Built and launched by Aqsa Shahzad Official

The challenge

Editorial layouts, two image systems, zero code for the team.

No off-the-shelf theme could support the editorial layouts, dual-image system, and animated typography the Figma designs called for. Mobile and desktop required entirely separate visual treatments — not a single responsive image scaled with breakpoints — and the merchandising team needed to update every heading, image, CTA, testimonial, FAQ, refill bundle item, and video without ever opening a code editor.

On top of that, the PDP needed bespoke UI for the color selector and subscription bundle, the page had to load fast enough to hold up to Shopify's speed scoring, and the codebase had to stay clean enough that any future developer could pick it up without losing context. The solution: a fully custom theme with 7 page templates, 30+ unique sections, a block-based architecture for every repeating element, and zero third-party JavaScript libraries anywhere in the build.

We hired Aqsa Shahzad Official LLC for a fully custom Shopify build, and the execution was excellent. Every Figma layout was delivered pixel-perfect, and every text, image, and block on the site is editable from the Theme Customizer—exactly the editorial control we wanted.

KIF Team — Founder, KIF

What we built

Seven templates, thirty-plus sections, zero libraries.

Every heading, image, CTA, testimonial, FAQ and refill item on the store is a customizer block the team can add, remove and reorder.

  1. 7 fully custom page templates

    Homepage, Collection, Brush Kit PDP, Smart Refill Bundle PDP, About, Sustainability, Instructions, and FAQ. Each page is composed entirely of custom sections, not base-theme defaults.

  2. 30+ custom sections

    Editorial hero banners, alternating feature panels, color showcase carousels, split feature blocks, lifestyle sliders, video instruction grids, accordion FAQs, subscription delivery schedules, animated stat counters, and more, every one wired to the Theme Customizer.

  3. Block-based architecture

    Testimonials, feature items, FAQ entries, refill cards, video steps, color swatches, and About-page timeline chapters are all customizer blocks the team can add, remove, and reorder without touching code.

  4. Custom interactive elements

    A color-variant image swap on the Brush Kit PDP, scroll-snap lifestyle sliders, animated CSS accordions, scroll-triggered fade-ins, and a slide-in cart drawer, all written in vanilla JS with zero library dependencies.

  5. Subscription PDP

    A bespoke Smart Refill Bundle template with editable delivery schedule blocks (1st, 2nd, and 3rd delivery contents and pricing), a 4-pillar “Why Subscribe” grid, and a 3-step process explainer.

  6. Performance

    1.3s Largest Contentful Paint on Shopify’s speed report, well inside Google’s “Good” Core Web Vitals threshold.

  7. Dual-image system

    A single reusable snippet powers 30+ image placements site-wide, rendering independent desktop and mobile assets through a clean element. Mobile and desktop are always independently optimized.

Results

Fully custom design and a 1.3 s LCP, in the same build.

1.3 sLCP on Shopify’s speed reportInside Google’s “Good” Core Web Vitals threshold7Custom page templatesNo base-theme defaults anywhere30+Custom sectionsAll wired to the Theme Customizer0Third-party JS librariesVanilla JS, dependency-free

A production Shopify theme that looks nothing like a default template, gives the KIF team full editorial control of their storefront, and loads at 1.3s LCP — proving that fully custom design and high performance aren't a trade-off when the build is done right.

Scope & stack

Services delivered, and the stack behind them.

Services
  • Figma to Shopify Theme Development
  • Custom Section Architecture
  • Performance Optimization
  • Subscription PDP Build
Stack
  • ShopifyStorefront and checkout
  • LiquidTheme language, section architecture
  • JavaScriptVanilla, no framework
  • CSSBEM, one critical stylesheet
  • FigmaSource of truth for every template
Approach
  • Section & Block Schema Architecture

Shopify Plus experts

Let's talk Shopify, Shopify Plus and the store you actually want.

An accredited Shopify Plus agency that designs, builds, migrates, supports and grows stores for brands that have outgrown templates. Ready when you are: talk to an engineer about the project.

Get in touch