[{"data":1,"prerenderedAt":235},["ShallowReactive",2],{"project-en-visual-storefront":3,"recommendation-mention-sources":174},{"id":4,"title":5,"body":6,"category":130,"context":131,"cover":132,"coverAlt":133,"demo":134,"description":135,"extension":136,"featured":137,"locale":138,"meta":139,"navigation":140,"order":117,"path":141,"published":140,"repository":134,"results":142,"role":152,"seo":153,"slug":154,"stack":155,"stem":171,"year":172,"__hash__":173},"projects\u002Fen\u002Fprojects\u002Fvisual-storefront.md","Visual site editor redesign for inSales storefronts",{"type":7,"value":8,"toc":115},"minimark",[9,14,18,21,28,34,38,41,45,50,53,57,60,64,67,71,74,78,81,84,90,95,99],[10,11,13],"h2",{"id":12},"the-problem","The problem",[15,16,17],"p",{},"The visual site editor is the main tool inSales merchants use to change the design, pages and widgets of their store. The storefront opens in an iframe inside the admin, and the editor controls it from outside.",[15,19,20],{},"Before the redesign, one permanent sidebar did four jobs: global design settings, page sections, widget lists and the settings of the selected widget. Add, edit and delete were available both in the sidebar and inside the preview, so there was no single obvious way to work with a widget. The sidebar also took width away from the store itself, and a first-run tour would have had to explain several levels of the same panel.",[15,22,23],{},[24,25],"img",{"alt":26,"src":27},"The old editor with a permanent sidebar of design settings and page sections next to the storefront","\u002Fimages\u002Fwork\u002Fvisual-storefront\u002Fold-editor-permanent-sidebar.webp",[15,29,30],{},[31,32,33],"em",{},"Before: global settings, page sections and widget lists shared one panel that never closed.",[10,35,37],{"id":36},"my-role","My role",[15,39,40],{},"A designer supplied the new layout. I was the only frontend developer on the project and implemented it in about eight weeks: the interface structure, data loading, iframe behaviour and the eight-step onboarding tour. I worked out the new data contract with the backend. The recovery mode was my own proposal: the design did not cover that case.",[10,42,44],{"id":43},"what-i-built","What I built",[46,47,49],"h3",{"id":48},"one-role-for-each-part-of-the-screen","One role for each part of the screen",[15,51,52],{},"The top menu now holds global design settings and page navigation. Widget actions live in the storefront preview. Choosing Edit opens a floating panel with the settings of that widget only. I wrote the panel as a separate component and moved widget settings rendering into it. It opens over the store instead of shifting it, can sit on either side, and hides when the merchant finishes or scrolls the page. While it is open, an overlay over the iframe catches clicks, so a link inside a widget cannot navigate the store away mid-edit.",[46,54,56],{"id":55},"request-data-when-the-interface-needs-it","Request data when the interface needs it",[15,58,59],{},"The old editor loaded design settings, layouts and every widget list in one request on startup, because the sidebar showed them all at once. That response was only 5–10 KB, so this was not a speed fix. The point was to make the API match the new screen. The editor now asks only for what the top menu needs, and widget lists load when a merchant opens them.",[46,61,63],{"id":62},"page-switching-that-keeps-the-editor-and-the-store-in-sync","Page switching that keeps the editor and the store in sync",[15,65,66],{},"Choosing a page in the menu has to move the iframe to that page, resolve which layout is active, load its settings and make sure later changes apply to the right page. Besides standard templates such as product, category, blog or account, merchants can create page-specific configurations, for example a banner on one category only. Those pages had to appear in the menu and open correctly too, so navigation could not be a fixed list.",[46,68,70],{"id":69},"keep-access-to-widgets-that-are-not-on-the-page","Keep access to widgets that are not on the page",[15,72,73],{},"Pre-order forms, feedback forms and pop-ups appear only after a shopper action. With the sidebar gone and controls moved into the preview, merchants would have had no way to reach them. I added a separate top-menu section where they can find, add and configure these widgets.",[46,75,77],{"id":76},"a-recovery-mode-that-does-not-depend-on-the-iframe","A recovery mode that does not depend on the iframe",[15,79,80],{},"Merchants and partner developers write their own HTML, CSS, JavaScript and Liquid in widgets. A critical error can stop the storefront from loading. In the new design every widget control lived inside that storefront, so a broken page would also hide the widget that broke it. The workaround would have been another admin section or re-uploading the whole template.",[15,82,83],{},"I proposed and built a technical mode. When the editor detects that the page failed to load, it offers to open a list of every widget on the page with its name and ID. From there the merchant or a support engineer can open the settings, edit the code or remove the widget. The same list also works on healthy pages as a quick way to find a block.",[15,85,86],{},[24,87],{"alt":88,"src":89},"List of page widgets grouped by section, with widget code, widget settings and remove actions","\u002Fimages\u002Fwork\u002Fvisual-storefront\u002Frecovery-mode-widget-list.webp",[15,91,92],{},[31,93,94],{},"The recovery list works without the storefront preview, so a broken widget can still be fixed or removed.",[10,96,98],{"id":97},"results","Results",[100,101,102,106,109,112],"ul",{},[103,104,105],"li",{},"The redesigned editor is used by more than 90% of inSales stores and is the standard editor for current-generation templates. The legacy editor remains for templates made before 2020.",[103,107,108],{},"First-session success rose from 60% to 80%, a gain of 20 percentage points. It counts the share of new users who changed a template or widget setting on their own and saved it during their first session.",[103,110,111],{},"With the controls closed, the storefront preview is about 17% wider on a 1920 px screen.",[103,113,114],{},"Recovery mode runs in production: when custom widget code breaks a page, a merchant or support engineer can fix it from inside the editor.",{"title":116,"searchDepth":117,"depth":117,"links":118},"",2,[119,120,121,129],{"id":12,"depth":117,"text":13},{"id":36,"depth":117,"text":37},{"id":43,"depth":117,"text":44,"children":122},[123,125,126,127,128],{"id":48,"depth":124,"text":49},3,{"id":55,"depth":124,"text":56},{"id":62,"depth":124,"text":63},{"id":69,"depth":124,"text":70},{"id":76,"depth":124,"text":77},{"id":97,"depth":117,"text":98},"Browser editors","inSales","\u002Fimages\u002Fwork\u002Fvisual-storefront\u002Ffloating-widget-settings.webp","Redesigned inSales visual editor with a floating settings panel for the selected promo slider over a full-width storefront preview",null,"I implemented the frontend of a redesigned no-code site editor now used by more than 90% of inSales stores, and added a recovery mode for pages broken by custom widget code.","md",false,"en",{},true,"\u002Fen\u002Fprojects\u002Fvisual-storefront",[143,146,149],{"value":144,"label":145},"90%+","of inSales stores use the redesigned editor",{"value":147,"label":148},"60% → 80%","new users who changed and saved a template or widget setting on their own in the first session",{"value":150,"label":151},"≈17%","wider storefront preview on a 1920 px screen with the controls closed","Sole frontend developer: redesign implementation, data contract, recovery mode",{"title":5,"description":135},"visual-storefront",[156,157,158,159,160,161,162,163,164,165,166,167,168,169,170],"Vue.js","TypeScript","Complex UI","Front-End Development","Frontend Architecture","JavaScript","SCSS","Vuetify","Mixpanel","API Integration","State Management","Web Application Development","E-Commerce Development","Customer Onboarding","E-commerce Optimization","en\u002Fprojects\u002Fvisual-storefront","May 2024 – Aug 2024","b_2BeBNM5liPhPmG-DgC6irZkbo_DX5ccYi0_2PfdzM",[175,186,191,205,215,220,225,230],{"stem":176,"name":177,"date":178,"featured":117,"published":140,"mentions":179},"recommendations\u002Fandrey-stikheev","Andrey Stikheev","2026-09-08",[180,183],{"project":181,"quote":182},"product-image-editor","Among his most notable projects was a sophisticated browser-based image editor built with TypeScript and Fabric.js, now used by thousands of merchants.",{"project":184,"quote":185},"abandoned-carts","He also developed the frontend for a paid abandoned-cart product and contributed to the production migration from Vue 2 to Vue 3.",{"stem":187,"name":188,"date":189,"featured":134,"published":140,"mentions":190},"recommendations\u002Fdaniil-churakov","Daniil Churakov","2026-08-27",[],{"stem":192,"name":193,"date":194,"featured":124,"published":140,"mentions":195},"recommendations\u002Fdmitry-sadovsky","Dmitry Sadovsky","2026-08-22",[196,198,200,203],{"project":154,"quote":197},"For years he was the driving force behind our visual storefront editor — a large, complex application where merchants build their online stores.",{"project":181,"quote":199},"It became the tool merchants use to design product images right inside the admin panel — the kind of component companies usually buy rather than build.",{"project":201,"quote":202},"image-editor","What impressed me most was the infographic editor he built essentially from scratch: a full canvas-based graphic editor with artboards, shapes, text styling, templates, and undo\u002Fredo history, powered by an editor core he developed himself.",{"project":184,"quote":204},"Our abandoned carts functionality — with multi-channel customer messaging, communication history, and analytics — was largely his work, from UI down to the details of how requests are cancelled and states stay in sync.",{"stem":206,"name":207,"date":208,"featured":209,"published":140,"mentions":210},"recommendations\u002Fegor-fedkin","Egor Fedkin","2026-08-31",1,[211,213],{"project":181,"quote":212},"Today, the tool is actively used by around 3,000 users.",{"project":184,"quote":214},"It has already generated approximately twice the revenue needed to cover its development costs.",{"stem":216,"name":217,"date":218,"featured":134,"published":140,"mentions":219},"recommendations\u002Femmanuel-stephen","Emmanuel Stephen","2026-10-11",[],{"stem":221,"name":222,"date":223,"featured":134,"published":140,"mentions":224},"recommendations\u002Fevgeny-lonshakov","Евгений Лоншаков","2026-09-21",[],{"stem":226,"name":227,"date":228,"featured":134,"published":140,"mentions":229},"recommendations\u002Froman-gorbachev","Роман Горбачев","2026-09-17",[],{"stem":231,"name":232,"date":233,"featured":134,"published":140,"mentions":234},"recommendations\u002Fvladimir-bedarev","Bedarev Vladimir","2026-09-16",[],1793195988018]