How did we build this project?
Project overview
A comprehensive e-commerce solution built for Torga Optical, an international eyewear brand with a strong presence across multiple markets. The project was developed on the latest version of nopCommerce, extensively customized to align with the brand's identity and to support the unique requirements of selling prescription eyewear online.
A fully custom theme was built from the ground up, converted pixel-perfectly from Figma designs to ensure the online experience reflects Torga Optical's distinctive brand identity across every touchpoint. Multiple extensions and modifications were made to the core nopCommerce platform to tailor it to the specific needs of the optical industry and the brand's business model.
The platform includes a virtual try-on assistant that allows customers to preview frames on their own face in real time, helping them confidently choose the right pair of glasses online. A redesigned, streamlined checkout flow was tailored specifically to eyewear purchases, optimizing conversion while accommodating the additional complexity of prescription products. A custom-built select lens functionality guides customers through choosing the right lens type, coatings, and prescription options, turning a traditionally complex in-store process into a smooth online journey.
The project also included digitization of physical paperwork used in Torga's retail stores, enabling customers to review and sign documents online. This reduces friction, speeds up the in-store experience, and bridges the gap between offline and online operations. A passwordless, phone-number-based authentication system was implemented as well, offering customers a faster and more convenient way to access their accounts.
The result is a modern, brand-aligned e-commerce platform that combines the flexibility of nopCommerce with deep industry-specific customizations — delivering a seamless omnichannel experience that supports Torga Optical's growth both online and in physical retail stores.
Google Analytics 4
Payfast by network
Stripe
Offline retailer
Brevo
Click & Collect
The homepage serves as the main entry point to Torga Optical's online store, introducing the brand and guiding visitors toward product discovery. It opens with a full-width hero banner featuring the tagline "Express Your Individuality" and a prominent "Shop Now" call-to-action, immediately setting a confident, lifestyle-driven tone.
Below the hero, an "About Torga Optical" section tells the brand story — an international eyewear brand founded in 1984 in Johannesburg, with a vertically integrated model covering frame design, manufacture, and German-precision lens technology.
A dedicated "Torga Vision X1" feature block highlights the brand's flagship collection with lifestyle imagery and a "Discover" CTA, pushing users deeper into the catalog.
The "Our Favourites" section presents a curated product grid of best-selling frames (Femina, K-Collection, Cliche, Retro, Americana, Bella Claire, Noir Vous, Chilling, Torga Classic), each card showing the frame image, name, starting price, and available color swatches — enabling quick browsing and comparison.
A "Why Us" accordion summarizes the brand's value proposition in four points: precision eye care, an extensive range of stylish frames, German-precision lens technology, great value with no middlemen, and fast, reliable service.
The page closes with a "Follow the Journey" Instagram-style gallery for social proof, followed by a comprehensive footer with navigation, customer service links, newsletter signup, and region/language selectors.
Role of the page: brand introduction, product discovery, and conversion funnel entry point — balancing storytelling with clear shopping pathways.
The catalog page is the main product discovery screen of the online store, presenting the full eyewear range in a clean grid layout on a subtle marble background that keeps the focus on the frames. Each product card shows a high-quality image, the model name, the starting price for frame and lenses, and color swatches for available variants.
A comprehensive filter sidebar lets shoppers refine the catalog by price, colour, target group, frame size and shape, lens width, nose bridge width, style, temple length, material, and rim type — a custom-built filtering system tailored to the specific attributes that matter when choosing prescription eyewear. A category menu groups products into curated collections and alternative browsing paths by type, gender, eyeshape, and trends.
Product cards include a "Try On" badge where virtual try-on is available, seamlessly connecting the catalog with the virtual try-on assistant. Sorting, pagination, and consistent header/footer navigation complete a fast, filter-rich catalog experience tailored specifically to the eyewear industry.
The product detail page gives customers all the information needed to confidently choose a pair of glasses online. A large product image gallery with thumbnail navigation showcases the frame from multiple angles, while the main panel displays the model name, starting price for frame and lenses, stock status, and delivery information.
Customers can select their preferred colour from available swatches, along with nosebridge width and frame size — with each option clearly labelled (e.g. "Wide", "Large") to simplify the choice. A prominent "Choose Lenses" call-to-action launches the custom lens configurator, alongside quick actions for wishlist and measurements.
Below the main section, expandable panels organize additional information into About, Product Details, Torga Made, Find Stock, Measurements, and Questions & Queries — giving shoppers deep product context without cluttering the main view. A floating "Try On" button provides instant access to the virtual try-on assistant directly from the product page.
The result is a focused, conversion-oriented product page that combines clear visual presentation with the specialized options required for prescription eyewear.
The Virtual Try-On is a custom-built assistant that lets customers preview frames on their own face in real time, directly in the browser. Launched as an overlay from any product page, it combines a live camera view with smart filtering and instant model switching.
A filter panel lets users refine available frames by target group, style, and shape, with a search field and a "Check PD" action for measuring pupillary distance. The central area shows the live camera feed with the selected frames rendered on the user's face, while a side panel displays the current model with price, colour options, size, and a direct "Shop Now" call-to-action. A carousel of similar frames allows instant swapping and side-by-side comparison without leaving the session.
The result is a seamless, in-context shopping experience that removes one of the biggest barriers to buying eyewear online — not being able to see how the frames actually look on your face.
The mega menu is a rich, full-width navigation panel that opens from the main "Glasses" link, giving customers multiple entry points into the catalog at a glance. Featured product cards at the top highlight curated picks with images, names, and starting prices, turning the menu itself into a discovery surface.
Below the products, links are organized into clear browsing paths — By Type (bestsellers, computer glasses, reading glasses, prescription sunglasses, multifocal glasses, sports eyewear), By Gender (women's, men's, kids), and Eyeshapes (round, square, rectangle, cat eye, aviator) — letting users jump straight to the collection that matches their intent without going through the main catalog first.
The checkout is a custom-built, single-page experience that consolidates the entire purchase flow into one streamlined view. On the left, customers fill in their billing address, choose a shipping method (including in-store collection to meet prescription eyewear regulations), and select a payment method powered by Stripe Hosted Checkout — supporting credit and debit cards, Apple Pay, Klarna, and more.
On the right, a persistent order summary displays all products with their selected options, quantities, and prices, along with fields for discount coupons and gift cards, plus a clear breakdown of sub-total, shipping, and total.
The result is a fast, transparent, and conversion-optimized checkout tailored specifically to selling prescription eyewear online.
.png "Usage Technologies torgaoptical.com Image 1 noptech")
.png "Usage Technologies torgaoptical.com Image 2 noptech")
.png "Usage Technologies torgaoptical.com Image 3 noptech")
.png "Usage Technologies torgaoptical.com Image 4 noptech")
.png "Usage Technologies torgaoptical.com Image 5 noptech")
.png "Usage Technologies torgaoptical.com Image 6 noptech")
