{"id":1864,"date":"2026-03-31T07:12:28","date_gmt":"2026-03-31T07:12:28","guid":{"rendered":"https:\/\/staging.younify.fidev.nl\/solution\/how-we-built-a-custom-lens-configurator-in-magento-2\/"},"modified":"2026-04-30T11:40:01","modified_gmt":"2026-04-30T11:40:01","slug":"how-we-built-a-custom-lens-configurator-in-magento-2","status":"publish","type":"solution","link":"https:\/\/staging.younify.fidev.nl\/en\/solution\/how-we-built-a-custom-lens-configurator-in-magento-2\/","title":{"rendered":"How we built a custom lens configurator in Magento 2"},"content":{"rendered":"\n<section class=\"container-fluid el-text-columns \">\n    <div class=\"container-lg py-5\">\n                    \n                <div class=\"row justify-content-lg-start align-items-start text-start\">\n\n                                            <div class=\"col-lg-12 h4-uppercase h4-semibold\">\n                                                        <p>Buying prescription glasses is not the same as adding a pair of sneakers to your shopping cart. The customer must choose a frame that fits their face, select the correct lens type, enter the exact prescription per eye, and then decide on coatings and filters. It is a personal, optical, and technical process that must be flawless in a webshop. Standard Magento does not offer a solution for this. Yet, the modern consumer expects exactly that experience online.<br \/>\nFor <a href=\"https:\/\/www.winkandsee.com\" target=\"_blank\" rel=\"noopener\">Wink &amp; See<\/a>, a Dutch online optician offering prescription glasses starting from \u20ac29.95, Younify developed a fully custom lens configurator as a Magento 2 module. In this article, we show how we approached this and the technical and UX choices involved.     <\/p>\n                                                                                                                                        <\/div>\n                                    <\/div>\n                            <\/div>\n<\/section>\n\n\n<section class=\"container-fluid el-text-image pt-lg-5 bg-accent-2 position-relative mb-minus-1 pb-lg-5\">\n    <div class=\"container-xl py-5\">\n        <div class=\"row\">\n\n                            <div class=\"col-lg-4 pe-lg-4 position-relative\" data-aos=\"fade-up\">\n                    <h2>The challenge: a complex product in a simple flow<\/h2>\n                <\/div>\n            \n                            <div class=\"col-lg-8 ps-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"200\">\n                    <p>Wink &amp; See sells prescription glasses, sunglasses, reading glasses, and multifocal glasses entirely online, without a physical store. Customers configure their glasses themselves: from frame to lens type, and from diopter to blue light filter. This makes the ordering process fundamentally different from that of a standard e-commerce product.  <\/p>\n<p>The core of the problem? Magento 2 includes configurable products and bundled products, but neither covers the complexity of prescription glasses. Consider the following challenges:  <\/p>\n                <\/div>\n            \n        <\/div>\n    <\/div>\n<\/section>\n    <section class=\"container-fluid el-text-image position-relative \">\n        <div class=\"container-xl py-5\">\n            <div class=\"row align-items-center pb-4\">\n\n                                    <div class=\"col-lg-6 pe-lg-4 position-relative\" data-aos=\"fade-up\">\n                        <div class=\"masked-image-wrapper\">\n                            <div class=\"masked-image mask-2\" style=\"background: #f8f4f8;\">\n                                <div class=\"masked-image mask-2\" style=\"transform: scale(0.98);\">\n                                    <img decoding=\"async\" src=\"https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Screenshot-2026-04-01-at-3.53.54-PM-1024x782.png\" alt=\"\">\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                \n                                    <div class=\"col-lg-6 py-lg-0 pb-4 pt-4 ps-lg-5\" data-aos=\"fade-up\" data-aos-delay=\"200\">\n                        <div class=\"h4-uppercase \">\n                            <ul>\n<li><strong>Multiple lens types with price impact.<\/strong> Single-vision lenses, progressive (multifocal) lenses, sun lenses, and photochromic lenses, each with a different surcharge. For example, prescription reading glasses start at \u20ac29.95, while multifocal lenses cost an additional \u20ac30 and a blue light filter another \u20ac20. <\/li>\n<li><strong>Prescription per eye.<\/strong> The customer must provide the sphere (SPH), cylinder (CYL), axis (AXIS), and potentially the addition (ADD) for each eye. This involves up to eight numerical fields, each with specific validation rules and ranges. <\/li>\n<li><strong>Prism and pupillary distance (PD).<\/strong> Advanced options that not every customer needs, but which must be available, potentially at an additional cost.<\/li>\n<li><strong>Real-time price calculation.<\/strong> Every choice affects the total price. The customer must see what their glasses will cost at any moment, without surprises at checkout. <\/li>\n<li><strong>Manageability.<\/strong> Wink &amp; See wants to independently adjust steps, options, and prices from the Magento admin, without having to involve a developer every time.<\/li>\n<\/ul>\n<p>In the standard Magento product flow, there is simply no provision for this. Custom options do not come close to the required logic, and a third-party configurator for optics was not available at the level Wink &amp; See required. <\/p>\n\n                            \n                        <\/div>\n                    <\/div>\n                \n            <\/div>\n        <\/div>\n                        <\/section>\n<section class=\"container-fluid el-text-image py-lg-4 position-relative bg-accent-2\">\n    <div class=\"container-xl py-5\">\n        <div class=\"row align-items-center pb-4 justify-content-center\">\n            <div class=\"col-lg-8 text-center\" data-aos=\"fade-up\">\n                <h2>Our approach: a step-by-step configurator as a custom Magento 2 module<\/h2>\n<p>Younify developed the lens configurator as a custom Magento 2 module, fully integrated into Wink &amp; See&#8217;s existing webshop. The configurator guides the customer through the entire selection process in clear, manageable steps. <\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n<section class=\"container-fluid el-usp-center bg-accent-2\">\n    <div class=\"container-xl py-5\">\n\n        \n                    <div class=\"row row-gap-4 justify-content-center\">\n                                    <div class=\"col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"100\">\n                        <div class=\"d-flex flex-column row-gap-2 align-items-center text-center\">\n\n                            \n                                                            <h4 class=\"text-uppercase fw-semibold\">Step 1 \u2014 Frame selection<\/h4>\n                            \n                                                            <p>The customer first chooses a frame. This is the starting point of the configuration and determines which lens options are available. The frame is a regular Magento product with images, sizes, and a virtual try-on property, allowing customers to virtually try the frame on their face via Wink &amp; See&#039;s built-in tool.  <\/p>\n                            \n                        <\/div>\n                    <\/div>\n                                    <div class=\"col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"200\">\n                        <div class=\"d-flex flex-column row-gap-2 align-items-center text-center\">\n\n                            \n                                                            <h4 class=\"text-uppercase fw-semibold\">Step 2 \u2014 Selecting lens type<\/h4>\n                            \n                                                            <p>In the second step, the customer chooses the type of lens: single-vision, multifocal, reading, sun, photochromic, or non-prescription. Each option has its own surcharge that is immediately visible. The step is intentionally limited to a clear overview: the customer sees what each option is, what it costs, and who it is suitable for.  <\/p>\n                            \n                        <\/div>\n                    <\/div>\n                                    <div class=\"col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"300\">\n                        <div class=\"d-flex flex-column row-gap-2 align-items-center text-center\">\n\n                            \n                                                            <h4 class=\"text-uppercase fw-semibold\">Step 3 \u2014 Entering prescription<\/h4>\n                            \n                                                            <p>This is where it gets personal. The customer enters the values from their prescription for each eye: sphere (SPH), cylinder (CYL), axis (AXIS), and for multifocal lenses, the addition (ADD). The module validates each entry based on optically sound ranges. Incorrect combinations are immediately flagged with clear messages. Customers can also save their prescription values in their account to make future orders even faster.    <\/p>\n                            \n                        <\/div>\n                    <\/div>\n                                    <div class=\"col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"400\">\n                        <div class=\"d-flex flex-column row-gap-2 align-items-center text-center\">\n\n                            \n                                                            <h4 class=\"text-uppercase fw-semibold\">Step 4 \u2014 Extra options and coatings<\/h4>\n                            \n                                                            <p>The customer can then add extra options: anti-reflective coating, blue light filter, scratch-resistant coating, or an upgrade to thinner lenses. Each option is clearly explained, and the price impact is immediately visible in the running total. <\/p>\n                            \n                        <\/div>\n                    <\/div>\n                                    <div class=\"col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"500\">\n                        <div class=\"d-flex flex-column row-gap-2 align-items-center text-center\">\n\n                            \n                                                            <h4 class=\"text-uppercase fw-semibold\">Step 5 \u2014 Prism and pupillary distance<\/h4>\n                            \n                                                            <p>For customers requiring prism correction or a specific pupillary distance (PD), there is an optional fifth step. This step is only visible when relevant, keeping the process as simple as possible for the majority of customers. <\/p>\n                            \n                        <\/div>\n                    <\/div>\n                                    <div class=\"col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"600\">\n                        <div class=\"d-flex flex-column row-gap-2 align-items-center text-center\">\n\n                            \n                                                            <h4 class=\"text-uppercase fw-semibold\">Real-time price updates<\/h4>\n                            \n                                                            <p>Throughout the entire configuration process, the customer sees a live price overview. Every choice \u2014 lens type, coating, prescription option \u2014 is immediately calculated. No hidden costs, no surprises at checkout. Transparency is a core value of Wink &amp; See, and the configurator reflects that.   <\/p>\n                            \n                        <\/div>\n                    <\/div>\n                            <\/div>\n        \n    <\/div>\n<\/section>\n\n<div style=\"height:33px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<section class=\"container-fluid el-text-columns \">\n    <div class=\"container-lg py-5\">\n                    \n                <div class=\"row justify-content-lg-start align-items-start text-start\">\n\n                                            <div class=\"col-lg-12 h4-uppercase h4-semibold\">\n                                                        <h2 class=\"wp-block-heading\">Technical highlights<\/h2>\n<p><!-- \/wp:heading --><!-- wp:heading {\"level\":3} --><\/p>\n<h3 class=\"wp-block-heading\">Fully admin-manageable<\/h3>\n<p><!-- \/wp:heading --><!-- wp:paragraph -->One of the most important requirements was that the Wink &amp; See team could make changes independently. All step options, prices, descriptions, and available combinations are configurable from the Magento admin. Adding new lens types, temporarily disabling a coating, or adjusting the price of the blue light filter? The team can do it themselves without developer intervention.   <\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:heading {\"level\":3} --><\/p>\n<h3 class=\"wp-block-heading\">Prescription storage in customer account<\/h3>\n<p><!-- \/wp:heading --><!-- wp:paragraph -->Customers who enter their prescription can save these details in their Wink &amp; See account. For a subsequent order, such as prescription sunglasses or a spare pair, the prescription values are automatically loaded. This significantly lowers the barrier and shortens the order flow.  <\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:heading {\"level\":3} --><\/p>\n<h3 class=\"wp-block-heading\">Built on Hyv\u00e4<\/h3>\n<p><!-- \/wp:heading --><!-- wp:paragraph -->The Wink &amp; See webshop runs on the Hyv\u00e4 theme, known for its performance and lightweight frontend. The configurator is seamlessly integrated into the Hyv\u00e4 frontend, using Alpine.js for interactive elements. The result: a fast, smooth configuration experience without the heavy JavaScript overhead associated with Luma or PWA Studio.  <\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:heading {\"level\":3} --><\/p>\n<h3 class=\"wp-block-heading\">Validation and error handling<\/h3>\n<p><!-- \/wp:heading --><!-- wp:paragraph -->Optical values are not arbitrary. SPH values typically range from \u221220.00 to +20.00 in steps of 0.25, CYL from \u22126.00 to 0.00, and AXIS from 0 to 180. The module validates every entry in real-time and prevents customers from ordering impossible combinations. If no CYL is entered, AXIS is automatically disabled, exactly as an optician would handle it.   <\/p>\n                                                                                                                                        <\/div>\n                                    <\/div>\n                            <\/div>\n<\/section>\n\n    <section class=\"container-fluid el-text-image position-relative bg-accent-2\">\n        <div class=\"container-xl py-5\">\n            <div class=\"row align-items-center pb-4\">\n\n                                    <div class=\"col-lg-6 ps-lg-4 position-relative order-lg-2 order-1\" data-aos=\"fade-up\">\n                        <div class=\"masked-image-wrapper\">\n                            <div class=\"masked-image mask-1\" style=\"background: #f8f4f8;\">\n                                <div class=\"masked-image mask-1\" style=\"transform: scale(0.98);\">\n                                    <img decoding=\"async\" src=\"https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Screenshot-2026-03-27-at-11.32.24-AM-1024x672.png\" alt=\"\">\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                \n                                    <div class=\"col-lg-6 order-lg-1 order-2 py-lg-0 pb-4 pt-4 pe-lg-5\" data-aos=\"fade-up\" data-aos-delay=\"200\">\n                        <div class=\"h4-uppercase ul-done\">\n                            <h2 class=\"text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold\">The result<\/h2>\n<ul class=\"[li_&amp;]:mb-0 [li_&amp;]:mt-1 [li_&amp;]:gap-1 [&amp;:not(:last-child)_ul]:pb-1 [&amp;:not(:last-child)_ol]:pb-1 list-disc flex flex-col gap-1 pl-8 mb-3\">\n<li class=\"whitespace-normal break-words pl-2\"><strong>Independent ordering.<\/strong> Customers configure and order their prescription glasses entirely independently, 24\/7, without assistance from an optician or customer service.<\/li>\n<li class=\"whitespace-normal break-words pl-2\"><strong>Lower barrier.<\/strong> The step-by-step approach makes a complex product accessible. Customers who were previously hesitant to buy prescription glasses online are now guided by a clear, structured process. <\/li>\n<li class=\"whitespace-normal break-words pl-2\"><strong>Fewer customer service inquiries.<\/strong> Because the configurator validates in advance and provides clear information, there are fewer questions regarding lens types, pricing, and prescription entry.<\/li>\n<li class=\"whitespace-normal break-words pl-2\"><strong>Higher conversion.<\/strong> The transparent price structure and smooth flow contribute to a higher conversion rate on product pages.<\/li>\n<li class=\"whitespace-normal break-words pl-2\"><strong>Full admin independence.<\/strong> The Wink &amp; See team independently adjusts options, prices, and availability. This makes them agile and independent of development time for daily changes. <\/li>\n<\/ul>\n\n                                                            <div class=\"d-grid gap-3 gap-lg-4 d-lg-flex justify-content-lg-start mt-4\">\n                                                                            <a class=\"btn\"\n                                            href=\"https:\/\/www.winkandsee.com\/nl\/\"\n                                            target=\"\">\n                                            Try it yourself                                        <\/a>\n                                                                                                        <\/div>\n                            \n                        <\/div>\n                    <\/div>\n                \n            <\/div>\n        <\/div>\n                    <svg width=\"1512\" height=\"28\" viewBox=\"0 0 1512 28\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"fig-bottom host-svg\">\n            <path d=\"M792.124 0C360.124 0 62.6667 20.9999 -22 27.9999H1533C1473.33 21.6666 1224.12 0 792.124 0Z\" fill=\"#F8F4F8\" \/>\n        <\/svg>\n                            <\/section>\n\n<div style=\"height:34px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<figure class=\"wp-block-gallery has-nested-images columns-2 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"506\" data-id=\"1227\" src=\"https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.40.24-1024x506.png\" alt=\"\" class=\"wp-image-1227\" srcset=\"https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.40.24-1024x506.png 1024w, https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.40.24-300x148.png 300w, https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.40.24-768x379.png 768w, https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.40.24-1536x759.png 1536w, https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.40.24.png 1773w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"506\" data-id=\"1226\" src=\"https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.41.03-1024x506.png\" alt=\"\" class=\"wp-image-1226\" srcset=\"https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.41.03-1024x506.png 1024w, https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.41.03-300x148.png 300w, https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.41.03-768x380.png 768w, https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.41.03-1536x759.png 1536w, https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.41.03.png 1774w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"509\" data-id=\"1225\" src=\"https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.39.13-1024x509.png\" alt=\"\" class=\"wp-image-1225\" srcset=\"https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.39.13-1024x509.png 1024w, https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.39.13-300x149.png 300w, https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.39.13-768x382.png 768w, https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.39.13-1536x763.png 1536w, https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.39.13.png 1771w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"510\" data-id=\"1224\" src=\"https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.41.26-1024x510.png\" alt=\"\" class=\"wp-image-1224\" srcset=\"https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.41.26-1024x510.png 1024w, https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.41.26-300x149.png 300w, https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.41.26-768x382.png 768w, https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.41.26-1536x765.png 1536w, https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.41.26.png 1776w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n<\/div><\/div>\n\n<section class=\"container-fluid el-text-columns \">\n    <div class=\"container-lg py-5\">\n                    \n                <div class=\"row justify-content-lg-start align-items-start text-start\">\n\n                                            <div class=\"col-lg-12 h4-uppercase h4-semibold\">\n                                                        <h2 class=\"wp-block-heading\">Conclusion<\/h2>\n<p><!-- \/wp:heading --><!-- wp:paragraph {\"fontSize\":\"medium\"} --><\/p>\n<p class=\"has-medium-font-size\">Building a lens configurator in Magento 2 is not a matter of simply installing an extension. It requires a deep understanding of both the e-commerce platform and the product domain\u2014in this case, optics. By developing the lens configurator as a custom module, fully manageable from the admin and seamlessly integrated into the Hyv\u00e4 frontend, Younify has delivered a solution for Wink &amp; See that puts the customer first.  <\/p>\n<p><!-- \/wp:paragraph --><!-- wp:paragraph {\"fontSize\":\"medium\"} --><\/p>\n<p class=\"has-medium-font-size\">The result is a webshop where customers can confidently configure their prescription glasses as if they were at the optician, but from the comfort of their own living room.<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:paragraph {\"fontSize\":\"medium\"} --><\/p>\n<p class=\"has-medium-font-size\"><strong>Ready to realize this for your webshop too?<\/strong><br \/>\nPartner with our Magento specialists and discover what is possible.<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:paragraph {\"fontSize\":\"medium\"} --><\/p>\n<p class=\"has-medium-font-size\"><strong><a href=\"http:\/\/younify.nl\/contact\">Schedule a meeting<\/a><\/strong><\/p>\n                                                                                                                                        <\/div>\n                                    <\/div>\n                            <\/div>\n<\/section>\n\n","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":false},"class_list":["post-1864","solution","type-solution","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Building a custom lens configurator in Magento 2<\/title>\n<meta name=\"description\" content=\"Younify built a custom lens configurator for Wink&amp;See featuring real-time price calculation, prescription validation, and management from the Magento Admin.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/staging.younify.fidev.nl\/en\/solution\/how-we-built-a-custom-lens-configurator-in-magento-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a custom lens configurator in Magento 2\" \/>\n<meta property=\"og:description\" content=\"Younify built a custom lens configurator for Wink&amp;See featuring real-time price calculation, prescription validation, and management from the Magento Admin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/staging.younify.fidev.nl\/en\/solution\/how-we-built-a-custom-lens-configurator-in-magento-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Magento Specialists\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/younify\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-30T11:40:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.40.24-1024x506.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@younify\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/en\\\/solution\\\/how-we-built-a-custom-lens-configurator-in-magento-2\\\/\",\"url\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/en\\\/solution\\\/how-we-built-a-custom-lens-configurator-in-magento-2\\\/\",\"name\":\"Building a custom lens configurator in Magento 2\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/en\\\/solution\\\/how-we-built-a-custom-lens-configurator-in-magento-2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/en\\\/solution\\\/how-we-built-a-custom-lens-configurator-in-magento-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/Scherm_afbeelding-2026-03-27-om-12.40.24-1024x506.png\",\"datePublished\":\"2026-03-31T07:12:28+00:00\",\"dateModified\":\"2026-04-30T11:40:01+00:00\",\"description\":\"Younify built a custom lens configurator for Wink&See featuring real-time price calculation, prescription validation, and management from the Magento Admin.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/en\\\/solution\\\/how-we-built-a-custom-lens-configurator-in-magento-2\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/staging.younify.fidev.nl\\\/en\\\/solution\\\/how-we-built-a-custom-lens-configurator-in-magento-2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/en\\\/solution\\\/how-we-built-a-custom-lens-configurator-in-magento-2\\\/#primaryimage\",\"url\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/Scherm_afbeelding-2026-03-27-om-12.40.24-1024x506.png\",\"contentUrl\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/Scherm_afbeelding-2026-03-27-om-12.40.24-1024x506.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/en\\\/solution\\\/how-we-built-a-custom-lens-configurator-in-magento-2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How we built a custom lens configurator in Magento 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/en\\\/\",\"name\":\"Wat valt onder webshop management?\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/en\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/en\\\/#organization\",\"name\":\"Wat valt onder webshop management?\",\"url\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/en\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/Younify-2019_Secondary-logo-1-1.svg\",\"contentUrl\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/Younify-2019_Secondary-logo-1-1.svg\",\"width\":150,\"height\":49,\"caption\":\"Wat valt onder webshop management?\"},\"image\":{\"@id\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/younify\\\/\",\"https:\\\/\\\/x.com\\\/younify\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/younify-doo\\\/\",\"https:\\\/\\\/www.youtube.com\\\/@YounifyDev\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Building a custom lens configurator in Magento 2","description":"Younify built a custom lens configurator for Wink&See featuring real-time price calculation, prescription validation, and management from the Magento Admin.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/staging.younify.fidev.nl\/en\/solution\/how-we-built-a-custom-lens-configurator-in-magento-2\/","og_locale":"en_US","og_type":"article","og_title":"Building a custom lens configurator in Magento 2","og_description":"Younify built a custom lens configurator for Wink&See featuring real-time price calculation, prescription validation, and management from the Magento Admin.","og_url":"https:\/\/staging.younify.fidev.nl\/en\/solution\/how-we-built-a-custom-lens-configurator-in-magento-2\/","og_site_name":"Magento Specialists","article_publisher":"https:\/\/www.facebook.com\/younify\/","article_modified_time":"2026-04-30T11:40:01+00:00","og_image":[{"url":"https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.40.24-1024x506.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@younify","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/staging.younify.fidev.nl\/en\/solution\/how-we-built-a-custom-lens-configurator-in-magento-2\/","url":"https:\/\/staging.younify.fidev.nl\/en\/solution\/how-we-built-a-custom-lens-configurator-in-magento-2\/","name":"Building a custom lens configurator in Magento 2","isPartOf":{"@id":"https:\/\/staging.younify.fidev.nl\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/staging.younify.fidev.nl\/en\/solution\/how-we-built-a-custom-lens-configurator-in-magento-2\/#primaryimage"},"image":{"@id":"https:\/\/staging.younify.fidev.nl\/en\/solution\/how-we-built-a-custom-lens-configurator-in-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.40.24-1024x506.png","datePublished":"2026-03-31T07:12:28+00:00","dateModified":"2026-04-30T11:40:01+00:00","description":"Younify built a custom lens configurator for Wink&See featuring real-time price calculation, prescription validation, and management from the Magento Admin.","breadcrumb":{"@id":"https:\/\/staging.younify.fidev.nl\/en\/solution\/how-we-built-a-custom-lens-configurator-in-magento-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/staging.younify.fidev.nl\/en\/solution\/how-we-built-a-custom-lens-configurator-in-magento-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/staging.younify.fidev.nl\/en\/solution\/how-we-built-a-custom-lens-configurator-in-magento-2\/#primaryimage","url":"https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.40.24-1024x506.png","contentUrl":"https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/03\/Scherm_afbeelding-2026-03-27-om-12.40.24-1024x506.png"},{"@type":"BreadcrumbList","@id":"https:\/\/staging.younify.fidev.nl\/en\/solution\/how-we-built-a-custom-lens-configurator-in-magento-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/staging.younify.fidev.nl\/en\/"},{"@type":"ListItem","position":2,"name":"How we built a custom lens configurator in Magento 2"}]},{"@type":"WebSite","@id":"https:\/\/staging.younify.fidev.nl\/en\/#website","url":"https:\/\/staging.younify.fidev.nl\/en\/","name":"Wat valt onder webshop management?","description":"","publisher":{"@id":"https:\/\/staging.younify.fidev.nl\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/staging.younify.fidev.nl\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/staging.younify.fidev.nl\/en\/#organization","name":"Wat valt onder webshop management?","url":"https:\/\/staging.younify.fidev.nl\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/staging.younify.fidev.nl\/en\/#\/schema\/logo\/image\/","url":"https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/04\/Younify-2019_Secondary-logo-1-1.svg","contentUrl":"https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/04\/Younify-2019_Secondary-logo-1-1.svg","width":150,"height":49,"caption":"Wat valt onder webshop management?"},"image":{"@id":"https:\/\/staging.younify.fidev.nl\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/younify\/","https:\/\/x.com\/younify","https:\/\/www.linkedin.com\/company\/younify-doo\/","https:\/\/www.youtube.com\/@YounifyDev"]}]}},"_links":{"self":[{"href":"https:\/\/staging.younify.fidev.nl\/en\/wp-json\/wp\/v2\/solution\/1864","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.younify.fidev.nl\/en\/wp-json\/wp\/v2\/solution"}],"about":[{"href":"https:\/\/staging.younify.fidev.nl\/en\/wp-json\/wp\/v2\/types\/solution"}],"wp:attachment":[{"href":"https:\/\/staging.younify.fidev.nl\/en\/wp-json\/wp\/v2\/media?parent=1864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}