Skip to content
heapbyte - A name of excellence

Case study · 2025

Citizen Atelier

An art store should sell the artwork, not force the team to upload hundreds of nearly identical framed mockups.

  • Shopify Online Store 2.0
  • Liquid
  • JavaScript
  • Metafields
Discipline
Figma to Shopify · Product configurator · Art ecommerce
Year
2025
Engagement
Fixed scope
Status
Live
citizenatelier.com
citizen Atlier

01Context

  • Translate approved Figma layouts into responsive Shopify templates.
  • Build dynamic framing behavior for multiple artwork formats.
  • Keep product content and frame configuration manageable through Shopify.

Citizen Atelier sells contemporary wall art where presentation depends heavily on size, orientation, frame style, and print treatment.

The desired Shopify experience required different frame previews without manually producing every possible combination for every artwork.

HeapByte built the storefront from Figma and created a dynamic product experience capable of adapting artwork presentation to customer selections.

02What was in the way

  1. 01

    Combinatorial imagery

    Portrait, landscape, and square art each needed multiple frame and print treatments without exploding the media library.

  2. 02

    Two product experiences

    Different PDP layouts had to coexist while sharing underlying product configuration logic.

  3. 03

    Premium visual fidelity

    Frame proportions and responsive image behavior are especially noticeable in art ecommerce.

03Architecture

What we built, and what we deliberately left alone.

  1. 01

    Orientation-aware previews

    Frame rendering responds to the artwork's actual shape and selected configuration.

  2. 02

    Metafield-driven product content

    Supporting information, size guides, and product content remain editable within Shopify.

  3. 03

    Reusable PDP architecture

    Shared functionality powers multiple product page structures rather than duplicating implementation.

FIGMA / DESIGNERP · NETSUITECRM · KLAVIYOHEAPBYTE LAYERSTOREFRONT / THEMECHECKOUT EXTENSIONSSHOPIFY FUNCTIONS

Delivery

  1. Figma implementation
  2. Product templates
  3. Frame preview logic
  4. Responsive QA
  5. Content configuration

04Outcome

Artwork formats
3

Portrait, landscape, and square

Frame options
Multiple

Including black, white, natural oak, acrylic, and print-only states

PDP layouts
2

Separate experiences built on reusable logic

Manual mockups
Reduced

Dynamic presentation limits duplicate image production

05Engineering notes

Frame composition
Artwork assets are displayed within frame treatments rather than storing every visual combination as a separate static product image.
Orientation mapping
Template behavior adapts based on portrait, landscape, or square artwork metadata.
Conditional options
Available treatments can vary without multiplying Shopify products unnecessarily.
Responsive gallery
Desktop and mobile experiences preserve the visual hierarchy of the original design.

What we took from it

  1. 01Visual configurators can reduce both customer uncertainty and merchant content work.
  2. 02Art ecommerce requires unusually careful responsive image behavior.
  3. 03Product metadata is often better than hardcoded template branches.
  4. 04Figma fidelity matters most when components remain reusable afterward.

Disciplines applied

Next case study

BE O Lifestyle Product Customizer

We replaced restrictive personalization apps with a custom Shopify tool for choosing products, colors, uploading logos, previewing artwork, and requesting quotes.

Similar problem?

We will tell you whether this approach fits.

Every store is different. Send us yours and we will say what we would actually do — including when the answer is less work, not more.

Book ConsultationRequest Shopify Audit