[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-previews":3,"case-study-previews":137,"article-en-cm8l9um2w006z14ofism8znn5":581,"article-the-architecture-of-modern-ecommerce-platforms-en":1005},["Reactive",4],[5,35,62,87,111],{"showImage":6,"isFeatured":6,"hero":7,"heroCaption":7,"id":8,"title":9,"shortDescription":15,"category":26,"tags":27,"readingDuration":32,"createdAt":33,"updatedAt":34,"slug":29},false,null,"cm8l9tbl5006s14of2lwhm6aw",{"id":10,"language":11,"value":12,"type":14},"cm975paaq00bk38jd0nejuhce","en",{"text":13},"Configurators","text",{"id":16,"language":11,"value":17,"type":25},"cm975paar00bm38jd6fcve6q0",{"type":18,"content":19},"doc",[20],{"type":21,"content":22},"paragraph",[23],{"text":24,"type":14},"In this article, we’ll explore what goes into building a great product configurator, sharing insights and lessons from our past projects.","richText","ECOMMERCE",[28,29,30,31],"configurator","configurators","apple","ecommerce",11,"2025-03-23T06:42:23.081Z","2025-04-07T14:18:12.192Z",{"showImage":6,"isFeatured":6,"hero":36,"heroCaption":7,"id":42,"title":43,"shortDescription":47,"category":55,"tags":56,"readingDuration":58,"createdAt":59,"updatedAt":60,"slug":61},{"id":37,"url":38,"alt":39,"type":40,"width":41,"height":41},"cm9846gzf0044c8nkfcng0qpq","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002F6f8f0cdc-048e-4110-96e5-dbdd0d3d1ef8","Loop hero image","image\u002Fwebp",0,"cm8ad902700009q2nbegh7lpx",{"id":44,"language":11,"value":45,"type":14},"cm9846gze003yc8nklsfanz5b",{"text":46},"The Next Step for Closed-Loop Systems",{"id":48,"language":11,"value":49,"type":25},"cm9846gze0040c8nkapyqifdd",{"type":18,"content":50},[51],{"type":21,"content":52},[53],{"text":54,"type":14},"In this article, we explore how to overcome their biggest challenges to drive the next generation of closed-loop systems.","MOBILE APP",[57],"Loop",6,"2025-03-15T15:33:05.551Z","2025-04-08T06:23:20.953Z","the-next-step-for-closed-loop-systems",{"showImage":6,"isFeatured":6,"hero":63,"heroCaption":7,"id":68,"title":69,"shortDescription":73,"category":26,"tags":81,"readingDuration":83,"createdAt":84,"updatedAt":85,"slug":86},{"id":64,"url":65,"alt":66,"type":67,"width":41,"height":41},"cm98ncfvb0190c8nkmuj1yv66","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002F04b4f6be-2bac-428f-83ce-d962b76e6567","Vitra ","video\u002Fmp4","cm8bcqvvl008i9q2nt8yd135t",{"id":70,"language":11,"value":71,"type":14},"cm98ncfva018uc8nkvlpya98m",{"text":72},"Designing Vitra’s flagship configurator",{"id":74,"language":11,"value":75,"type":25},"cm98ncfvb018wc8nkjo07sark",{"type":18,"content":76},[77],{"type":21,"content":78},[79],{"text":80,"type":14},"In this article, we dive into the design process behind Vitra's flagship configurator and explore how we improved the shopping experience at every step.",[82],"Vitra",16,"2025-03-16T08:06:46.497Z","2025-04-08T15:19:52.146Z","designing-vitras-flagship-configurator",{"showImage":6,"isFeatured":6,"hero":88,"heroCaption":7,"id":92,"title":93,"shortDescription":97,"category":105,"tags":106,"readingDuration":107,"createdAt":108,"updatedAt":109,"slug":110},{"id":89,"url":90,"alt":91,"type":40,"width":41,"height":41},"cm98pazwz01fyc8nkkbl5j6fg","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002F0623dcd8-36e7-46d3-9738-4705c440c2bf","Platform Examples","cm8l9um2w006z14ofism8znn5",{"id":94,"language":11,"value":95,"type":14},"cm98pazwy01fsc8nk6s3p43ff",{"text":96},"The architecture of modern eCommerce platforms",{"id":98,"language":11,"value":99,"type":25},"cm98pazwz01fuc8nk67upqvuy",{"type":18,"content":100},[101],{"type":21,"content":102},[103],{"text":104,"type":14},"In today’s fast-paced e-commerce world, businesses need more than just a functional online store—they need a platform that’s flexible, scalable, and tailored to their brand. ","CATEGORY",[],9,"2025-03-23T06:43:23.336Z","2025-04-08T16:14:44.048Z","the-architecture-of-modern-ecommerce-platforms",{"showImage":6,"isFeatured":6,"hero":112,"heroCaption":7,"id":116,"title":117,"shortDescription":121,"category":129,"tags":130,"readingDuration":133,"createdAt":134,"updatedAt":135,"slug":136},{"id":113,"url":114,"alt":115,"type":67,"width":41,"height":41},"cm9ctxjio000o12zwkrijxeww","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002Fd1dc6d4d-9292-4aa3-abfd-a61662bd1428","New Ecommerce Overview","cm8u8zmxf018o13z9ras6v433",{"id":118,"language":11,"value":119,"type":14},"cm9ctxjin000i12zw1elqhr0y",{"text":120},"Smart eCommerce is Transforming Online Shopping",{"id":122,"language":11,"value":123,"type":25},"cm9ctxjin000k12zwr2ygg8vh",{"type":18,"content":124},[125],{"type":21,"content":126},[127],{"text":128,"type":14},"In this article, we explore how brands are leading the way with innovative tools and strategies to redefine digital retail.","Ecommerce",[26,131,132],"CONFIGURATOR","FINDER",14,"2025-03-29T13:29:13.683Z","2025-04-11T13:35:19.051Z","smart-ecommerce-is-transforming-online-shopping",["Reactive",138],[139,212,278,398,477],{"tags":140,"themeColor":141,"platform":142,"type":143,"technologies":144,"id":150,"title":161,"isFeatured":162,"isPrivate":162,"slug":163,"yearOfPublication":164,"brandName":165,"features":166,"url":168,"thumbnail":169,"logo":172,"createdAt":177,"updatedAt":178,"metrics":179,"description":180,"heading":188,"extendedDescription":192,"credits":200},[],"#090713","desktop","Packaging",[145,151,156],{"id":146,"category":147,"technologies":148,"caseStudyId":150},"cm9zewdh600cb13drfe2v7ozy","Animation",[149],"After Effects","5",{"id":152,"category":153,"technologies":154,"caseStudyId":150},"cm9zewdh600cc13dru48x0scs","Design ",[155],"Figma",{"id":157,"category":158,"technologies":159,"caseStudyId":150},"cm9zewdh600cd13drwiiz53rc","Protoype",[160],"Protopie","Other Projects",true,"other-projects",2024,"Other",[142,167],"innovation","https:\u002F\u002Fwww.x-bionic.com",{"width":41,"height":41,"id":170,"url":171,"alt":161,"type":40},"cm9zewdgr00ao13dr8nmkiuyk","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002Fd366729a-4a84-4340-a753-6ddca8135d51",{"width":41,"height":41,"id":173,"url":174,"alt":175,"type":176},"cm9zewdgv00aq13drrtkmfc8p","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002F4228da45-a3db-4ef0-9b75-7df6f4adb0af","Dior Logo CD Subtract","image\u002Fsvg+xml","2025-02-05T17:49:45.819Z","2025-04-27T08:53:12.373Z",[],{"id":181,"language":11,"value":182,"type":25},"cm9zewdh600c613drwa9k4xsb",{"type":18,"content":183},[184],{"type":21,"content":185},[186],{"text":187,"type":14},"Sharing a collection of project highlights that showcase the diversity of challenges and solutions from various projects I've worked on. These “bites” give a snapshot of the technical solutions, and creative problem-solving that went into each project.",{"id":189,"language":11,"value":190,"type":14},"cm9zewdh600c313drsht43wl6",{"text":191},"Project Bites",{"id":193,"language":11,"value":194,"type":25},"cm9zewdh600c713drvgr0zwk2",{"type":18,"content":195},[196],{"type":21,"content":197},[198],{"text":199,"type":14},"From crafting new icon languages and expanding visual identities to designing seamless interactions and packaging for global distribution, these highlights illustrate the breadth of my contributions across multiple platforms and industries.\"",[201,205,208],{"id":202,"name":203,"role":204},"cm9zewdh500c013dr4fwpw14c","Jonas Auernhammer ","Design",{"id":206,"name":207,"role":204},"cm9zewdh500c113drjs1u75gq","Kristina Nikaj",{"id":209,"name":210,"role":211},"cm9zewdh500c213dr0ysok2ad","Daan Klaver","Creative Direction",{"tags":213,"themeColor":214,"platform":142,"type":215,"technologies":216,"id":217,"title":218,"isFeatured":162,"isPrivate":162,"slug":218,"yearOfPublication":219,"brandName":218,"features":220,"url":222,"thumbnail":223,"logo":229,"createdAt":236,"updatedAt":237,"metrics":238,"description":239,"heading":247,"extendedDescription":251,"footnote":259,"credits":277},[],"","App",[],"cmg5lz5yz0019122phahtegr2","nsave",2025,[221,142],"mobile","https:\u002F\u002Fwww.nsave.com",{"width":224,"height":225,"id":226,"url":227,"alt":228,"type":40},1920,1080,"cml2k6eho000stonze6l91054","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002F1fe47700-3284-4454-a834-c244523f4163","nsave investment tab nike stock detail view",{"width":230,"height":231,"id":232,"url":233,"alt":234,"type":235},481,480,"cml2k6ehp000utonzmm32gnp3","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002F3be34b36-56fe-4d45-9d09-ba483125d330","logo nsave","image\u002Fpng","2025-09-29T20:56:11.000Z","2026-01-31T17:01:02.558Z",[],{"id":240,"language":11,"value":241,"type":25},"cml2k6ehq000xtonzh6s9hluw",{"type":18,"content":242},[243],{"type":21,"content":244},[245],{"text":246,"type":14},"As the Founding Product Designer at nsave, I led the design across the mobile banking app, website, and brand identity, unifying them into a seamless and trusted experience. ",{"id":248,"language":11,"value":249,"type":14},"cml2k6ehq000vtonzxz67r5h3",{"text":250},"Earn globally, spend locally.",{"id":252,"language":11,"value":253,"type":25},"cml2k6ehq000ztonz88gz4579",{"type":18,"content":254},[255],{"type":21,"content":256},[257],{"text":258,"type":14},"From early research and low-fidelity explorations to a refined design system, every detail was crafted to create an interface that feels simple, secure, and empowering.",{"id":260,"language":11,"value":261,"type":25},"cml2k6ehq0011tonzpoz8nz0c",{"type":18,"content":262},[263],{"type":21,"content":264},[265,267,269,271,272,274,275],{"text":266,"type":14},"If you'd like to share our work publicly, we kindly request that you tag us visibly on the platform.",{"type":268},"hardBreak",{"text":270,"type":14},"This ensures proper attribution, which is important in the creative space for recognizing the",{"type":268},{"text":273,"type":14},"effort and creativity involved. Including our website or account handle helps maintain transparency",{"type":268},{"text":276,"type":14},"and supports the ethical sharing of content.",[],{"tags":279,"themeColor":282,"platform":142,"type":283,"technologies":284,"id":291,"title":302,"isFeatured":162,"isPrivate":6,"slug":303,"yearOfPublication":164,"brandName":304,"features":305,"url":307,"thumbnail":308,"logo":314,"createdAt":319,"updatedAt":320,"metrics":321,"description":345,"heading":353,"extendedDescription":357,"footnote":373,"credits":386},[280,281],"wallet ","geldbeutel","#111112","Configurator",[285,292,297],{"id":286,"category":287,"technologies":288,"caseStudyId":291},"cml76kk1g007stonzj963h702","Frontend",[289,290],"Vue.Js","Three.js","1",{"id":293,"category":294,"technologies":295,"caseStudyId":291},"cml76kk1g007ttonz3dx7hpsa","CMS",[296],"Shopify",{"id":298,"category":299,"technologies":300,"caseStudyId":291},"cml76kk1g007utonz0h4l9tcy","Hosting",[301],"Vercel","Lockcard ","lockcard","Lockcard",[306,142],"threeD","https:\u002F\u002Fconfigurator.lockcard.com\u002F",{"width":309,"height":310,"id":311,"url":312,"alt":313,"type":40},2880,1620,"cml76kk11005otonzb9di144k","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002F090e0dd0-b7cd-4da9-bd5b-2097f0cc0130","Lockcard Thumbnail",{"width":315,"height":315,"id":316,"url":317,"alt":318,"type":235},128,"cml76kk15005qtonzus7vml8h","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002F59f6782a-baaa-4934-9331-d3206c4d82b8","Lockcard Logo","2025-01-31T10:16:12.893Z","2026-02-03T22:38:59.183Z",[322,329,337],{"id":323,"value":324,"order":41,"title":325},"cml76kk1f0076tonz634dd813","1m +",{"id":326,"language":11,"value":327,"type":14},"cml76kk1f0077tonzeex7sko0",{"text":328},"Annual Users",{"id":330,"value":331,"order":332,"title":333},"cml76kk1f0079tonz0goutz1w","4.8",1,{"id":334,"language":11,"value":335,"type":14},"cml76kk1f007atonzftje029e",{"text":336},"Ø User Rating",{"id":338,"value":339,"order":340,"title":341},"cml76kk1f007ctonzyyapi0oc","2x",2,{"id":342,"language":11,"value":343,"type":14},"cml76kk1f007dtonzzk1pjivy",{"text":344},"Custom bundles sold",{"id":346,"language":11,"value":347,"type":14},"cml76kk1g007ltonzcedrpr0c",{"type":18,"content":348},[349],{"type":21,"content":350},[351],{"text":352,"type":14},"Lockcard entrusted us with building an advanced 3D configurator for their popular modular wallets. We provided a seamless digital shopping experience, allowing their users to effortlessly customize their wallets to suit their needs. Designing the configurator involved an extensive prototyping phase, where we explored various.",{"id":354,"language":11,"value":355,"type":14},"cml76kk1f007itonz0gsbzb1z",{"text":356},"Introducing the new Lockcard Wallet Configurator",{"id":358,"language":11,"value":359,"type":25},"cml76kk1g007mtonzng7nf8ot",{"type":18,"content":360},[361,369],{"type":21,"content":362},[363,365,366,367],{"text":364,"type":14},"Designing the configurator involved an extensive prototyping phase, where we explored various user flows and design paths. We maintained a close collaboration with the Lockcard team with regular check-ins to ensure a solution perfectly tailored to their audience. When working on the UI, we elevated Lockcard's design language while ensuring it remained consistent with their existing e-commerce platform.",{"type":268},{"type":268},{"text":368,"type":14},"We used their existing Shopify as the Backend, Vue.js for dynamic ",{"type":21,"content":370},[371],{"text":372,"type":14},"interfaces, Vercel for seamless hosting and Three.js for 3D interactions",{"id":374,"language":11,"value":375,"type":25},"cml76kk1g007otonzo38ns1rk",{"type":18,"content":376},[377],{"type":21,"content":378},[379,380,381,382,383,384,385],{"text":266,"type":14},{"type":268},{"text":270,"type":14},{"type":268},{"text":273,"type":14},{"type":268},{"text":276,"type":14},[387,390,394],{"id":388,"name":389,"role":204},"cml76kk1f007ftonz2l2yefxt","Jonas Auernhammer",{"id":391,"name":392,"role":393},"cml76kk1f007gtonzf2r5l5tu","Thomas Fichtner","Development",{"id":395,"name":396,"role":397},"cml76kk1f007htonzou55obgz","Jip Newland","Models",{"tags":399,"themeColor":214,"platform":142,"type":405,"technologies":406,"id":411,"title":401,"isFeatured":162,"isPrivate":162,"slug":421,"yearOfPublication":219,"brandName":401,"features":422,"url":425,"thumbnail":426,"logo":432,"createdAt":436,"updatedAt":437,"metrics":438,"description":439,"heading":447,"extendedDescription":451,"footnote":459,"credits":467},[400,401,402,403,404],"Case Study","Puma","Conmebol","AC Millan","Cumbre","Product Design",[407,412,416],{"id":408,"category":204,"technologies":409,"caseStudyId":411},"cml76p8de008qtonzbwbhh7vw",[410],"Adobe Illustrator","3",{"id":413,"category":393,"technologies":414,"caseStudyId":411},"cml76p8de008rtonzlkufwnmb",[415],"Puma T1",{"id":417,"category":418,"technologies":419,"caseStudyId":411},"cml76p8de008stonz6ud8x598","Visualization",[420],"Blender","puma",[423,424],"teamsport","colors-and-materials","https:\u002F\u002Fwww.puma.com",{"width":427,"height":428,"id":429,"url":430,"alt":431,"type":40},4908,2761,"cml76p8d5007xtonzsn7aim23","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002F6f649d43-a7f2-4787-95bb-3f9968c0275b","PUMA YOGA THUMBNAIL",{"width":315,"height":315,"id":433,"url":434,"alt":435,"type":176},"cml76p8d8007ztonzjymk6vta","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002Ff4ddce75-5b81-4bfa-a574-1e0dce6b97a6","Puma Logo Cat Negative","2025-02-05T17:31:41.782Z","2026-02-03T22:42:37.344Z",[],{"id":440,"language":11,"value":441,"type":25},"cml76p8dd008itonzgte7jzx2",{"type":18,"content":442},[443],{"type":21,"content":444},[445],{"text":446,"type":14},"At PUMA, I am designing the next generation of teamsport equipment, covering everything from performance balls and goalkeeper gloves to shin guards, rackets, and sports bags. The focus lies in creating high-quality, functional gear that meets the needs of both professional athletes and everyday players around the world.",{"id":448,"language":11,"value":449,"type":14},"cml76p8dd008gtonzlu8x1ayz",{"text":450},"Empowering Greatness: Elevating Athletes to New Heights",{"id":452,"language":11,"value":453,"type":25},"cml76p8de008ktonzuhf5jf3n",{"type":18,"content":454},[455],{"type":21,"content":456},[457],{"text":458,"type":14},"Collaborating with first-division clubs like Manchester City, AC Milan, and other top-tier partners, the work blends innovation with deep brand identity. Each product is crafted to reflect PUMA’s performance standards and design DNA, while pushing the boundaries of what modern teamsport gear can offer.",{"id":460,"language":11,"value":461,"type":25},"cml76p8de008ntonzsg9i6jsp",{"type":18,"content":462},[463],{"type":21,"content":464},[465],{"text":466,"type":14},"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. ",[468,470,473],{"id":469,"name":389,"role":204},"cml76p8dd008dtonz9sht7brq",{"id":471,"name":472,"role":211},"cml76p8dd008etonz4q05bkpr","Harald Barani",{"id":474,"name":475,"role":476},"cml76p8dd008ftonzn7eks7w8","Dorn Pablo","3D Modeling",{"tags":478,"themeColor":479,"platform":142,"type":283,"technologies":480,"id":486,"title":82,"isFeatured":162,"isPrivate":6,"slug":496,"yearOfPublication":219,"brandName":82,"features":497,"url":498,"thumbnail":499,"logo":503,"createdAt":507,"updatedAt":508,"metrics":509,"description":531,"heading":539,"extendedDescription":543,"footnote":556,"credits":570},[],"#161009",[481,487,491],{"id":482,"category":483,"technologies":484,"caseStudyId":486},"cml77143o00bntonz16i80ee4","Platform",[485],"vitra.com","2",{"id":488,"category":489,"technologies":490,"caseStudyId":486},"cml77143o00botonz2ndy9mfu","Type",[129],{"id":492,"category":493,"technologies":494,"caseStudyId":486},"cml77143o00bptonz7b5j03ev","Duration",[495],"4 m","vitra",[142,306],"https:\u002F\u002Fvitra.com",{"width":224,"height":225,"id":500,"url":501,"alt":502,"type":40},"cml771437008wtonzv5hrrjc4","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002F74394103-76ec-4697-a98d-7f29d9859b4d","Modern room with furniture from Vitra",{"width":315,"height":315,"id":504,"url":505,"alt":506,"type":176},"cml77143a008ytonzwbhqxbrz","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002Fea12051e-61a6-406f-9165-801343cff652","Logo Vitra V.","2025-02-04T21:17:15.308Z","2026-02-03T22:51:51.676Z",[510,517,524],{"id":511,"value":512,"order":41,"title":513},"cml77143n00b0tonz6twu1vdr","4.8m",{"id":514,"language":11,"value":515,"type":14},"cml77143n00b1tonzl3oi78i5",{"text":516},"Ø Annual Users ",{"id":518,"value":519,"order":332,"title":520},"cml77143n00b3tonzvj73lzyz","28+",{"id":521,"language":11,"value":522,"type":14},"cml77143n00b4tonzu5jw9w5b",{"text":523},"Product Categories",{"id":525,"value":526,"order":340,"title":527},"cml77143n00b6tonzhf6xj1wc","645",{"id":528,"language":11,"value":529,"type":14},"cml77143n00b7tonzlih38c8m",{"text":530},"Configurable Products ",{"id":532,"language":11,"value":533,"type":25},"cml77143o00betonzm5jvmsza",{"type":18,"content":534},[535],{"type":21,"content":536},[537],{"text":538,"type":14},"During my time at Build in Amsterdam, we were entrusted with building a flagship configurator for Vitra’s entire furniture lineup. While doing so, we not only improved the digital shopping experience at every step but also set the stage for a playful yet elegant new UI language for Vitra.com. ",{"id":540,"language":11,"value":541,"type":14},"cml77143o00bctonzhpe8ju46",{"text":542},"Vitra: Flagship Furniture Configurator",{"id":544,"language":11,"value":545,"type":25},"cml77143o00bgtonzuicnt2oo",{"type":18,"content":546},[547,551,552],{"type":21,"content":548},[549],{"text":550,"type":14},"Together with a colleague, I designed a configurator that allowed users to easily customize a wide range of products—from office chairs to sofas and tables—offering real-time visual feedback on materials, colors, and configurations. We also integrated a built-in comparison tool to help users make informed decisions without leaving the product flow. ",{"type":21},{"type":21,"content":553},[554],{"text":555,"type":14},"We seamlessly integrated the configurator into Vitra’s platform while setting the stage for a future redesign of the entire site. This approach ensured the tool not only elevated the current shopping experience but also aligned with Vitra’s long-term digital vision.",{"id":557,"language":11,"value":558,"type":25},"cml77143o00bitonzpkuvto1s",{"type":18,"content":559},[560],{"type":21,"content":561},[562,563,564,565,566,568,569],{"text":266,"type":14},{"type":268},{"text":270,"type":14},{"type":268},{"text":567,"type":14},"effort and creativity involved. Including my website or account handle helps maintain transparency",{"type":268},{"text":276,"type":14},[571,574,577],{"id":572,"name":573,"role":204},"cml77143n00b9tonzoqkeitjn","Charlotte Scherf, Jonas Auernhammer",{"id":575,"name":576,"role":211},"cml77143n00batonzvflg9b98","Daan Klaver, Jerrie Buhrman",{"id":578,"name":579,"role":580},"cml77143n00bbtonzborlt4k5","Karla Vincheva","Project Management",{"id":92,"description":582,"sections":597,"authors":993},{"id":583,"language":11,"value":584,"type":25},"cm98pazwz01fwc8nkth0ovfrp",{"type":18,"content":585},[586],{"type":21,"content":587},[588,589,590,591,593,594,595],{"text":104,"type":14},{"type":268},{"type":268},{"text":592,"type":14},"Building an e-commerce platform with a custom storefront allows businesses to create unique, branded experiences while leveraging powerful backend systems like Shopify for inventory, payment processing, and content management. ",{"type":268},{"type":268},{"text":596,"type":14},"In this article, we’ll explore the advantages of custom storefronts, compare popular front-end libraries like Next.js and Vue.js, and examine how these technologies can elevate the user experience.",[598,683,703,814,835,909,930],{"id":599,"order":41,"textContent":600},"cm98pazx301fzc8nkbry50nb1",{"id":601,"content":602},"cm98pazx301g0c8nkh09xaicr",{"id":603,"language":11,"value":604,"type":25},"cm98pazx401g1c8nkotdt0toq",{"type":18,"content":605},[606,612,671],{"type":607,"attrs":608,"content":609},"heading",{"level":291},[610],{"text":611,"type":14},"Headless Architecture",{"type":21,"content":613},[614,616,617,618,620,621,622,624,625,626,628,629,630,631,636,639,640,644,646,647,648,652,654,655,656,660,662,663,664,668,670],{"text":615,"type":14},"Headless architecture is an approach to web development where the front-end (the user interface) is separated from the back-end (the server and database). ",{"type":268},{"type":268},{"text":619,"type":14},"In a traditional setup, the front-end and back-end are tightly coupled, meaning the user interface (UI) is built directly into the same system that handles data, logic, and content management.",{"type":268},{"type":268},{"text":623,"type":14},"In headless architecture, the back-end handles the data, content, and logic, but it doesn't manage how that content is displayed to the user. Instead, the front-end is \"decoupled\" and communicates with the back-end through APIs (Application Programming Interfaces). ",{"type":268},{"type":268},{"text":627,"type":14},"This allows developers to build custom front-ends for websites, mobile apps, or even IoT devices, while still using the same back-end system for content management and business logic.",{"type":268},{"type":268},{"type":268},{"text":632,"type":14,"marks":633},"Key Benefits of Headless Architecture",[634],{"type":635},"bold",{"type":268,"marks":637},[638],{"type":635},{"type":268},{"text":641,"type":14,"marks":642},"1. Flexibility:",[643],{"type":635},{"text":645,"type":14}," Developers can use any front-end technology they want (like React, Vue.js, or Angular) and still connect to the same back-end via APIs.",{"type":268},{"type":268},{"text":649,"type":14,"marks":650},"2. Improved Performance:",[651],{"type":635},{"text":653,"type":14}," By separating concerns, the front-end can be optimized independently of the back-end, leading to faster load times and smoother experiences.",{"type":268},{"type":268},{"text":657,"type":14,"marks":658},"3. Omnichannel Delivery:",[659],{"type":635},{"text":661,"type":14}," Since the front-end is separate, the same content can be delivered to different platforms (web, mobile, apps, etc.) using the same back-end data.",{"type":268},{"type":268},{"text":665,"type":14,"marks":666},"4. Future-Proofing",[667],{"type":635},{"text":669,"type":14},": Technology evolves quickly, and headless architecture allows businesses to update or change the front-end without having to rework the entire back-end system.",{"type":268},{"type":21,"content":672},[673,674,675,679,680,681],{"type":268},{"type":268},{"text":676,"type":14,"marks":677},"Example: Shopify",[678],{"type":635},{"type":268},{"type":268},{"text":682,"type":14},"In an ecommerce context, Shopify can act as the \"headless\" back-end, handling orders, inventory, and customer data, while the front-end could be a custom-built website using React, allowing full creative control over the user experience.",{"id":684,"order":332,"mediaContent":685},"cm98pazx501g3c8nkwlegq73m",{"id":686,"media":687,"caption":691},"cm98pazx501g4c8nk6moc9w3a",{"width":41,"height":41,"id":688,"url":689,"alt":690,"type":40},"cm98pazwb01fqc8nk8gomd74o","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002Fc971ab33-f119-4ce5-86f8-5771600ffb74","Shopify vs Woocommerce Comparison",{"id":692,"language":11,"value":693,"type":25},"cm98pazx501g5c8nkmoslql7c",{"type":18,"content":694},[695],{"type":21,"content":696},[697,701],{"text":698,"type":14,"marks":699},"Comparison between Shopify and WooCommerce",[700],{"type":635},{"text":702,"type":14}," – a side-by-side look at two popular e-commerce platforms in terms of usability, customizability, cost structure, and technical requirements.",{"id":704,"order":340,"textContent":705},"cm98pazx601g7c8nk80ib0fcn",{"id":706,"content":707},"cm98pazx601g8c8nk3ep7xel5",{"id":708,"language":11,"value":709,"type":25},"cm98pazx701g9c8nkwch05okv",{"type":18,"content":710},[711,716,791,792,793,794,795,796,801],{"type":607,"attrs":712,"content":713},{"level":291},[714],{"text":715,"type":14},"Shopify vs Woocommerce",{"type":21,"content":717},[718,720,721,722,723,726,727,729,730,731,733,734,736,737,738,740,741,742,744,745,746,748,749,750,759,760,761,762,763,767,768,770,771,772,774,775,776,777,779,780,781,783,784,785],{"text":719,"type":14},"Shopify and WooCommerce are two of the most popular solutions for modern headless e-commerce. ",{"type":268},{"type":268},{"type":268},{"text":296,"type":14,"marks":724},[725],{"type":635},{"type":268},{"text":728,"type":14},"Shopify is an all-in-one, hosted platform that provides a fully managed experience, handling everything from hosting and security to inventory management and payment processing. ",{"type":268},{"type":268},{"text":732,"type":14},"This makes it ideal for businesses seeking a streamlined, low-maintenance solution without requiring extensive technical expertise.",{"type":268},{"text":735,"type":14},"One of Shopify's biggest advantages is that many e-commerce businesses begin with a Shopify template. ",{"type":268},{"type":268},{"text":739,"type":14},"However, as they grow, they often realize they’ve “outgrown” the template and need a more custom, scalable solution. In these cases, a custom storefront can be built on top of the existing Shopify backend, combining complete front-end flexibility with the stability of Shopify’s backend. ",{"type":268},{"type":268},{"text":743,"type":14},"While nearly everything on Shopify can be customized, the one exception is the final checkout step. Shopify retains control of this, but it’s not a downside—it handles checkout exceptionally well, freeing up the team to focus on other parts of the user experience.",{"type":268},{"type":268},{"text":747,"type":14},"In the following article Shopify explains their point of view:",{"type":268},{"type":268},{"text":751,"type":14,"marks":752},"Shopify: Shopify vs WooCommerce",[753],{"type":754,"attrs":755},"link",{"rel":756,"href":757,"target":758},"noopener noreferrer nofollow","https:\u002F\u002Fwww.shopify.com\u002Fde\u002Fvergleich\u002Fshopify-vs-woocommerce","_blank",{"type":268},{"type":268},{"type":268},{"type":268},{"text":764,"type":14,"marks":765},"WooCommerce",[766],{"type":635},{"type":268},{"text":769,"type":14},"WooCommerce, on the other hand, is a plugin for WordPress that offers greater flexibility but requires more technical involvement in hosting, security, and maintenance. ",{"type":268},{"type":268},{"text":773,"type":14},"WooCommerce is ideal for businesses that need full control over customization from the ground up, but it demands more technical expertise to manage effectively.",{"type":268},{"type":268},{"type":268},{"text":778,"type":14},"Ultimately, Shopify offers simplicity, scalability, and a smooth checkout process, while WooCommerce appeals to those who prioritize complete customization and control from day one.",{"type":268},{"type":268},{"text":782,"type":14},"In the following article you can see a full breakdown of the pros and cons of both platforms:",{"type":268},{"type":268},{"text":786,"type":14,"marks":787},"Hostpress: Shopify vs WooCommerce",[788],{"type":754,"attrs":789},{"rel":756,"href":790,"target":758},"https:\u002F\u002Fwww.hostpress.de\u002Fblog\u002Fder-e-commerce-vergleich-woocommerce-vs-shopify\u002F",{"type":21},{"type":21},{"type":21},{"type":21},{"type":21},{"type":607,"attrs":797,"content":798},{"level":291},[799],{"text":800,"type":14},"Other Solutions",{"type":21,"content":802},[803,804,805,806,807,811,812],{"text":719,"type":14},{"type":268},{"type":268},{"type":268},{"text":808,"type":14,"marks":809},"Webflow",[810],{"type":635},{"type":268},{"text":813,"type":14},"Shopify is an all-in-one, hosted platform that provides a fully managed experience, handling everything from hosting and security to inventory management and payment processing.",{"id":815,"order":816,"mediaContent":817},"cm98pazx801gbc8nkya0qfb45",3,{"id":818,"media":819,"caption":823},"cm98pazx801gcc8nkx8rqf11r",{"width":41,"height":41,"id":820,"url":821,"alt":822,"type":40},"cm98pazw901fpc8nkn8pd5mh3","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002Fbc562d83-34f8-4130-8836-e105b3f5e812","Contentful CMS",{"id":824,"language":11,"value":825,"type":14},"cm98pazx901gdc8nkldj6v9j8",{"type":18,"content":826},[827],{"type":21,"content":828},[829,833],{"text":830,"type":14,"marks":831},"Example of a Contentful integration",[832],{"type":635},{"text":834,"type":14}," – demonstrating how a headless CMS can be used to manage content separately from the front-end, enabling flexible and scalable content delivery across platforms.",{"id":836,"order":837,"textContent":838},"cm98pazx901gfc8nkro64bvsg",4,{"id":839,"content":840},"cm98pazx901ggc8nklq07j6rc",{"id":841,"language":11,"value":842,"type":25},"cm98pazx901ghc8nk8ch7flz7",{"type":18,"content":843},[844,849],{"type":607,"attrs":845,"content":846},{"level":291},[847],{"text":848,"type":14},"Content Management Systems (CMS)",{"type":21,"content":850},[851,853,854,855,857,858,859,860,864,865,867,868,869,871,872,874,875,876,880,881,883,884,885,887,888,889,890,893,894,896,897,898,900,901,902,903,905,906,907],{"text":852,"type":14},"Modern content management systems (CMS) have evolved to meet the growing need for flexibility and scalability, especially with content being delivered across multiple platforms. ",{"type":268},{"type":268},{"text":856,"type":14},"Unlike traditional CMS, where content is created and displayed on a single system, modern CMS solutions like Storyblok and Contentful allow content to be created, managed, and delivered via APIs to any platform, from websites and mobile apps to IoT devices.",{"type":268},{"type":268},{"type":268},{"text":861,"type":14,"marks":862},"Storyblok",[863],{"type":635},{"type":268},{"text":866,"type":14},"Storyblok provides a user-friendly, page-based structure similar to traditional CMS platforms, making it easier for teams to organize content. ",{"type":268},{"type":268},{"text":870,"type":14},"Its standout feature is a built-in live preview that lets users see real-time changes and switch between breakpoints like mobile or tablet, allowing content creators to fine-tune how content will appear across different devices.",{"type":268},{"text":873,"type":14}," ",{"type":268},{"type":268},{"text":877,"type":14,"marks":878},"Contentful",[879],{"type":635},{"type":268},{"text":882,"type":14},"Contentful, on the other hand, offers a more flexible, content-first approach, allowing content to be structured independently of pages. This modular, element-based system gives developers greater control and allows content to be reused across different parts of a website or app without duplication. ",{"type":268},{"type":268},{"text":886,"type":14},"However, Contentful does not offer the same live preview capabilities as Storyblok, requiring users to manage content structure separately from how it will be displayed.",{"type":268},{"type":268},{"type":268},{"text":296,"type":14,"marks":891},[892],{"type":635},{"type":268},{"text":895,"type":14},"Shopify is now more than just an e-commerce platform—it can also function as a content management system, making a separate CMS unnecessary in some cases. ",{"type":268},{"type":268},{"text":899,"type":14},"A great example is the Lockcard configurator, where we used the existing Shopify setup, which even handled the management of 3D models. ",{"type":268},{"type":268},{"type":268},{"text":904,"type":14},"Both platforms allow for sophisticated roles and permissions management, support multi-language content, and provide extensive API support for seamless integration. ",{"type":268},{"type":268},{"text":908,"type":14},"However, Storyblok’s easy-to-navigate folder structure and real-time editing experience make it a favorite for content creators, while Contentful’s flexibility and API strength make it ideal for developers managing complex content needs.",{"id":910,"order":911,"mediaContent":912},"cm98pazxa01gic8nkyuqujj0n",5,{"id":913,"media":914,"caption":918},"cm98pazxa01gjc8nkyhgw83gl",{"width":41,"height":41,"id":915,"url":916,"alt":917,"type":40},"cm98pazwe01frc8nkb0zpyqx7","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002Fc725d0a1-3174-4520-9b5c-e045c0f2e96d","Next Js vs Vue Js",{"id":919,"language":11,"value":920,"type":14},"cm98pazxa01gkc8nky141tmxz",{"type":18,"content":921},[922],{"type":21,"content":923},[924,928],{"text":925,"type":14,"marks":926},"Comparison of Next.js and Vue.js",[927],{"type":635},{"text":929,"type":14}," – two popular front-end frameworks used for building custom Shopify storefronts, highlighting differences in performance, flexibility, learning curve, and community support.",{"id":931,"order":58,"textContent":932},"cm98pazxb01gmc8nkrhrfl533",{"id":933,"content":934},"cm98pazxb01gnc8nkm4uz7uey",{"id":935,"language":11,"value":936,"type":25},"cm98pazxc01goc8nk10t9va3q",{"type":18,"content":937},[938,943],{"type":607,"attrs":939,"content":940},{"level":291},[941],{"text":942,"type":14},"Front-End Libraries: Next.js vs. Vue.js",{"type":21,"content":944},[945,947,948,949,950,954,957,959,960,961,963,964,965,967,968,969,970,974,975,977,978,979,981,982,983,985,986,987,989,990,991],{"text":946,"type":14},"When choosing a front-end library for your custom Shopify storefront, both Next.js and Vue.js offer strong options, each with distinct pros and cons.",{"type":268},{"type":268},{"type":268},{"text":951,"type":14,"marks":952},"Next.js",[953],{"type":635},{"type":268,"marks":955},[956],{"type":635},{"text":958,"type":14},"Next.js is built on React, which powers over 40% of websites using front-end frameworks, making it a solid choice due to its vast developer community and extensive resources. One of Next.js’s standout features is its support for Framer Motion, a powerful animation library that allows for smooth, modern animations, giving you the ability to create engaging, dynamic interfaces.",{"type":268},{"type":268},{"text":962,"type":14},"Next.js also offers server-side rendering (SSR) and static site generation (SSG) out of the box, leading to faster load times and better SEO. The large React ecosystem means there is a huge talent pool of developers familiar with this framework, which makes hiring and scaling easier.",{"type":268},{"type":268},{"text":966,"type":14},"However, one downside of Next.js is that because it's built on React, which is primarily a library for building UIs, you may need to rely on additional tools and libraries for things like global state management (such as Redux or Recoil), which adds complexity to the project.",{"type":268},{"type":268},{"type":268},{"text":971,"type":14,"marks":972},"Vue.js",[973],{"type":635},{"type":268},{"text":976,"type":14},"Vue.js, on the other hand, is known for being lightweight and more intuitive, especially for developers who are new to front-end frameworks. It has a clean structure and a simple learning curve compared to React, which makes it appealing to small-to-medium projects.",{"type":268},{"type":268},{"text":980,"type":14},"Vue.js offers its own reactivity system without needing extra libraries, simplifying state management for smaller applications. While Vue.js has a smaller market share (around 19%) compared to React, it is still widely adopted, especially in Europe and Asia.",{"type":268},{"type":268},{"text":984,"type":14},"The Vue community is growing, but it may be harder to find experienced Vue.js developers compared to the React ecosystem.",{"type":268},{"type":268},{"text":988,"type":14},"Vue.js also lacks some built-in features, such as SSR, which can be added via Nuxt.js, but this increases the learning curve. ",{"type":268},{"type":268},{"text":992,"type":14},"However, for developers who prefer simplicity and a clean structure, Vue.js is an excellent option.",[994],{"id":995,"name":392,"role":996,"description":997,"profilePicture":1001},"b7c4cc85-af71-4ac3-baa5-147e63fd900d","Author",{"id":998,"language":11,"value":999,"type":14},"cm98pazvo01fmc8nk22m8m2lz",{"text":1000},"Thank you for reading this article. If you’d like to learn more about this project or explore ways to collaborate, I’d be happy to connect. Just reach out, and let’s start a conversation.",{"width":41,"height":41,"id":1002,"url":1003,"alt":1004,"type":40},"cm98pazvp01foc8nk7osqf0uk","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002F4701cbe6-fd61-4287-86f8-8e13def323f6","Thomas Fichtner Chefentwickler @ Söhne & Co",{"article":581,"preview":1006,"slug":110},["Reactive",87]]