Custom Shopify E-Commerce Development

Lunamia Kids is a children's fashion brand that required a fully custom Shopify storefront — built from scratch on the Dawn 2.0 theme. The goal was to craft a visually unique, conversion-optimized shopping experience that reflects the brand's playful identity while offering powerful backend functionality for the store owner.

This project covered end-to-end design and development: custom branding, bespoke Liquid section development, and a private Shopify bundle app to enhance the customer shopping experience and drive higher average order value.

Build a recognisable brand presence for a kids fashion store

Enable product bundling to increase average order value (AOV)

Give the store owner full CMS control without developer help

Create a scalable theme structure for future product launches

Customize Dawn theme without breaking core update compatibility

Build modular, schema-driven custom Liquid sections

Develop a robust private app for bundle product management

Ensure fast load times and mobile-first responsive design

Custom Shopify Liquid sections were developed to give the client full control over dynamic page content through the Shopify Theme Editor — no developer required for day-to-day updates.

Custom Shopify Liquid sections were developed to give the client full control over dynamic page content through the Shopify Theme Editor — no developer required for day-to-day updates.

Full-width animated banner with heading, subheading, CTA button, and background image — all editable via Theme Editor with live preview.

Dynamic product grid linked to any collection with custom column count, badge overlays, and hover animations.

Sticky top bar with icon, message, countdown timer support, and configurable colors.

Split-screen section alternating image left/right with rich text, highlights, and CTA — ideal for brand storytelling.

Carousel-style reviews section with star ratings, customer names, and fully editable content blocks.

Visual grid of category cards with image, label, and link — built with responsive CSS Grid.

The collection page was rebuilt from scratch to create a powerful, intuitive browsing experience for shoppers. Beyond the default Dawn layout, custom features were added to help parents quickly discover and filter products by age, size, and category — reducing friction and improving conversion.

Custom-built filter panel using Shopify Storefront API — filters products by size, age group, color, and price range without page reload.

Persistent sort controls (Best Selling, Price Low–High, Newest) with active state indicators and smooth product grid re-ordering.

View switcher allowing customers to switch between a compact grid and a detailed list layout, preference saved in sessionStorage.

Custom product cards with hover image swap, quick-add to cart button, sale badge, 'New Arrival' tag, and wishlist icon overlay.

Load more products without page refresh using AJAX calls to the Shopify collection endpoint, with a loading spinner UI.

Displays currently applied filters as removable tags above the product grid, with a clear-all option for quick reset.

Friendly 'No products found' message with suggested alternative collections when filters return zero results.

On mobile, filters collapse into a bottom drawer with touch-friendly checkboxes and an Apply button for a native app-like feel.

The product page was redesigned to maximize trust, engagement, and conversion. Every element — from image gallery to variant selection to upsell blocks — was custom-built in Liquid to match the brand experience and guide shoppers confidently toward purchase.

JavaScript listener on variant change events updates the featured image and thumbnail strip without page reload using Shopify's variant data object.

IntersectionObserver API detects when the native ATC button scrolls out of view and activates a fixed bottom bar with product title and selected variant.

Products are added to cart without redirect using fetch() to the /cart/add.json endpoint, with real-time cart count update in the header.

Lightweight modal built in pure CSS/JS (no third-party library) triggered by a link near the size selector, with age-to-size mapping table.

Product highlight icons (materials, safety certifications) are stored in Shopify metafields and rendered dynamically on the product template.

Related products are pulled from the same collection using Liquid's collection.products loop, filtered to exclude the current product.