--- title: "Nara Livin case study · Anirudh Goel" description: "Nara Livin. From Figma to Shopify, not a pixel out of place." canonical: https://anirudhgoel.xyz/projects/nara-livin updated: 2026-10-31 site: "Anirudh Goel" language: en --- # Nara Livin From Figma to Shopify, not a pixel out of place. [See it live ↗](https://naraliv.in/) - Industry Home & Living - Year 2025 - Role Design and build - Built with Shopify Theme DevelopmentLiquidMadrid Theme ![Nara Livin's homepage on a laptop: three warm photographs side by side, a terracotta chair in the middle under Fall 26, Live now.](https://anirudhgoel.xyz/_astro/home-desktop.B1jfCJuF_21EATh.webp) ![Nara Livin's Collections page on a phone: Trolleys & Consoles, a photograph of two vases and a bottle on a black console.](https://anirudhgoel.xyz/_astro/collections-phone.MLxnXWSQ_Z1v7c6T.webp) Nara Livin makes home goods at the editorial end of the market. Their lamps have architectural silhouettes. Their tables have been featured in Elle Decor and Design Pataki. The brief arrived as a complete Figma design system with one instruction: match it exactly. ## Nara Livin, in numbers. ![The Collections page on a laptop: four photographs in a row, named Trolleys & Consoles, Tables, Signature Catalog and Seating.](https://anirudhgoel.xyz/_astro/collections-desktop.BAs7FsBc_pbXFP.webp) **0**design revision requests after the client checked the live site against Figma **9px**labels, loaded to render the same on Mac and Windows **Madrid**was the base theme; nearly every front-end detail was replaced **Gifting**an editorial Liquid template of its own **Swatches**a grid on Shopify metaobjects, opened in a custom lightbox ## The brief Madrid doesn’t give you Gill Sans at nine sizes, a seasonal gifting template, or a custom lightbox for material swatches. Every spacing value, every overlay percentage, every border radius was specified in the Figma file. Approximately correct was not an option. The store launched to its first paying customers within six weeks of brief sign-off. Madrid was the base. Nearly every front-end detail was replaced. Gill Sans is not a Google Font, so font loading was handled explicitly to ensure 9px labels render identically on Mac and Windows. A custom lightbox was written in Liquid for the swatches page. The gifting page got its own editorial Liquid template. The material swatches grid was built on Shopify metaobjects. The store launched in 2025. After sign-off, the client reviewed the live site against the Figma file section by section. There were no revision requests on the design. ## Three pages, on a phone. ### The swatch lightbox Each finish on Materials & Swatches opens large in a lightbox written in Liquid, with its name under it, and closes back to the grid. ### The gifting page Its own template: a full-width photograph of the gift cartons, then Gifting and Corporate / Bulk Solutions, then Nara’s Gifting Picks. ### The editorial home The Fall 26 slideshow, a product slider, Top Picks and a grid, each laid out on the brand’s own photography. ## Screens ### Collections, in photographs Collections opens on a grid of large photographs, each named under it: Trolleys & Consoles, Tables, Signature Catalog and Seating. ![The Collections page on a laptop: four photographs in a row, named Trolleys & Consoles, Tables, Signature Catalog and Seating.](https://anirudhgoel.xyz/_astro/collections-desktop.BAs7FsBc_pbXFP.webp) ### The product page The gallery on the left; on the right the name, the material, Add to cart and Buy it now, then delivery, returns, customisation and sourcing, each one line. ![The Loft Floor Lamp's product page at launch: two large photographs of the lamp beside its name, material picker, Add to cart and Buy it now.](https://anirudhgoel.xyz/_astro/nara-product.XqWX9Oso_Z1vTHdh.webp) Product page at launch ### Gifting, on its own template The gift cartons fill the left half; the right holds the Gifting and Corporate / Bulk Solutions copy. ![The Gifting page on a laptop: a photograph of rows of kraft gift cartons beside the Gifting and Corporate / Bulk Solutions copy.](https://anirudhgoel.xyz/_astro/gifting-desktop.EBOr0owc_Z2tljvq.webp) ![The Gifting page on a phone: the gift cartons over the Gifting copy.](https://anirudhgoel.xyz/_astro/gifting-phone.15pqD3xl_ZOMSkH.webp) ### Materials & Swatches An introduction, then the finishes as a grid of squares, each with its name. A tap on one opens it in the lightbox. ![Materials & Swatches on a laptop: the introduction, then four columns of finish squares, from Rust Grey and Terracotta Rose down.](https://anirudhgoel.xyz/_astro/swatches-desktop.DuPmbRV1_ZxgnBh.webp) ![The homepage as first shot for this study: Objects that Shape Everyday Living over three warm photographs of a vase, books and a black sculpture.](https://anirudhgoel.xyz/_astro/nara-walkthrough-2.i7HXP8mQ_2fETYs.webp) ### Homepage at launch ![The New In collection as first shot: the Loft Floor Lamp, Pedra Table, Orbit Portable Lamp and Muse Portable Lamp in a row.](https://anirudhgoel.xyz/_astro/nara-collections-2.DrTHOYZ8_ZWPu4k.webp) ### New In A collection page: four large cards to a row, the name and price under each. ![The Arcadia Table product page as first shot: a cream sculpted side table in two photographs beside its material picker and buttons.](https://anirudhgoel.xyz/_astro/nara-product-2.BN7GKxvY_Z1vIhu0.webp) ### A table’s page The Arcadia Table, with the same layout as the lamp: gallery left, buying right. ![The Gifting collection as first shot: The Swirl Set, The Glow Box, the Nova Lamp (Set of 2) and the Orbix Rechargeable Lamp (Set of 2).](https://anirudhgoel.xyz/_astro/nara-gifting-2.Cy-4pIVw_1SVyC1.webp) ### The gifting collection The Swirl Set, The Glow Box and the lamps sold in pairs. ![The swatch lightbox on a laptop as first shot: the Rust Grey finish in a white panel over the faded page.](https://anirudhgoel.xyz/_astro/nara-swatches-2.DrVqB1fv_1k7t2R.webp) ### The lightbox on a laptop Rust Grey open over the faded swatches page. ## The plan. ### The site’s architecture The homepage over its collections, the product template, cart and checkout; under them the two custom Liquid pages, gifting and material swatches, and the builds behind the swatches. ### The design brief The brand’s four words, the Gill Sans type scale down to its 9px labels, the constraints taken from the Figma file, and the custom builds. ## Testimonial > “After launch, I went through the live site against the Figma file, section by section. The spacing was right. The overlay percentages were right. The 9px labels were right. Every time I expected to find something approximated, it hadn’t been. **I’ve worked with developers who get the big picture right and let the details slide. That didn’t happen here.**” > > Nara Livin, 2025, Nara Livin What I would do differently One thing I’d do differently: define the metaobject schema for swatches at the start of the project. We refactored two templates mid-build when the scope expanded from materials to include finish types. ## More work. [Every case study →](https://anirudhgoel.xyz/projects) [**Bibal**Client · Multi-Vendor2024 ](https://anirudhgoel.xyz/projects/bibal)[**Keer**Client · Fine Jewellery2026 ](https://anirudhgoel.xyz/projects/keer)[**Islands of Loom**Client · Menswear2025](https://anirudhgoel.xyz/projects/islands-of-loom) ## Have a build in mind? Say hi. [Book a 30-minute call ↗](https://cal.com/anirudh.goel/consultation?utm_source=portfolio\&utm_medium=site\&utm_campaign=study-nara-livin\&utm_content=closing) [WhatsApp me ↗](https://wa.me/917814769892?text=Hi%20Anirudh%2C%20I%27m%20on%20your%20Nara%20Livin%20case%20study%20and%20want%20to%20talk%20about%20a%20project.) [More work →](https://anirudhgoel.xyz/projects) I reply the same working day. --- Site index for AI assistants: https://anirudhgoel.xyz/llms.txt Every page as one file: https://anirudhgoel.xyz/llms-full.txt