{"id":12007,"date":"2026-09-26T10:38:41","date_gmt":"2026-09-26T10:38:41","guid":{"rendered":"https:\/\/vylino.com\/?page_id=12007"},"modified":"2026-09-26T16:00:59","modified_gmt":"2026-09-26T16:00:59","slug":"mode-studio","status":"publish","type":"page","link":"https:\/\/vylino.com\/de\/website-samples\/ecommerce\/mode-studio\/","title":{"rendered":"Mode Studio"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"12007\" class=\"elementor elementor-12007\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b159c55 elementor-widget elementor-widget-html\" data-id=\"b159c55\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n#mode{--ink:#422335;--pink:#f3e3eb;--paper:#fffafb;--line:#d8c3ce;--berry:#783752;background:var(--paper);color:var(--ink);font:16px\/1.6 Arial,sans-serif;scrollbar-color:var(--berry) var(--pink)}\n#mode *{box-sizing:border-box}#mode [hidden]{display:none!important}#mode h1,#mode h2,#mode h3{color:var(--ink);margin:0;line-height:1.02}#mode h1{font:900 clamp(60px,10vw,148px)\/.84 Arial,sans-serif;letter-spacing:-.08em;text-transform:uppercase}#mode h2{font-size:clamp(34px,5vw,62px);letter-spacing:-.05em}#mode h3{font-size:23px;line-height:1.2}#mode a{color:inherit}#mode img{width:100%;object-fit:cover;display:block}#mode button,#mode summary{cursor:pointer}#mode :is(a,button,summary,input):focus-visible{outline:3px solid #95471a;outline-offset:5px}#mode button,#mode a{transition:background .2s,color .2s}#mode button:active{transform:translateY(1px)}.md-wrap{width:min(1300px,calc(100% - 48px));margin:auto}.md-bar{background:var(--ink);color:white;padding:10px 24px;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;font-size:12px}.md-nav{display:flex;justify-content:space-between;gap:25px;align-items:center;padding:25px 0}.md-logo{font:italic 700 34px Georgia,serif;text-decoration:none;letter-spacing:-2px}.md-nav nav{display:flex;gap:25px;font-size:14px}.md-nav a:hover{text-decoration:underline}.md-hero{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--pink);min-height:680px;overflow:hidden}.md-hero-copy{padding:65px clamp(24px,5vw,80px);position:relative;z-index:1}.md-hero-copy p{max-width:350px;margin:30px 0}.md-hero figure{margin:0;position:relative}.md-hero img{height:720px;object-position:center 30%}.md-hero figcaption{position:absolute;bottom:20px;left:20px;background:var(--paper);padding:10px 15px;font-size:12px}.md-eye{font:12px\/1.4 monospace;letter-spacing:2px;text-transform:uppercase}.md-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;background:var(--ink);color:white!important;text-decoration:none;border:1px solid var(--ink);font:14px Arial,sans-serif}.md-btn:hover{background:var(--berry)}.md-section{padding:75px 0;scroll-margin-top:20px}.md-heading{display:flex;justify-content:space-between;align-items:end;gap:25px}.md-filters{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 12px}.md-filter{font:14px Arial,sans-serif;min-height:44px;padding:10px 20px;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:24px}.md-filter[aria-pressed=true]{background:var(--ink);color:white}.md-filter:hover{border-color:var(--ink)}.md-count{font-size:13px;min-height:24px}.md-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.md-product img{height:450px}.md-product h3{margin:20px 0 8px!important}.md-product p{font-size:14px}.md-product details{border-top:1px solid var(--line);padding-top:12px}.md-product summary{padding:10px 0;min-height:44px}.md-product fieldset{border:0;padding:0;margin:15px 0}.md-product legend{font-weight:bold;font-size:13px;margin-bottom:10px}.md-size{display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:8px;border:1px solid var(--line);margin-right:4px}.md-product small{display:block;font-size:12px;margin:12px 0}.md-story{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;background:var(--pink);padding:60px}.md-story img{height:470px}.md-story p{max-width:430px}.md-bag{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:40px 0}.md-bag ul{padding:0;list-style:none}.md-bag li{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px 0;border-bottom:1px solid var(--line)}.md-remove{min-height:44px;padding:8px 14px;background:transparent;border:1px solid var(--ink);color:var(--ink)}.md-remove:hover{background:var(--pink)}.md-status{min-height:26px;font-size:14px}.md-footer{background:var(--ink);color:white;padding:50px 0}.md-footer h2{color:white!important}.md-footer .md-btn{background:var(--pink);color:var(--ink)!important;margin:20px 0}.md-footer small{display:block;margin-top:20px;max-width:900px}.md-menu{display:none}\n@media(max-width:760px){.md-wrap{width:calc(100% - 32px)}.md-hero{grid-template-columns:1fr;min-height:0}.md-hero-copy{padding:40px 24px}.md-hero img{height:470px}.md-grid{grid-template-columns:1fr}.md-product img{height:480px}.md-nav nav{display:none}.md-menu{display:block}.md-menu summary{padding:12px}.md-menu a{display:block;padding:10px}.md-heading{display:block}.md-story{grid-template-columns:1fr;padding:28px;gap:30px}.md-story img{height:350px}.md-section{padding:50px 0}.md-bar{padding:10px 16px}#mode h1{font-size:82px}}\n@media(prefers-reduced-motion:reduce){#mode *{transition:none!important;scroll-behavior:auto!important}}\n<\/style>\n<div id=\"mode\"><div class=\"md-bar\"><span>VYLINO \/ EC-02 \u00b7 Fashion concept \u00b7 No real purchases<\/span><a href=\"\/website-samples\/ecommerce\/\">Back to samples<\/a><a href=\"https:\/\/wa.me\/919098193452?text=Hello%20Vylino%2C%20I%20like%20sample%20EC-02%20(Mode%20Studio).%20Please%20discuss%20a%20fashion%20ecommerce%20website%20for%20my%20business.\" target=\"_blank\" rel=\"noopener\">Get this website style \u2197<\/a><\/div>\n<header class=\"md-wrap md-nav\"><a class=\"md-logo\" href=\"#mode\">mode studio.<\/a><nav aria-label=\"Main navigation\"><a href=\"#md-edit\">The edit<\/a><a href=\"#md-story\">Style notes<\/a><a href=\"#md-bag\">Demo bag <span class=\"md-bag-count\">(0)<\/span><\/a><\/nav><details class=\"md-menu\"><summary>Menu<\/summary><a href=\"#md-edit\">The edit<\/a><a href=\"#md-story\">Style notes<\/a><a href=\"#md-bag\">Demo bag<\/a><\/details><\/header>\n<main><section class=\"md-hero\"><div class=\"md-hero-copy\"><p class=\"md-eye\">The everyday, reimagined<\/p><h1>Wear<br>your<br><span style=\"font-family:Georgia,serif;font-weight:400;font-style:italic;text-transform:none\">own<\/span><br>mood.<\/h1><p>Expressive layers. Easy combinations. An edit for wherever your day takes you.<\/p><a href=\"#md-edit\" class=\"md-btn\">Explore the edit \u2197<\/a><\/div><figure><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/vylino.com\/wp-content\/uploads\/2026\/09\/vylino-ec02-fashion-1.jpg\" width=\"1000\" height=\"1408\" fetchpriority=\"high\" alt=\"Street-style fashion inspiration\"><figcaption>Style inspiration \/ Mode Studio concept<\/figcaption><\/figure><\/section>\n<section class=\"md-wrap md-section\" id=\"md-edit\"><div class=\"md-heading\"><div><p class=\"md-eye\">Find your next combination<\/p><h2>A wardrobe.<br>More possibilities.<\/h2><\/div><p>Three looks. One independent point of view.<\/p><\/div><div class=\"md-filters\" role=\"group\" aria-label=\"Filter looks\"><button class=\"md-filter\" data-filter=\"all\" aria-pressed=\"true\" type=\"button\">All looks<\/button><button class=\"md-filter\" data-filter=\"layers\" aria-pressed=\"false\" type=\"button\">Everyday layers<\/button><button class=\"md-filter\" data-filter=\"outerwear\" aria-pressed=\"false\" type=\"button\">Outerwear<\/button><\/div><p class=\"md-count\" id=\"md-count\" aria-live=\"polite\">3 looks<\/p><div class=\"md-grid\">\n<article class=\"md-product\" data-category=\"layers\" data-name=\"City layers\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/vylino.com\/wp-content\/uploads\/2026\/09\/vylino-ec02-fashion-1.jpg\" width=\"1000\" height=\"1400\" loading=\"lazy\" alt=\"City layers styling inspiration\"><h3>City layers<\/h3><p>An easy silhouette for days on the move.<\/p><details><summary>Choose size &amp; explore<\/summary><p>Try the product-selection experience. Images show styling inspiration; garments and sizes are illustrative.<\/p><fieldset><legend>Select a demo size<\/legend><label class=\"md-size\"><input type=\"radio\" name=\"size-0\" value=\"S\" > S<\/label><label class=\"md-size\"><input type=\"radio\" name=\"size-0\" value=\"M\" checked> M<\/label><label class=\"md-size\"><input type=\"radio\" name=\"size-0\" value=\"L\" > L<\/label><\/fieldset><button class=\"md-btn md-add\" type=\"button\">Add to demo bag<\/button><small>No charge. No order. Your demo bag clears on reload.<\/small><details><summary>Illustrative size guide<\/summary><p>Body chest: S 86\u201390 cm \u00b7 M 91\u201395 cm \u00b7 L 96\u2013100 cm. Example sizing only; a real store would provide garment-specific measurements.<\/p><\/details><\/details><\/article><article class=\"md-product\" data-category=\"outerwear\" data-name=\"Winter edit\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/vylino.com\/wp-content\/uploads\/2026\/09\/vylino-ec02-fashion-2.jpg\" width=\"1000\" height=\"1400\" loading=\"lazy\" alt=\"Winter edit styling inspiration\"><h3>Winter edit<\/h3><p>Soft tonal layers with a confident finish.<\/p><details><summary>Choose size &amp; explore<\/summary><p>Try the product-selection experience. Images show styling inspiration; garments and sizes are illustrative.<\/p><fieldset><legend>Select a demo size<\/legend><label class=\"md-size\"><input type=\"radio\" name=\"size-1\" value=\"S\" > S<\/label><label class=\"md-size\"><input type=\"radio\" name=\"size-1\" value=\"M\" checked> M<\/label><label class=\"md-size\"><input type=\"radio\" name=\"size-1\" value=\"L\" > L<\/label><\/fieldset><button class=\"md-btn md-add\" type=\"button\">Add to demo bag<\/button><small>No charge. No order. Your demo bag clears on reload.<\/small><details><summary>Illustrative size guide<\/summary><p>Body chest: S 86\u201390 cm \u00b7 M 91\u201395 cm \u00b7 L 96\u2013100 cm. Example sizing only; a real store would provide garment-specific measurements.<\/p><\/details><\/details><\/article><article class=\"md-product\" data-category=\"layers\" data-name=\"Off-duty set\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/vylino.com\/wp-content\/uploads\/2026\/09\/vylino-ec02-fashion-3.jpg\" width=\"1000\" height=\"1400\" loading=\"lazy\" alt=\"Off-duty set styling inspiration\"><h3>Off-duty set<\/h3><p>Simple separates. Your own combination.<\/p><details><summary>Choose size &amp; explore<\/summary><p>Try the product-selection experience. Images show styling inspiration; garments and sizes are illustrative.<\/p><fieldset><legend>Select a demo size<\/legend><label class=\"md-size\"><input type=\"radio\" name=\"size-2\" value=\"S\" > S<\/label><label class=\"md-size\"><input type=\"radio\" name=\"size-2\" value=\"M\" checked> M<\/label><label class=\"md-size\"><input type=\"radio\" name=\"size-2\" value=\"L\" > L<\/label><\/fieldset><button class=\"md-btn md-add\" type=\"button\">Add to demo bag<\/button><small>No charge. No order. Your demo bag clears on reload.<\/small><details><summary>Illustrative size guide<\/summary><p>Body chest: S 86\u201390 cm \u00b7 M 91\u201395 cm \u00b7 L 96\u2013100 cm. Example sizing only; a real store would provide garment-specific measurements.<\/p><\/details><\/details><\/article>\n<\/div><p class=\"md-status\" id=\"md-status\" role=\"status\"><\/p><\/section>\n<section id=\"md-story\" class=\"md-wrap md-story\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/vylino.com\/wp-content\/uploads\/2026\/09\/vylino-ec02-fashion-3.jpg\" width=\"1000\" height=\"1500\" loading=\"lazy\" alt=\"Relaxed styling with layered separates\"><div><p class=\"md-eye\">Style notes<\/p><h2>Less outfit planning.<br>More being you.<\/h2><p>Start with a shape you love. Add a layer. Change the mood with a different pairing. This concept puts discovery and easy product selection at the centre of a fashion storefront.<\/p><a href=\"#md-edit\">Find your combination \u2192<\/a><\/div><\/section>\n<section id=\"md-bag\" class=\"md-wrap md-section\"><div class=\"md-bag\"><p class=\"md-eye\">Try the shopping journey<\/p><h2>Your demo bag<\/h2><p id=\"md-empty\">Your bag is empty. Explore the edit and add a look.<\/p><ul id=\"md-bag-items\" aria-label=\"Selected demo looks\"><\/ul><p>No checkout or payments in this concept. Nothing is ordered or reserved.<\/p><a class=\"md-btn\" href=\"https:\/\/wa.me\/919098193452?text=Hello%20Vylino%2C%20I%20like%20sample%20EC-02%20(Mode%20Studio).%20Please%20discuss%20a%20fashion%20ecommerce%20website%20for%20my%20business.\" target=\"_blank\" rel=\"noopener\">Build my fashion website \u2197<\/a><\/div><\/section>\n<\/main><footer class=\"md-footer\"><div class=\"md-wrap\"><p class=\"md-eye\">Your label. Your point of view.<\/p><h2>Make the next edit yours.<\/h2><a class=\"md-btn\" href=\"https:\/\/wa.me\/919098193452?text=Hello%20Vylino%2C%20I%20like%20sample%20EC-02%20(Mode%20Studio).%20Please%20discuss%20a%20fashion%20ecommerce%20website%20for%20my%20business.\" target=\"_blank\" rel=\"noopener\">Discuss sample EC-02 \u2197<\/a><p><a href=\"\/website-samples\/\">Explore all Vylino samples \u2192<\/a><\/p><small>Mode Studio is a fictional brand and a Vylino concept demo, not a client project. Styling photographs do not represent products available for purchase.<\/small><small>Photography: <a href=\"https:\/\/unsplash.com\/@yelizarov\" target=\"_blank\" rel=\"noopener\">Vladimir Yelizarov<\/a>, <a href=\"https:\/\/unsplash.com\/@aliahmadin\" target=\"_blank\" rel=\"noopener\">Ali Ahmadi<\/a>, <a href=\"https:\/\/unsplash.com\/@mirnyy\" target=\"_blank\" rel=\"noopener\">Ilya Mirnyy<\/a> \/ Unsplash.<\/small><\/div><\/footer><\/div>\n<script>\n(function(){var root=document.getElementById('mode');if(!root)return;var bag=[],seq=0;var buttons=root.querySelectorAll('[data-filter]'),cards=root.querySelectorAll('[data-category]');function filter(v){if(['all','layers','outerwear'].indexOf(v)<0)v='all';var count=0;buttons.forEach(function(b){b.setAttribute('aria-pressed',String(b.dataset.filter===v));});cards.forEach(function(c){c.hidden=v!=='all'&&v!==c.dataset.category;if(!c.hidden)count++;});root.querySelector('#md-count').textContent=count+' '+(count===1?'look':'looks');}buttons.forEach(function(b){b.addEventListener('click',function(){filter(b.dataset.filter);var url=new URL(location.href);if(b.dataset.filter==='all')url.searchParams.delete('edit');else url.searchParams.set('edit',b.dataset.filter);history.replaceState({},'',url);});});filter(new URL(location.href).searchParams.get('edit')||'all');window.addEventListener('popstate',function(){filter(new URL(location.href).searchParams.get('edit')||'all');});\nfunction render(){var list=root.querySelector('#md-bag-items');list.replaceChildren();root.querySelector('#md-empty').hidden=bag.length>0;root.querySelectorAll('.md-bag-count').forEach(function(e){e.textContent='('+bag.length+')';});bag.forEach(function(item){var li=document.createElement('li'),text=document.createElement('span'),button=document.createElement('button');text.textContent=item.name+' \/ Size '+item.size;button.type='button';button.className='md-remove';button.textContent='Remove';button.setAttribute('aria-label','Remove '+item.name+' size '+item.size);button.addEventListener('click',function(){bag=bag.filter(function(x){return x.id!==item.id;});render();root.querySelector('#md-status').textContent=item.name+' removed from the demo bag.';var next=list.querySelector('button');if(next)next.focus();else{var empty=root.querySelector('#md-empty');empty.tabIndex=-1;empty.focus();}});li.append(text,button);list.append(li);});}\nroot.querySelectorAll('.md-add').forEach(function(b){b.addEventListener('click',function(){var card=b.closest('.md-product'),chosen=card.querySelector('input:checked'),size=chosen?chosen.value:'M';bag.push({id:++seq,name:card.dataset.name,size:size});render();root.querySelector('#md-status').textContent=card.dataset.name+' \/ Size '+size+' added. Demo bag: '+bag.length+' item(s).';});});})();\n<\/script>\n<script>(function(){var root=document.getElementById('mode');if(!root)return;function push(eventName,action,label){var payload={event:eventName,sample_id:'EC-02',sample_category:'Ecommerce',interaction:action,interaction_label:(label||'').trim().slice(0,120)};window.dataLayer=window.dataLayer||[];window.dataLayer.push(payload);try{window.dispatchEvent(new CustomEvent('vylino:sample-event',{detail:payload}));}catch(e){}}root.addEventListener('click',function(ev){var el=ev.target.closest('a,button,summary');if(!el||!root.contains(el))return;var label=(el.textContent||'').replace(\/\\s+\/g,' ');if(el.matches('a[href*=\"wa.me\/919098193452\"]')){push('vylino_sample_enquiry','whatsapp_enquiry',label);return;}var action='';if(el.matches('[data-filter]'))action='filter_select';else if(el.matches('[data-dept]'))action='department_select';else if(el.matches('[data-visit]'))action='visit_select';else if(el.matches('[data-path]'))action='journey_select';else if(el.matches('.md-add'))action='bag_add';else if(el.matches('.md-remove'))action='bag_remove';else if(el.matches('[data-compare]'))action='compare_toggle';else if(el.matches('[data-clear],.cs-clear,.compare-clear'))action='compare_clear';if(action)push('vylino_sample_interaction',action,label);});root.addEventListener('change',function(ev){var el=ev.target;if(el&&el.matches('input[type=\"radio\"]'))push('vylino_sample_interaction','option_select',el.value||'');});})();<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>VYLINO \/ EC-02 \u00b7 Fashion concept \u00b7 No real purchasesBack to samplesGet this website style \u2197 mode studio. The editStyle [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":11992,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-12007","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vylino.com\/de\/wp-json\/wp\/v2\/pages\/12007","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vylino.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vylino.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vylino.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vylino.com\/de\/wp-json\/wp\/v2\/comments?post=12007"}],"version-history":[{"count":4,"href":"https:\/\/vylino.com\/de\/wp-json\/wp\/v2\/pages\/12007\/revisions"}],"predecessor-version":[{"id":12037,"href":"https:\/\/vylino.com\/de\/wp-json\/wp\/v2\/pages\/12007\/revisions\/12037"}],"up":[{"embeddable":true,"href":"https:\/\/vylino.com\/de\/wp-json\/wp\/v2\/pages\/11992"}],"wp:attachment":[{"href":"https:\/\/vylino.com\/de\/wp-json\/wp\/v2\/media?parent=12007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}