{"id":1935,"date":"2026-04-07T09:52:30","date_gmt":"2026-04-07T09:52:30","guid":{"rendered":"https:\/\/staging.younify.fidev.nl\/solution\/custom-media-gallery-and-product-video-rich-product-presentation-on-hyva-for-maxifleur\/"},"modified":"2026-04-30T11:41:11","modified_gmt":"2026-04-30T11:41:11","slug":"custom-media-gallery-and-product-video-rich-product-presentation-on-hyva-for-maxifleur","status":"publish","type":"solution","link":"https:\/\/staging.younify.fidev.nl\/en\/solution\/custom-media-gallery-and-product-video-rich-product-presentation-on-hyva-for-maxifleur\/","title":{"rendered":"Custom media gallery and product video: rich product presentation on Hyv\u00e4 for Maxifleur"},"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                                                        <h2>The problem<\/h2>\n<p>Artificial plants are pre-eminently a product where visual presentation determines the purchase. Customers want to see the scale, assess the texture, and understand how a plant looks in an interior. The standard Magento 2 product gallery offered insufficient possibilities for this: no support for 360\u00b0 photos, no product video integration, and a mobile experience that did not align with Maxifleur&#8217;s premium positioning.  <\/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>What we did<\/h2>\n                <\/div>\n            \n                            <div class=\"col-lg-8 ps-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"200\">\n                    <p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">Younify built a fully custom media gallery component in Hyv\u00e4, constructed with Alpine.js and Tailwind CSS. The gallery is fully accessible (WCAG 2.1 AA), supports swipe navigation on mobile and keyboard navigation on desktop, and processes multiple media types seamlessly: standard product photos, 360\u00b0 spins, and embedded videos via YouTube or Vimeo. <\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">Product videos are lazy-loaded so as not to delay the initial page load. A thumbnail overlay with a play button ensures a fast first render; the video is only loaded when the customer actively clicks play. This pattern is carefully aligned with the Core Web Vitals requirements for LCP and CLS. On the admin side, content managers can upload, sort, and assign media to specific products or store views via an intuitive drag-and-drop interface in Magento Admin, each provided with alt text and title attributes for SEO.   <\/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-3\" style=\"background: #f8f4f8;\">\n                                <div class=\"masked-image mask-3\" style=\"transform: scale(0.98);\">\n                                    <img decoding=\"async\" src=\"https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-15-at-1.52.08-PM-1024x735.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                            <h2>The result<\/h2>\n<p>After the launch of the new media gallery, the average session duration on product pages increased demonstrably. Video views correlated positively with the add-to-cart rate: customers who viewed a product video converted significantly more often than customers who only saw photos. The richer media presentation simultaneously strengthened Maxifleur&#8217;s brand position as a premium artificial plant supplier.  <\/p>\n\n                            \n                        <\/div>\n                    <\/div>\n                \n            <\/div>\n        <\/div>\n                        <\/section>\n<section class=\"container-fluid bg-accent-1 py-5 position-relative\">\n    <div class=\"container-xl py-4\">\n        <div class=\"row justify-content-center pb-lg-3\" data-aos=\"fade-up\" data-aos-delay=\"100\">\n            <div class=\"col-lg-6 d-flex flex-column justify-content-center align-items-center text-center\">\n                                    <h3>Would you like a custom media gallery for your webshop?<\/h3>\n                \n                                    <div class=\"d-grid gap-3 gap-lg-3 d-lg-flex justify-content-lg-center mt-4 w-100\">\n\n                                                    <a class=\"btn\"\n                               href=\"https:\/\/www.younify.nl\/contact\/\"\n                               target=\"\">\n                                Contact us                            <\/a>\n                        \n                        \n                    <\/div>\n                            <\/div>\n        <\/div>\n    <\/div>\n\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=\"#000938\"><\/path>\n        <\/svg>\n<\/section>\n\n<p><\/p>\n","protected":false},"featured_media":1936,"template":"","meta":{"_acf_changed":false},"class_list":["post-1935","solution","type-solution","status-publish","has-post-thumbnail","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Custom media gallery with video in Magento Hyv\u00e4<\/title>\n<meta name=\"description\" content=\"Younify built a custom media gallery with video support, lazy loading, and drag-and-drop management, optimized for Core Web Vitals\" \/>\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\/custom-media-gallery-and-product-video-rich-product-presentation-on-hyva-for-maxifleur\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Custom media gallery with video in Magento Hyv\u00e4\" \/>\n<meta property=\"og:description\" content=\"Younify built a custom media gallery with video support, lazy loading, and drag-and-drop management, optimized for Core Web Vitals\" \/>\n<meta property=\"og:url\" content=\"https:\/\/staging.younify.fidev.nl\/en\/solution\/custom-media-gallery-and-product-video-rich-product-presentation-on-hyva-for-maxifleur\/\" \/>\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:41:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/04\/Example-09-Maxifleur-Media-Gallery-and-Product-Video.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1080\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\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\\\/custom-media-gallery-and-product-video-rich-product-presentation-on-hyva-for-maxifleur\\\/\",\"url\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/en\\\/solution\\\/custom-media-gallery-and-product-video-rich-product-presentation-on-hyva-for-maxifleur\\\/\",\"name\":\"Custom media gallery with video in Magento Hyv\u00e4\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/en\\\/solution\\\/custom-media-gallery-and-product-video-rich-product-presentation-on-hyva-for-maxifleur\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/en\\\/solution\\\/custom-media-gallery-and-product-video-rich-product-presentation-on-hyva-for-maxifleur\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/Example-09-Maxifleur-Media-Gallery-and-Product-Video.webp\",\"datePublished\":\"2026-04-07T09:52:30+00:00\",\"dateModified\":\"2026-04-30T11:41:11+00:00\",\"description\":\"Younify built a custom media gallery with video support, lazy loading, and drag-and-drop management, optimized for Core Web Vitals\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/en\\\/solution\\\/custom-media-gallery-and-product-video-rich-product-presentation-on-hyva-for-maxifleur\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/staging.younify.fidev.nl\\\/en\\\/solution\\\/custom-media-gallery-and-product-video-rich-product-presentation-on-hyva-for-maxifleur\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/en\\\/solution\\\/custom-media-gallery-and-product-video-rich-product-presentation-on-hyva-for-maxifleur\\\/#primaryimage\",\"url\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/Example-09-Maxifleur-Media-Gallery-and-Product-Video.webp\",\"contentUrl\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/Example-09-Maxifleur-Media-Gallery-and-Product-Video.webp\",\"width\":1080,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/en\\\/solution\\\/custom-media-gallery-and-product-video-rich-product-presentation-on-hyva-for-maxifleur\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/staging.younify.fidev.nl\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Custom media gallery and product video: rich product presentation on Hyv\u00e4 for Maxifleur\"}]},{\"@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":"Custom media gallery with video in Magento Hyv\u00e4","description":"Younify built a custom media gallery with video support, lazy loading, and drag-and-drop management, optimized for Core Web Vitals","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\/custom-media-gallery-and-product-video-rich-product-presentation-on-hyva-for-maxifleur\/","og_locale":"en_US","og_type":"article","og_title":"Custom media gallery with video in Magento Hyv\u00e4","og_description":"Younify built a custom media gallery with video support, lazy loading, and drag-and-drop management, optimized for Core Web Vitals","og_url":"https:\/\/staging.younify.fidev.nl\/en\/solution\/custom-media-gallery-and-product-video-rich-product-presentation-on-hyva-for-maxifleur\/","og_site_name":"Magento Specialists","article_publisher":"https:\/\/www.facebook.com\/younify\/","article_modified_time":"2026-04-30T11:41:11+00:00","og_image":[{"width":1080,"height":1080,"url":"https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/04\/Example-09-Maxifleur-Media-Gallery-and-Product-Video.webp","type":"image\/webp"}],"twitter_card":"summary_large_image","twitter_site":"@younify","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/staging.younify.fidev.nl\/en\/solution\/custom-media-gallery-and-product-video-rich-product-presentation-on-hyva-for-maxifleur\/","url":"https:\/\/staging.younify.fidev.nl\/en\/solution\/custom-media-gallery-and-product-video-rich-product-presentation-on-hyva-for-maxifleur\/","name":"Custom media gallery with video in Magento Hyv\u00e4","isPartOf":{"@id":"https:\/\/staging.younify.fidev.nl\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/staging.younify.fidev.nl\/en\/solution\/custom-media-gallery-and-product-video-rich-product-presentation-on-hyva-for-maxifleur\/#primaryimage"},"image":{"@id":"https:\/\/staging.younify.fidev.nl\/en\/solution\/custom-media-gallery-and-product-video-rich-product-presentation-on-hyva-for-maxifleur\/#primaryimage"},"thumbnailUrl":"https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/04\/Example-09-Maxifleur-Media-Gallery-and-Product-Video.webp","datePublished":"2026-04-07T09:52:30+00:00","dateModified":"2026-04-30T11:41:11+00:00","description":"Younify built a custom media gallery with video support, lazy loading, and drag-and-drop management, optimized for Core Web Vitals","breadcrumb":{"@id":"https:\/\/staging.younify.fidev.nl\/en\/solution\/custom-media-gallery-and-product-video-rich-product-presentation-on-hyva-for-maxifleur\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/staging.younify.fidev.nl\/en\/solution\/custom-media-gallery-and-product-video-rich-product-presentation-on-hyva-for-maxifleur\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/staging.younify.fidev.nl\/en\/solution\/custom-media-gallery-and-product-video-rich-product-presentation-on-hyva-for-maxifleur\/#primaryimage","url":"https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/04\/Example-09-Maxifleur-Media-Gallery-and-Product-Video.webp","contentUrl":"https:\/\/staging.younify.fidev.nl\/wp-content\/uploads\/2026\/04\/Example-09-Maxifleur-Media-Gallery-and-Product-Video.webp","width":1080,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/staging.younify.fidev.nl\/en\/solution\/custom-media-gallery-and-product-video-rich-product-presentation-on-hyva-for-maxifleur\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/staging.younify.fidev.nl\/en\/"},{"@type":"ListItem","position":2,"name":"Custom media gallery and product video: rich product presentation on Hyv\u00e4 for Maxifleur"}]},{"@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\/1935","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:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging.younify.fidev.nl\/en\/wp-json\/wp\/v2\/media\/1936"}],"wp:attachment":[{"href":"https:\/\/staging.younify.fidev.nl\/en\/wp-json\/wp\/v2\/media?parent=1935"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}