Tonerfy

E-commerce website for a printer sales company.

Back to Projects
Development with NextJS and ShopifyView Live

Tonerfy is an e-commerce site I built for a printer sales company that wanted to upgrade their online store. They had an existing Shopify setup that worked but looked dated, and they needed something more modern that could handle their large catalog and some custom features.

What They Needed

The client sells a lot of printers and accessories, so they needed a site that could:

  • Handle thousands of products without feeling slow
  • Show detailed specs for technical buyers
  • Let customers build custom printer packages with compatible accessories
  • Work well on mobile since a lot of their traffic comes from phones

How We Built It

We kept Shopify for the backend since it handles products, orders, and payments really well. But instead of using a standard Shopify theme, we built a custom frontend with NextJS. This gave us full control over the design and performance.

The Stack

  • NextJS for the frontend with server-side rendering
  • Shopify Storefront API with GraphQL to fetch product data
  • Tailwind CSS for styling
  • Vercel for hosting

The Tricky Parts

Making It Fast

With thousands of products and big images, the initial version was too slow. I added lazy loading for images, used NextJS's built-in image optimization, set up proper caching, and paginated the product listings. Got load times under 2 seconds.

The Package Configurator

This was the fun part. Standard Shopify themes can't do this, so I built a custom tool that lets customers pick a printer and then shows compatible accessories they can add. Prices update in real time as they build their package. Had to dig into the Shopify API to make this work properly.

Mobile

Product pages with all those specs were hard to use on phones. I went mobile-first and added collapsible sections so users aren't overwhelmed. The configurator also got a touch-friendly redesign.

How It Turned Out

After launch, the client saw:

  • 40% more conversions on mobile
  • 25% lower bounce rate
  • People spending 50% more time on the site

What I Learned

This project showed me how powerful headless commerce can be. You get Shopify's solid backend without being stuck with their themes. The tradeoff is more development work, but for a client with specific needs like this, it's worth it.

Connect
Let's get in touch