KIF — 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.
About the brand
KIF is a sustainable oral care brand built around the world’s smallest toothbrush kit a pocket-sized product that replaces the plastic brush, toothpaste tube, and floss pack. The brand sits at the intersection of minimalist premium design and eco-conscious identity, with a restrained palette of white, black, and five signature product colors.
The founders came to Aqsa Shahzad Official with a complete Figma design system and a clear ambition: build a Shopify storefront that felt closer to an editorial product launch site than a templated DTC store. Every page needed to be a unique editorial experience, every visible element had to be editable from the Theme Customizer without touching code, and the entire frontend needed to ship dependency-free to protect page speed.
Services
Figma to Shopify Theme Development, Custom Section Architecture, Performance Optimization, Subscription PDP Build
Tools & Technologies
Shopify, Liquid, Vanilla JavaScript, CSS (BEM), Figma, Section & Block Schema Architecture
Challenges & Objectives
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.
Our team can now update every page, image, and block ourselves — and the site loads faster than anything we'd seen on Shopify before.
KIF Team — Founder, KIF
What Was Built?
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.
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.
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.
Dual-image system
A single reusable snippet powers 30+ image placements site-wide, rendering independent desktop and mobile assets through a clean <picture> element. Mobile and desktop are always independently optimized.
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.
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.
Performance
1.3s Largest Contentful Paint on Shopify’s speed report — well inside Google’s “Good” Core Web Vitals threshold.
Results
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.
Partnering to Build Scalable Shopify Growth
Aqsa Shahzad Official LLC works alongside your team to unlock new revenue opportunities, optimize performance, and create sustainable, long-term growth.
