[{"data":1,"prerenderedAt":633},["ShallowReactive",2],{"bootstrap":3,"blog-how-to-build-an-ecommerce-website-with-commerce-layer-demo-store":277},{"navigation":4,"globalConfig":196,"forms":218},{"headerSections":5,"headerFooterLinks":67,"footer":76,"legalLinks":153,"socialLinks":176},[6,39,44,50,57,62],{"hasSubMenu":7,"title":8,"links":9,"columns":38},true,"Product",[10,20,26,32],{"showTag":11,"_modelApiKey":12,"text":13,"subtitle":14,"icon":15,"isExternal":11,"link":16,"openForm":11},false,"navigation_link","Universal checkout","Sell anywhere","globe-simple",{"_modelApiKey":17,"slug":18,"title":19},"page","universal-checkout","Universal Checkout",{"showTag":11,"_modelApiKey":12,"text":21,"subtitle":22,"icon":23,"isExternal":11,"link":24,"openForm":11},"Distributed OMS","Manage orders","package",{"_modelApiKey":17,"slug":25,"title":21},"distributed-oms",{"showTag":11,"_modelApiKey":12,"text":27,"subtitle":28,"icon":29,"isExternal":11,"link":30,"openForm":11},"Promotion engine","Automated discounts","seal-percent",{"_modelApiKey":17,"slug":31,"title":27},"promotion-engine",{"showTag":11,"_modelApiKey":12,"text":33,"subtitle":34,"icon":35,"isExternal":11,"link":36,"openForm":11},"POS system","Operate stores","devices",{"_modelApiKey":17,"slug":37,"title":33},"pos-system",2,{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":40,"isExternal":11,"link":41,"openForm":11,"title":40},"Pricing",{"_modelApiKey":42,"slug":43},"pricing_page","pricing",{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":45,"isExternal":11,"link":46,"openForm":11,"title":45},"Customers",{"_modelApiKey":47,"slug":48,"title":49},"customer_landing_page","customers","Customers page",{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":51,"isExternal":11,"link":52,"openForm":11,"form":54,"title":51},"Partners",{"_modelApiKey":17,"slug":53,"title":51},"partners",{"_modelApiKey":55,"slug":53,"name":56},"form","PartnersForm",{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":58,"label":59,"isExternal":7,"url":60,"openForm":11,"title":61},"Docs Hub","Learn more","https:\u002F\u002Fdocs.commercelayer.io\u002F","Docs",{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":63,"isExternal":11,"link":64,"openForm":11,"title":63},"Blog",{"_modelApiKey":65,"slug":66},"blog_landing_page","blog",[68,72],{"text":69,"link":70},"Sign in",{"_modelApiKey":12,"text":69,"isExternal":7,"url":71,"openForm":11},"https:\u002F\u002Fdashboard.commercelayer.io\u002Fsign_in",{"text":73,"link":74},"Sign up for free",{"_modelApiKey":12,"text":73,"isExternal":7,"url":75,"openForm":11},"https:\u002F\u002Fdashboard.commercelayer.io\u002Fsign_up",[77,89,109,132],{"hasSubMenu":7,"title":8,"links":78},[79,81,83,85,87],{"showTag":11,"_modelApiKey":12,"text":13,"subtitle":14,"icon":15,"isExternal":11,"link":80,"openForm":11},{"_modelApiKey":17,"slug":18,"title":19},{"showTag":11,"_modelApiKey":12,"text":21,"subtitle":22,"icon":23,"isExternal":11,"link":82,"openForm":11},{"_modelApiKey":17,"slug":25,"title":21},{"showTag":11,"_modelApiKey":12,"text":27,"subtitle":28,"icon":29,"isExternal":11,"link":84,"openForm":11},{"_modelApiKey":17,"slug":31,"title":27},{"showTag":11,"_modelApiKey":12,"text":33,"subtitle":34,"icon":35,"isExternal":11,"link":86,"openForm":11},{"_modelApiKey":17,"slug":37,"title":33},{"showTag":11,"_modelApiKey":12,"text":40,"isExternal":11,"link":88,"openForm":11},{"_modelApiKey":42,"slug":43},{"hasSubMenu":7,"title":90,"links":91},"Resources",[92,94,99,104,107],{"showTag":11,"_modelApiKey":12,"text":93,"isExternal":7,"url":60,"openForm":11},"Documentation",{"showTag":11,"_modelApiKey":12,"text":95,"label":95,"isExternal":11,"link":96,"openForm":11},"Agentic Commerce",{"_modelApiKey":17,"slug":97,"title":98},"agentic-commerce-whitepaper","Agentic Commerce Whitepaper",{"showTag":11,"_modelApiKey":12,"text":100,"isExternal":11,"link":101,"openForm":11},"Core concepts",{"_modelApiKey":17,"slug":102,"title":103},"headless-commerce","Headless commerce",{"showTag":11,"_modelApiKey":12,"text":105,"isExternal":7,"url":106,"openForm":11},"Changelog","https:\u002F\u002Fdocs.commercelayer.io\u002Fchangelog\u002F",{"showTag":11,"_modelApiKey":12,"text":63,"isExternal":11,"link":108,"openForm":11},{"_modelApiKey":65,"slug":66},{"hasSubMenu":7,"title":110,"links":111},"Company",[112,116,118,121,126],{"showTag":11,"_modelApiKey":12,"text":113,"isExternal":11,"link":114,"openForm":11},"Vision",{"_modelApiKey":17,"slug":115,"title":113},"vision",{"showTag":11,"_modelApiKey":12,"text":45,"isExternal":11,"link":117,"openForm":11},{"_modelApiKey":47,"slug":48,"title":49},{"showTag":11,"_modelApiKey":12,"text":51,"isExternal":11,"link":119,"openForm":11,"form":120},{"_modelApiKey":17,"slug":53,"title":51},{"_modelApiKey":55,"slug":53,"name":56},{"showTag":11,"_modelApiKey":12,"text":122,"isExternal":11,"link":123,"openForm":11},"Security",{"_modelApiKey":17,"slug":124,"title":125},"security","Security at Commerce Layer",{"showTag":11,"_modelApiKey":12,"text":127,"label":128,"isExternal":11,"openForm":7,"form":129},"Giveback","Giveback program",{"_modelApiKey":55,"slug":130,"name":131},"giveback","GivebackForm",{"hasSubMenu":7,"title":133,"links":134},"Get in touch",[135,140,145,149],{"showTag":11,"_modelApiKey":12,"text":136,"isExternal":11,"openForm":7,"form":137},"Contact",{"_modelApiKey":55,"slug":138,"name":139},"contact","ContactUsForm",{"showTag":11,"_modelApiKey":12,"text":141,"isExternal":11,"openForm":7,"form":142},"Book a demo",{"_modelApiKey":55,"slug":143,"name":144},"demo","RequestDemoForm",{"showTag":11,"_modelApiKey":12,"text":146,"label":147,"isExternal":7,"url":148,"openForm":11},"Support","Email support","mailto:support@commercelayer.io",{"showTag":11,"_modelApiKey":12,"text":150,"label":151,"isExternal":7,"url":152,"openForm":11},"Community","Discord community","https:\u002F\u002Fdiscord.gg\u002Fcommercelayer",{"hasSubMenu":7,"title":154,"links":155},"Legal",[156,161,165,169,173],{"showTag":11,"_modelApiKey":12,"text":157,"label":158,"isExternal":7,"url":159,"openForm":11,"htmlClassNames":160},"Terms","Terms and conditions","\u002Flegal-embed\u002Fterms-of-service","iubenda-nostyle no-brand iubenda-noiframe iubenda-embed",{"showTag":11,"_modelApiKey":12,"text":162,"label":163,"isExternal":7,"url":164,"openForm":11,"htmlClassNames":160},"Privacy","Privacy policy","\u002Flegal-embed\u002Fprivacy-policy",{"showTag":11,"_modelApiKey":12,"text":166,"label":167,"isExternal":7,"url":168,"openForm":11,"htmlClassNames":160},"Cookies","Cookie policy","\u002Flegal-embed\u002Fcookie-policy",{"showTag":11,"_modelApiKey":12,"text":170,"isExternal":7,"url":171,"openForm":11,"htmlClassNames":172},"Notice at collection","#","iubenda-cs-uspr-link",{"showTag":11,"_modelApiKey":12,"text":174,"isExternal":7,"url":171,"openForm":11,"htmlClassNames":175},"Privacy preferences","iubenda-cs-preferences-link",[177,180,184,188,192],{"title":178,"type":179,"url":152,"isExternal":7},"Discord","discord-logo",{"title":181,"type":182,"url":183,"isExternal":7},"Github","github","https:\u002F\u002Fgithub.com\u002Fcommercelayer",{"title":185,"type":186,"url":187,"isExternal":7},"Bluesky","bluesky-logo","https:\u002F\u002Fbsky.app\u002Fprofile\u002Fcommercelayer.io",{"title":189,"type":190,"url":191,"isExternal":7},"X","x-logo","https:\u002F\u002Fx.com\u002Fcommercelayer",{"title":193,"type":194,"url":195,"isExternal":7},"LinkedIn","linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fcommerce-layer",{"pagesWithoutCtaPanel":197,"ctaPanel":198,"notification":208,"showApiResponseTime":11,"newsletterSignup":216},[],{"title":199,"subtitle":200,"ctas":201},"Ready to get started?","Discover how we can help your business.",[202,205],{"_modelApiKey":203,"text":204,"isExternal":7,"url":75,"openForm":11},"link","Get started for free",{"_modelApiKey":203,"text":206,"isExternal":11,"openForm":7,"form":207},"Contact us",{"_modelApiKey":55,"slug":138,"name":139},{"showNotification":7,"link":209,"linkText":210,"text":215},{"_modelApiKey":203,"text":210,"isExternal":11,"link":211,"openForm":11},"Read article",{"_modelApiKey":212,"slug":213,"title":214},"blog_post","payment-api-redesigned","Introducing our new Payments API. For humans and agents.","\u003Cp>Introducing our new Payments API. For humans and agents.\u003C\u002Fp>\n",{"ctaText":217},"Subscribe",[219,225,229,236,240,246,249,253,261,262,267,272,274],{"_modelApiKey":55,"slug":220,"pardotFormEmbedCode":221,"formEmbedMinHeight":222,"successTitle":223,"successCopy":224},"agentic-commerce","https:\u002F\u002Fcommercelayer.fillout.com\u002Ft\u002F5w4Khwgxr6us?whitepaper=agentic",520,"Thank you for your request!","We’ll be in touch soon to arrange a date and time for your personalized demo.",{"_modelApiKey":55,"slug":226,"pardotFormEmbedCode":227,"formEmbedMinHeight":228,"successTitle":223,"successCopy":224},"shopify","https:\u002F\u002Fform.fillout.com\u002Ft\u002FgVnLSmKZwRus",850,{"_modelApiKey":55,"slug":130,"pardotFormEmbedCode":230,"formEmbedMinHeight":231,"displayTitle":232,"copy":233,"successTitle":234,"successCopy":235},"https:\u002F\u002Fform.fillout.com\u002Ft\u002FmVDF8aAiofus",500,"We give back.","\u003Cp>Part of Commerce Layer's company ethos is to empathize and support one another: co-workers, customers, and community. We want to do our part to help nonprofit organizations and small businesses who may feel adversely affected by the current global economic climate, and as a result, need in-kind support to reach their customers.\u003C\u002Fp>\n\n\u003Cp>If this general description matches your organization’s needs, please tell us your story by completing the following form so we can consider helping your cause.\u003C\u002Fp>\n","Thank you!","We will contact you soon to learn more about your story.",{"_modelApiKey":55,"slug":237,"pardotFormEmbedCode":227,"formEmbedMinHeight":228,"displayTitle":238,"copy":239},"book-an-onboarding-session","Book an onboarding session","\u003Cp>Schedule some time and our devs will help you set up a Commerce Layer + Sanity store.\u003C\u002Fp>\n",{"_modelApiKey":55,"slug":241,"pardotFormEmbedCode":242,"formEmbedMinHeight":243,"displayTitle":244,"successTitle":234,"successCopy":245},"download-our-whitepaper","https:\u002F\u002Fform.fillout.com\u002Ft\u002F5YPWmy8oT7us?whitepaper=ComposableCommerce",450,"Download our whitepaper.","Check your inbox. You should receive a download link soon.",{"_modelApiKey":55,"slug":247,"pardotFormEmbedCode":248,"formEmbedMinHeight":243,"displayTitle":244,"successTitle":234,"successCopy":245},"download-the-content-and-commerce-whitepaper","https:\u002F\u002Fform.fillout.com\u002Ft\u002F5YPWmy8oT7us?whitepaper=ContentAndCommerce",{"_modelApiKey":55,"slug":250,"pardotFormEmbedCode":251,"formEmbedMinHeight":243,"displayTitle":244,"copy":252,"successTitle":234,"successCopy":245},"whitepaper","https:\u002F\u002Fform.fillout.com\u002Ft\u002F5YPWmy8oT7us?whitepaper=Jamstack","\u003Cp>Commerce Layer is the perfect platform for building commerce on the Jamstack. Convert any design into pixel perfect HTML pages. Connect a best-of-breed headless CMS. Go serverless and forget the hassle of managing complex infrastructures.\u003C\u002Fp>\n",{"_modelApiKey":55,"slug":254,"pardotFormEmbedCode":255,"formEmbedMinHeight":256,"displayTitle":257,"copy":258,"successTitle":259,"successCopy":260},"contact-links","https:\u002F\u002Fform.fillout.com\u002Ft\u002FeWPyhHGHT7us",750,"Contact us.","\u003Cp>Tell us about your project. Our team will reach out to you for a personalized offer.\u003C\u002Fp>\n","Thanks for your message!","We’ll be in touch soon to discuss your project details.",{"_modelApiKey":55,"slug":138,"pardotFormEmbedCode":255,"formEmbedMinHeight":256,"displayTitle":257,"copy":258,"successTitle":259,"successCopy":260},{"_modelApiKey":55,"slug":263,"pardotFormEmbedCode":227,"formEmbedMinHeight":228,"displayTitle":264,"successTitle":265,"successCopy":266},"demo-embed","Want to see it in action? Request a demo.","Thanks for your request!","We’ll be in touch soon to arrange a date and time for your free live demo.",{"_modelApiKey":55,"slug":53,"pardotFormEmbedCode":268,"formEmbedMinHeight":228,"displayTitle":269,"copy":270,"successTitle":234,"successCopy":271},"https:\u002F\u002Fform.fillout.com\u002Ft\u002F9MTkDWMUSqus","Become our partner.","\u003Cp>Join us and get our guidance in helping your clients succeed. Our partners are our ambassadors. We are committed to your success as much as you are.\u003C\u002Fp>\n","We will contact you soon to discuss the details of our partnership.",{"_modelApiKey":55,"slug":273,"pardotFormEmbedCode":268,"formEmbedMinHeight":228,"displayTitle":269,"copy":270,"successTitle":234,"successCopy":271},"partners-embed",{"_modelApiKey":55,"slug":143,"pardotFormEmbedCode":227,"formEmbedMinHeight":228,"displayTitle":275,"copy":276,"successTitle":265,"successCopy":266},"Get a free live demo.","\u003Cp>Get a personalized demo and learn more about what Commerce Layer can do for your company.\u003C\u002Fp>\n",{"_modelApiKey":212,"link":278,"subtitle":283,"date":283,"author":284,"additionalAuthors":294,"icon":295,"abstract":296,"tag":297,"displayTitle":279,"cardRatio":300,"featured":11,"seoMetaTags":301,"layout":365,"blogPostCarousel":526,"_seoMetaTags":594,"authors":628},{"text":279,"isExternal":11,"url":280,"link":281},"How to build an ecommerce website with Commerce Layer Demo Store.","",{"_modelApiKey":212,"slug":282},"how-to-build-an-ecommerce-website-with-commerce-layer-demo-store","January 17, 2023",{"name":285,"picture":286},"Bolaji Ayodeji",{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":291,"customData":293},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1643036479-bolaji.jpg","Bolaji Ayodeji — Developer Advocate at Commerce Layer",1280,"jpg",{"x":292,"y":292},0.5,{},[],"storefront","Learn how to build a sleek, modern, and user-friendly conference swag digital store using composable commerce APIs, micro-frontends, and the Commerce Layer Nextjs Demo Store project. ",{"color":298,"name":299},"gray","Tutorials","portrait",[302,306,310,313,317,320,323,327,331,335,338,342,346,350,354,357,361],{"attributes":303,"tag":304,"content":305},null,"title","Build an Ecommerce Website with Commerce Layer Demo Store",{"attributes":307,"tag":309,"content":303},{"property":308,"content":305},"og:title","meta",{"attributes":311,"tag":309,"content":303},{"name":312,"content":305},"twitter:title",{"attributes":314,"tag":309,"content":303},{"name":315,"content":316},"description","This tutorial will walk you through the process of building a conference swag digital store using Commerce Layer's Nextjs Demo Store project. ",{"attributes":318,"tag":309,"content":303},{"property":319,"content":316},"og:description",{"attributes":321,"tag":309,"content":303},{"name":322,"content":316},"twitter:description",{"attributes":324,"tag":309,"content":303},{"property":325,"content":326},"og:image","https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1673528587-how-to-demo-store_1200-x-630-with-padding-01.jpg?auto=format&fit=max&w=1200",{"attributes":328,"tag":309,"content":303},{"property":329,"content":330},"og:image:width","1200",{"attributes":332,"tag":309,"content":303},{"property":333,"content":334},"og:image:height","630",{"attributes":336,"tag":309,"content":303},{"name":337,"content":326},"twitter:image",{"attributes":339,"tag":309,"content":303},{"property":340,"content":341},"og:locale","en",{"attributes":343,"tag":309,"content":303},{"property":344,"content":345},"og:type","article",{"attributes":347,"tag":309,"content":303},{"property":348,"content":349},"og:site_name","Commerce Layer",{"attributes":351,"tag":309,"content":303},{"property":352,"content":353},"article:modified_time","2025-10-08T16:23:06Z",{"attributes":355,"tag":309,"content":303},{"property":356,"content":280},"article:publisher",{"attributes":358,"tag":309,"content":303},{"name":359,"content":360},"twitter:card","summary_large_image",{"attributes":362,"tag":309,"content":303},{"name":363,"content":364},"twitter:site","@commercelayer",[366,372,383,386,392,395,403,406,414,417,425,428,433,436,438,441,444,447,449,452,454,457,459,462,464,467,469,472,474,481,484,486,489,492,497,500,502,505,507,510,512,515,518,521],{"_modelApiKey":367,"copy":368,"listStyle":369,"darkTheme":11,"buttons":370,"color":371,"indent":7},"wysiwyg","\u003Cp>Have you ever wanted to learn how to build an ecommerce website as a developer? Look no further! In this article, we’ll walk you through the process of building a sleek, modern, and user-friendly conference swag digital store using composable commerce APIs, micro-frontends, and the Commerce Layer Nextjs Demo Store project. With the help of this powerful tool, you'll be able to create a visually appealing and functional international ecommerce website that is optimized for success. We'll show you step-by-step how to set up your store, add commerce data, and deploy your website in no time. Let’s get started!\u003C\u002Fp>\n","directional",[],"red",{"_modelApiKey":373,"border":11,"caption":280,"image":374,"size":382,"darkTheme":11,"rounded":7,"color":371},"image_block",{"url":375,"alt":376,"title":376,"width":377,"height":378,"format":379,"focalPoint":380,"customData":381},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1672937067-demo-store-sample.png","Sample Demo Store",2784,1774,"png",{"x":292,"y":292},{},"standard",{"_modelApiKey":367,"copy":384,"listStyle":369,"darkTheme":11,"buttons":385,"color":371,"indent":11},"\u003Chr>\n\n\u003Ch3>Prerequisites\u003C\u002Fh3>\n\n\u003Col>\n\u003Cli>Some JavaScript, command-line, and API knowledge are required.\u003C\u002Fli>\n\u003Cli>A working programming IDE.\u003C\u002Fli>\n\u003Cli>A stable internet connection.\u003C\u002Fli>\n\u003Cli>Optionally, you can study these \u003Ca href=\"https:\u002F\u002Fcommercelayer.io\u002Fdocs\u002Fdata-model\" target=\"_blank\" rel=\"noopener noreferrer\">data models\u003C\u002Fa> to understand the key Commerce Layer API entities, their mutual relationships, and common usage.\u003C\u002Fli>\n\u003C\u002Fol>\n\n\u003Chr>\n\n\u003Ch3>How it works\u003C\u002Fh3>\n\n\u003Cp>The Demo Store project is a static ecommerce solution with no third-party services required, so you can easily tailor your own with different levels of customization. As such, even content is stored as JSON files. The Demo Store comes with:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>A full product catalog management with taxonomies and taxons.\u003C\u002Fli>\n\u003Cli>Single product variants management.\u003C\u002Fli>\n\u003Cli>Multi-language capabilities to make selling internationally easier.\u003C\u002Fli>\n\u003Cli>A built-in search engine with a faceted search (filtered search).\u003C\u002Fli>\n\u003Cli>An extensive set of features provided out of the box by Commerce Layer APIs (multiple currency price lists, inventory models that support multiple stock locations and fulfillment strategies, market-specific payment gateways, delivery options, carrier accounts, etc.).\u003C\u002Fli>\n\u003C\u002Ful>\n",[],{"_modelApiKey":373,"border":11,"caption":280,"image":387,"size":382,"darkTheme":11,"rounded":7,"color":371},{"url":388,"alt":389,"title":389,"width":377,"height":378,"format":379,"focalPoint":390,"customData":391},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1672937606-demo-store-product-page.png","Demo Store Product Page",{"x":292,"y":292},{},{"_modelApiKey":367,"copy":393,"listStyle":369,"darkTheme":11,"buttons":394,"color":371,"indent":11},"\u003Cp>In the sections below, I’d show you how to set up and configure your own ecommerce store using the demo store project. Ready? Let’s go!\u003C\u002Fp>\n",[],{"_modelApiKey":396,"title":397,"preTitle":398,"linkText":399,"darkTheme":11,"link":400},"link_block","Demo Store Project","Open-source","View on GitHub",{"_modelApiKey":203,"text":401,"label":280,"subtitle":280,"icon":280,"isExternal":7,"url":402,"link":303,"anchor":280,"openForm":11,"form":303,"htmlClassNames":280},"Demo Store GitHub Repo","https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fdemo-store",{"_modelApiKey":367,"copy":404,"listStyle":369,"darkTheme":11,"buttons":405,"color":371,"indent":11},"\u003Ch4>Get your API credentials\u003C\u002Fh4>\n\n\u003Cp>The demo store project is powered by Commerce Layer, Nextjs, TypeScript, and other internal\u002Fexternal tools. You can explore our API resources in these \u003Ca href=\"https:\u002F\u002Fwww.postman.com\u002Fcommercelayer\">Postman collections\u003C\u002Fa> to test specific resources and see how they all work. To get started, all requests to Commerce Layer API must be authenticated with an \u003Ca href=\"https:\u002F\u002Foauth.net\u002F2\">OAuth2\u003C\u002Fa> bearer token. You need to execute an authorization flow using a valid application type as the client to get an access token. Each application type has its usage, authentication flow, and permissions. The application type can be authenticated with different authorization grant flows using the available authorization grant types as described in the table below:\u003C\u002Fp>\n",[],{"_modelApiKey":373,"border":11,"caption":280,"image":407,"size":382,"darkTheme":11,"rounded":7,"color":371},{"url":408,"alt":409,"title":409,"width":410,"height":411,"format":412,"focalPoint":303,"customData":413},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1649756685-authorization-flows-table.svg","Authorization flows table",1660,545,"svg",{},{"_modelApiKey":367,"copy":415,"listStyle":369,"darkTheme":11,"buttons":416,"color":371,"indent":11},"\u003Cp>Kindly create a Commerce Layer account \u003Ca href=\"https:\u002F\u002Fdashboard.commercelayer.io\u002Fsign_up\">here\u003C\u002Fa>, follow the onboarding tutorial to create an organization, and read \u003Ca href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fcore\u002Fapi-credentials\">this guide\u003C\u002Fa> from our documentation to learn how to create a sales channel and integration application type. When you are done creating them, save your organization slug, base endpoint, and the generated client ID and client secret credential — we will use this to configure the demo store and seed some demo data shortly.\u003C\u002Fp>\n\n\u003Ch4>Install and configure the Demo Store\u003C\u002Fh4>\n\n\u003Cp>The Demo Store project is a GitHub template that uses the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fdemo-store-core\">demo-store-core\u003C\u002Fa> repository as a \u003Ca href=\"https:\u002F\u002Fgit-scm.com\u002Fbook\u002Fen\u002Fv2\u002FGit-Tools-Submodules\">git submodule\u003C\u002Fa>. This will retain the features, look, and feel of the default Demo Store. With this, you won't have to care about the whole source code but instead focus on your data\u002Fcontent and easily get free updates with almost no risk just by running the \u003Ccode>git submodule update --remote && npm install\u003C\u002Fcode> command. Kindly follow the steps below to get started:\u003C\u002Fp>\n\n\u003Ch5>\u003Cstrong>1. Select the template\u003C\u002Fstrong>\u003C\u002Fh5>\n\n\u003Cp>Click on the "Use this template" button from the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fdemo-store\">demo-store\u003C\u002Fa>'s homepage on GitHub as seen in the screenshot below.\u003C\u002Fp>\n",[],{"_modelApiKey":373,"border":11,"caption":280,"image":418,"size":382,"darkTheme":11,"rounded":7,"color":371},{"url":419,"alt":420,"title":420,"width":421,"height":422,"format":379,"focalPoint":423,"customData":424},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1672989661-screenshot-2023-01-06-at-08-18-03.png","GitHub template demo",1832,142,{"x":292,"y":292},{},{"_modelApiKey":367,"copy":426,"listStyle":369,"darkTheme":11,"buttons":427,"color":371,"indent":11},"\u003Ch5>\u003Cstrong>2. Clone the forked repository\u003C\u002Fstrong>\u003C\u002Fh5>\n\n\u003Cp>Run the following commands to clone the forked repository to your local computer and install the required dependencies:\u003C\u002Fp>\n",[],{"_modelApiKey":429,"code":430,"showLineNumbers":11,"highlightLines":280,"language":431,"size":432},"code_block","git clone \u003Cyour-repository-url> my-new-demo-store\ncd my-new-demo-store\ngit submodule update --init\nnpm install","shell","Standard",{"_modelApiKey":367,"copy":434,"listStyle":369,"darkTheme":11,"buttons":435,"color":371,"indent":11},"\u003Ch5>\u003Cstrong>3. Copy the required files\u003C\u002Fstrong>\u003C\u002Fh5>\n\n\u003Cp>Run the following commands to copy all the required environment variables and data files into your demo store:\u003C\u002Fp>\n",[],{"_modelApiKey":429,"code":437,"showLineNumbers":11,"highlightLines":280,"language":431,"size":432},"\ncp -r .\u002Fdemo-store-core\u002Fpackages\u002Fwebsite\u002Fdata\u002Fjson .\u002Fdata\u002Fjson\n\ncp -r .\u002Fdemo-store-core\u002Fpackages\u002Fwebsite\u002Flocales .\u002Fdata\u002Flocales\n\ncp -r .\u002Fdemo-store-core\u002Fpackages\u002Fwebsite\u002Fconfig .\u002Fconfig",{"_modelApiKey":367,"copy":439,"listStyle":369,"darkTheme":11,"buttons":440,"color":371,"indent":11},"\u003Ch5>\u003Cstrong>4. Add some environment variables\u003C\u002Fstrong>\u003C\u002Fh5>\n\n\u003Cp>Create a \u003Ccode>.env.local\u003C\u002Fcode> file and add the following variables, including your previously created sales channel application credentials (client ID and base endpoint):\u003C\u002Fp>\n",[],{"_modelApiKey":429,"code":442,"showLineNumbers":11,"highlightLines":280,"language":443,"size":432},"SITE_URL=http:\u002F\u002Flocalhost:3000\nNEXT_PUBLIC_CL_CLIENT_ID=coF7ofOKxTlbYfN...\nNEXT_PUBLIC_CL_ENDPOINT=https:\u002F\u002Fyour-demo-store.commercelayer.io\n\nNEXT_PUBLIC_JSON_DATA_FOLDER=..\u002F..\u002F..\u002Fdata\u002Fjson\u002F\nNEXT_PUBLIC_LOCALES_DATA_FOLDER=..\u002F..\u002F..\u002Fdata\u002Flocales\u002F\nNEXT_PUBLIC_CONFIG_FOLDER=..\u002F..\u002F..\u002Fconfig\u002F","markup",{"_modelApiKey":367,"copy":445,"listStyle":369,"darkTheme":11,"buttons":446,"color":371,"indent":11},"\u003Ch4>Seed Organization with Demo Data\u003C\u002Fh4>\n\n\u003Cp>To create an ecommerce store, you need to add some commerce resources to your organization. Suppose this is your first time doing something like this. In that case, you can easily seed your organization automatically with demo data and use that to learn about the key commerce resources required. When you’re ready, you can add the actual data for your ecommerce store. Kindly follow the steps below to seed your newly created Commerce Layer organization:\u003C\u002Fp>\n\n\u003Ch5>\u003Cstrong>1. Install the Commerce Layer CLI\u003C\u002Fstrong>\u003C\u002Fh5>\n\n\u003Cp>Install the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fcommercelayer-cli\">Commerce Layer CLI\u003C\u002Fa> using the command (this will give you access to the `cl` command):\u003C\u002Fp>\n",[],{"_modelApiKey":429,"code":448,"showLineNumbers":11,"highlightLines":280,"language":431,"size":432},"npm install -g @commercelayer\u002Fcli\n\nor\n\nyarn global add @commercelayer\u002Fcli",{"_modelApiKey":367,"copy":450,"listStyle":369,"darkTheme":11,"buttons":451,"color":371,"indent":11},"\u003Ch5>\u003Cstrong>2. Install the required CLI plugins\u003C\u002Fstrong>\u003C\u002Fh5>\n\n\u003Cp>Install the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fcommercelayer-cli-plugin-seeder\">seeder plugin\u003C\u002Fa> and the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fcommercelayer-cli-plugin-imports\">imports plugin\u003C\u002Fa> using the command:\u003C\u002Fp>\n",[],{"_modelApiKey":429,"code":453,"showLineNumbers":11,"highlightLines":280,"language":431,"size":432},"cl plugins:install seeder\ncl plugins:install imports",{"_modelApiKey":367,"copy":455,"listStyle":369,"darkTheme":11,"buttons":456,"color":371,"indent":11},"\u003Ch5>\u003Cstrong>3. Log into the CLI\u003C\u002Fstrong>\u003C\u002Fh5>\n\n\u003Cp>Log into the CLI with your previously created integration application credentials like so:\u003C\u002Fp>\n",[],{"_modelApiKey":429,"code":458,"showLineNumbers":11,"highlightLines":280,"language":431,"size":432},"cl applications:login \\\n  --clientId Oy5F2TbPYhOZsxy1tQd9ZVZ... \\\n  --clientSecret 1ZHNJUgn_1lh1mel06gGDqa... \\\n  --organization your-demo-store \\\n  --alias cli-admin",{"_modelApiKey":367,"copy":460,"listStyle":369,"darkTheme":11,"buttons":461,"color":371,"indent":11},"\u003Ch5>\u003Cstrong>4. Seed your commerce organization\u003C\u002Fstrong>\u003C\u002Fh5>\n\n\u003Cp>Run the command below to populate your organization with all the resources you need to build a multi-market ecommerce with Commerce Layer (this includes markets, SKUs, prices, inventory, stock locations, etc.):\u003C\u002Fp>\n",[],{"_modelApiKey":429,"code":463,"showLineNumbers":11,"highlightLines":280,"language":431,"size":432},"npm run seeder:seed -ws --if-present",{"_modelApiKey":367,"copy":465,"listStyle":369,"darkTheme":11,"buttons":466,"color":371,"indent":11},"\u003Ch5>\u003Cstrong>5. Seed your commerce organization (if the previous step fails)\u003C\u002Fstrong>\u003C\u002Fh5>\n\n\u003Cp>If the command above fails with errors (usually because of unstable internet), you can seed your organization with sample data using the command like so (but this process will take a bit more time):\u003C\u002Fp>\n",[],{"_modelApiKey":429,"code":468,"showLineNumbers":11,"highlightLines":280,"language":431,"size":432},"cl seeder:seed -b custom -n demo_store_full -u .\u002Fdemo-store-core\u002Fpackages\u002Fsetup\u002F",{"_modelApiKey":367,"copy":470,"listStyle":369,"darkTheme":11,"buttons":471,"color":371,"indent":11},"\u003Ch5>\u003Cstrong>6. Setup your market scopes\u003C\u002Fstrong>\u003C\u002Fh5>\n\n\u003Cp>The \u003Ccode>data\u002Fjson\u002Fcountries.json\u003C\u002Fcode> file contains a list of available countries for your ecommerce store. Choose the countries you want to start with and replace all findings of \u003Ccode>"market": xxxxx\u003C\u002Fcode> with the valid market scopes from your organization (you can find these in the sales channel application you created earlier).\u003C\u002Fp>\n\n\u003Ch5>\u003Cstrong>7. Start the development server\u003C\u002Fstrong>\u003C\u002Fh5>\n\n\u003Cp>Now, you can start the development server and visit \u003Ccode>http:\u002F\u002Flocalhost:3000\u003C\u002Fcode> to preview your ecommerce store like so:\u003C\u002Fp>\n",[],{"_modelApiKey":429,"code":473,"showLineNumbers":11,"highlightLines":280,"language":431,"size":432},"npm run dev",{"_modelApiKey":373,"border":11,"caption":280,"image":475,"size":382,"darkTheme":11,"rounded":7,"color":371},{"url":476,"alt":477,"title":477,"width":478,"height":378,"format":379,"focalPoint":479,"customData":480},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1672990567-demo-store-search-page.png","Demo store search page",2690,{"x":292,"y":292},{},{"_modelApiKey":367,"copy":482,"listStyle":369,"darkTheme":11,"buttons":483,"color":371,"indent":11},"\u003Cp>You must first select a country when you visit the homepage. When you select the United States, for example, you will be redirected to the \u003Ccode>http:\u002F\u002Flocalhost:3000\u002Fen-US\u002F\u003C\u002Fcode> path, which will return a shopping experience from the United States market in Commerce Layer with English content translations. Changing the language to French, for example, will redirect to a \u003Ccode>http:\u002F\u002Flocalhost:3000\u002Ffr-US\u003C\u002Fcode> page. Changing the country to Italy will return a shopping experience from the Europe market in Commerce Layer and redirect to a \u003Ccode>http:\u002F\u002Flocalhost:3000\u002Ffr-IT\u003C\u002Fcode> page. You can play around with it for other countries and languages.\u003C\u002Fp>\n\n\u003Cp>This is a fully-functional international ecommerce website with a multi-market setup, facet search, cart, and checkout in just a few minutes and fewer development efforts. Also, if you already have an existing CMS with content, you can still use that to generate the required content JSON file (we will show you how in a follow-up tutorial 😉). Now, you can go ahead and make transactional changes for each market in Commerce Layer, and your demo store will return the right experience to your users. Isn’t this cool?\u003C\u002Fp>\n\n\u003Cp>In the next section, you will learn how to do more by customizing your store and adding more translations, pages, countries, and other commerce resources.\u003C\u002Fp>\n\n\u003Ch4>Customizing your Demo Store\u003C\u002Fh4>\n\n\u003Cp>The Demo Store project is built around three main data elements stored as JSON files to decouple them from any third-party services you might want to add yourself. To customize your store, you'll have to create and manage these files.\u003C\u002Fp>\n\n\u003Col>\n\u003Cli>The \u003Cstrong>content\u003C\u002Fstrong> JSON files are located in the \u003Ccode>data\u002Fjson\u002F\u003C\u002Fcode> directory with different structured text and image content (here is \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FBolajiAyodeji\u002Fconf-swag-demo-store\u002Ftree\u002Fmaster\u002Fdata\u002Fjson\">a sample\u003C\u002Fa> from the finished code).\u003C\u002Fli>\n\u003Cli>The \u003Cstrong>locale\u003C\u002Fstrong> JSON files are located in the \u003Ccode>data\u002Flocales\u002F\u003C\u002Fcode> directory with a collection of language translation files (here is \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FBolajiAyodeji\u002Fconf-swag-demo-store\u002Ftree\u002Fmaster\u002Fdata\u002Flocales\">a sample\u003C\u002Fa> from the finished code with french and Italian translations).\u003C\u002Fli>\n\u003Cli>The \u003Cstrong>configuration\u003C\u002Fstrong> files are located in the \u003Ccode>config\u002F\u003C\u002Fcode> directory with some JS files that change the behavior of search facets and variants swatching for products with multiple variants (which in turn means the existence of multiple SKUs).\u003C\u002Fli>\n\u003C\u002Fol>\n\n\u003Cp>When you are done with any change, always ensure to check if everything is correct by running the command:\u003C\u002Fp>\n",[],{"_modelApiKey":429,"code":485,"showLineNumbers":11,"highlightLines":280,"language":431,"size":432},"npm run test:data",{"_modelApiKey":367,"copy":487,"listStyle":369,"darkTheme":11,"buttons":488,"color":371,"indent":11},"\u003Cp>You can take a look at \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FBolajiAyodeji\u002Fconf-swag-demo-store\">the finished code\u003C\u002Fa> to see all the extra pages and translation changes added to the demo conference swag ecommerce website.\u003C\u002Fp>\n",[],{"_modelApiKey":490,"copy":491,"color":371},"highlight_block","Alternatively, if you need to fully customize your store (behavior, UI, UX, etc.), then all you have to do is fork the demo-store-core repository, which contains the source code, follow the instructions to set things up locally and configure it as earlier discussed.",{"_modelApiKey":396,"title":493,"preTitle":494,"linkText":399,"darkTheme":11,"link":495},"Conf Swag Demo Store","Code demo",{"_modelApiKey":203,"text":493,"label":280,"subtitle":280,"icon":280,"isExternal":7,"url":496,"link":303,"anchor":280,"openForm":11,"form":303,"htmlClassNames":280},"https:\u002F\u002Fgithub.com\u002FBolajiAyodeji\u002Fconf-swag-demo-store",{"_modelApiKey":367,"copy":498,"listStyle":369,"darkTheme":11,"buttons":499,"color":371,"indent":11},"\u003Ch3>Deploying the Demo Store\u003C\u002Fh3>\n\n\u003Cp>There are two things you need to do before you deploy your store using your favorite hosting platforms (e.g., Netlify, Vercel, GitHub Pages, Cloudflare Pages, etc.):\u003C\u002Fp>\n\n\u003Col>\n\u003Cli>Add all the environment variables you currently have in \u003Ccode>.env.local\u003C\u002Fcode> to the deployment service you'll use to run the build.\u003C\u002Fli>\n\u003Cli>Decide if you want to use static site generation (SSG) or server-side rendering (SSR) in production.\u003C\u002Fli>\n\u003C\u002Fol>\n\n\u003Cp>The next sections will outline the steps required for each option.\u003C\u002Fp>\n\n\u003Ch4>Static site generation (SSG)\u003C\u002Fh4>\n\n\u003Ch5>\u003Cstrong>1. Update your .env.local file\u003C\u002Fstrong>\u003C\u002Fh5>\n\n\u003Cp>Add this in addition to other variables in your env file:\u003C\u002Fp>\n",[],{"_modelApiKey":429,"code":501,"showLineNumbers":11,"highlightLines":280,"language":443,"size":432},"NEXT_PUBLIC_DATA_FETCHING=ssg",{"_modelApiKey":367,"copy":503,"listStyle":369,"darkTheme":11,"buttons":504,"color":371,"indent":11},"\u003Ch5>\u003Cstrong>2. Build the website\u003C\u002Fstrong>\u003C\u002Fh5>\n\n\u003Cp>Run \u003Ccode>npm run export\u003C\u002Fcode> to create a static optimized production build of your application.\u003C\u002Fp>\n\n\u003Ch5>\u003Cstrong>3. Deploy the built website\u003C\u002Fstrong>\u003C\u002Fh5>\n\n\u003Cp>Copy the folder in \u003Ccode>demo-store-core\u002Fpackages\u002Fwebsite\u002Fout\u003C\u002Fcode> to your preferred static hosting.\u003C\u002Fp>\n\n\u003Ch4>Server-side rendering (SSR)\u003C\u002Fh4>\n\n\u003Ch5>\u003Cstrong>1. Update your .env.local file\u003C\u002Fstrong>\u003C\u002Fh5>\n\n\u003Cp>Add this in addition to other variables in your env file:\u003C\u002Fp>\n",[],{"_modelApiKey":429,"code":506,"showLineNumbers":11,"highlightLines":280,"language":443,"size":432},"NEXT_PUBLIC_DATA_FETCHING=ssr",{"_modelApiKey":367,"copy":508,"listStyle":369,"darkTheme":11,"buttons":509,"color":371,"indent":11},"\u003Ch5>\u003Cstrong>2. Setup your build directory\u003C\u002Fstrong>\u003C\u002Fh5>\n\n\u003Cp>Set the output directory in your deployment service to \u003Ccode>demo-store-core\u002Fpackages\u002Fwebsite\u002F.next\u003C\u002Fcode>.\u003C\u002Fp>\n\n\u003Ch5>\u003Cstrong>3. Setup your build command\u003C\u002Fstrong>\u003C\u002Fh5>\n\n\u003Cp>Set \u003Ccode>npm run build\u003C\u002Fcode> as your build command to create an optimized production build of your application.\u003C\u002Fp>\n\n\u003Ch4>CI\u002FCD Deployment\u003C\u002Fh4>\n\n\u003Cp>You can use the same steps and options if you set up CI\u002FCD deployment directly from a GitHub or GitLab repository. For example, you can create a \u003Ccode>netlify.toml\u003C\u002Fcode> file for Netlify with SSG like so:\u003C\u002Fp>\n",[],{"_modelApiKey":429,"code":511,"showLineNumbers":11,"highlightLines":280,"language":443,"size":432},"[build]\n  command=\"npm run export\"\n  publish=\"demo-store-core\u002Fpackages\u002Fwebsite\u002Fout\"\n\n[build.processing]\n  skip_processing = true\n\n[build.environment]\n\tNEXT_PUBLIC_JSON_DATA_FOLDER=\"..\u002F..\u002F..\u002Fdata\u002Fjson\u002F\"\n  NEXT_PUBLIC_LOCALES_DATA_FOLDER=\"..\u002F..\u002F..\u002Fdata\u002Flocales\u002F\"\n  NEXT_PUBLIC_CONFIG_FOLDER=\"..\u002F..\u002F..\u002Fconfig\u002F\"\n\n[template.environment]\n  SITE_URL=\"https:\u002F\u002Fyour-demo-store.netlify.app\"\n  NEXT_PUBLIC_CL_CLIENT_ID=\"coF7ofOKxTlbYfNNe...\"\n  NEXT_PUBLIC_CL_ENDPOINT=\"https:\u002F\u002Fyour-demo-store.commercelayer.io\"",{"_modelApiKey":367,"copy":513,"listStyle":369,"darkTheme":11,"buttons":514,"color":371,"indent":11},"\u003Cp>Or a \u003Ccode>vercel.json\u003C\u002Fcode> file for Vercel with SSR like so:\u003C\u002Fp>\n",[],{"_modelApiKey":429,"code":516,"showLineNumbers":11,"highlightLines":280,"language":517,"size":432},"{\n  \"version\": 2,\n  \"buildCommand\": \"npm run build\",\n  \"outputDirectory\": \"demo-store-core\u002Fpackages\u002Fwebsite\u002F.next\",\n  \"build\": {\n    \"env\": {\n      \"ENABLE_EXPERIMENTAL_COREPACK\": \"1\",\n      \"NEXT_PUBLIC_DATA_FETCHING\": \"ssr\",\n      \"NEXT_PUBLIC_JSON_DATA_FOLDER\": \"..\u002F..\u002F..\u002Fdata\u002Fjson\u002F\",\n      \"NEXT_PUBLIC_LOCALES_DATA_FOLDER\": \"..\u002F..\u002F..\u002Fdata\u002Flocales\u002F\",\n      \"NEXT_PUBLIC_CONFIG_FOLDER\": \"..\u002F..\u002F..\u002Fconfig\u002F\",\n\t\t\t\"SITE_URL\": \"https:\u002F\u002Fyour-demo-store.vercel.app\",\n\t\t\t\"NEXT_PUBLIC_CL_CLIENT_ID\": \"coF7ofOKxTlbYfNNe...\"\n      \"NEXT_PUBLIC_CL_ENDPOINT\": \"https:\u002F\u002Fyour-demo-store.commercelayer.io\"\n    }\n  }\n}","json",{"_modelApiKey":367,"copy":519,"listStyle":369,"darkTheme":11,"buttons":520,"color":371,"indent":11},"\u003Cp>PS: If you use this option, please make sure that your Commerce Layer API credentials are private. The API credentials in the \u003Ccode>netlify.toml\u003C\u002Fcode> or \u003Ccode>vercel.json\u003C\u002Fcode> files should only be added to a private repository. You should always add API credentials directly to your deployment service. We added ours to the repository just for educational purposes.\u003C\u002Fp>\n\n\u003Ch3>Conclusion\u003C\u002Fh3>\n\n\u003Cp>And that’s a wrap!\u003C\u002Fp>\n\n\u003Cp>I hope you’ve found this tutorial useful and have learned how composable commerce and international websites work. Feel free to expand your knowledge by researching more, customizing your ecommerce store, integrating with other third-party services, adding more commerce data to your Commerce Layer organization, and exploring Commerce Layer’s other suite of \u003Ca href=\"https:\u002F\u002Fcommercelayer.io\u002Fdevelopers\">developer tools\u003C\u002Fa>. You can go ahead and use this project to start selling conference swags or any products and receive orders for free (courtesy of our free \u003Ca href=\"https:\u002F\u002Fcommercelayer.io\u002Fpricing\">Developer plan\u003C\u002Fa>) 😃.\u003C\u002Fp>\n\n\u003Cp>We’d also love to see what you build with this, so please feel free to share what you’ve built and let us know what you think about the tutorial in our \u003Ca href=\"https:\u002F\u002Fcommercelayer.io\u002Fdevelopers\">Discord community\u003C\u002Fa> or via \u003Ca href=\"https:\u002F\u002Fx.com\u002Fcommercelayer\">X @commercelayer\u003C\u002Fa>!\u003C\u002Fp>\n",[],{"_modelApiKey":396,"title":522,"preTitle":398,"linkText":399,"darkTheme":11,"link":523},"Demo Store Core Project",{"_modelApiKey":203,"text":524,"label":280,"subtitle":280,"icon":280,"isExternal":7,"url":525,"link":303,"anchor":280,"openForm":11,"form":303,"htmlClassNames":280},"Demo Store Core GitHub Repo","https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fdemo-store-core",{"displayTitle":527,"cta":303,"ctaText":280,"cards":528},"Your next read",[529,544,562,576],{"_modelApiKey":212,"link":530,"subtitle":534,"date":534,"author":535,"additionalAuthors":539,"icon":540,"abstract":541,"tag":542,"displayTitle":531,"cardRatio":300,"featured":543},{"text":531,"isExternal":11,"url":280,"link":532},"How to build an international ecommerce website with Sanity and Commerce Layer.",{"_modelApiKey":212,"slug":533},"how-to-build-an-international-ecommerce-website-with-sanity-and-commerce-layer","April 6, 2022",{"name":285,"picture":536},{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":537,"customData":538},{"x":292,"y":292},{},[],"shapes","Learn how to integrate Sanity with Commerce Layer by looking at how we built our starter template using Sanity Studio, Next.js, and our React components library.",{"color":298,"name":299},0,{"_modelApiKey":212,"link":545,"subtitle":549,"date":549,"author":550,"additionalAuthors":557,"icon":558,"abstract":559,"tag":560,"displayTitle":546,"cardRatio":11,"featured":561},{"text":546,"isExternal":11,"url":280,"link":547},"How to sell internationally with a single Shopify store and Commerce Layer.",{"_modelApiKey":212,"slug":548},"how-to-sell-internationally-with-a-single-shopify-store-and-commerce-layer","February 22, 2022",{"name":551,"picture":552},"Filippo Conforti",{"url":553,"alt":554,"title":554,"width":289,"height":289,"format":379,"focalPoint":555,"customData":556},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1614874449-commercelayeravatarsquare212f3f.png","Filippo Conforti — CEO at Commerce Layer",{"x":292,"y":292},{},[],"globe","Shopify is a popular ecommerce platform that helps merchants grow their businesses, until it comes to expanding internationally. Learn how to extend Shopify with Commerce Layer, enabling brands to scale internationally without the trade-offs.",{"color":298,"name":8},1,{"_modelApiKey":212,"link":563,"subtitle":567,"date":567,"author":568,"additionalAuthors":572,"icon":573,"abstract":574,"tag":575,"displayTitle":564,"cardRatio":11,"featured":38},{"text":564,"isExternal":11,"url":280,"link":565},"Composable commerce with micro frontends.",{"_modelApiKey":212,"slug":566},"composable-commerce-with-micro-frontends","December 23, 2022",{"name":551,"picture":569},{"url":553,"alt":554,"title":554,"width":289,"height":289,"format":379,"focalPoint":570,"customData":571},{"x":292,"y":292},{},[],"circles-three-plus","Micro frontends are an architecture style that extends the composable nature of microservices to the user interface. See them in action and start using micro frontends in your projects today.",{"color":298,"name":8},{"_modelApiKey":212,"link":577,"subtitle":581,"date":581,"author":582,"additionalAuthors":589,"icon":590,"abstract":591,"tag":592,"displayTitle":578,"cardRatio":11,"featured":593},{"text":578,"isExternal":11,"url":280,"link":579},"Measure the health and performance of your store with our Metrics API.",{"_modelApiKey":212,"slug":580},"track-store-performance-with-our-metrics-api","October 27, 2022",{"name":583,"picture":584},"Daniel Oh",{"url":585,"alt":586,"title":586,"width":289,"height":289,"format":290,"focalPoint":587,"customData":588},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1658849633-daniel.jpg","Daniel Oh avatar",{"x":292,"y":292},{},[],"chart-bar","Today, we’re happy to announce the public release of our Metrics API, a brand new API that enables our clients to extract, organize, and analyze any data they want from our platform.",{"color":298,"name":8},3,[595,596,598,600,602,604,606,608,610,612,614,616,618,620,622,624,626],{"attributes":303,"tag":304,"content":305},{"attributes":597,"tag":309,"content":303},{"property":308,"content":305},{"attributes":599,"tag":309,"content":303},{"name":312,"content":305},{"attributes":601,"tag":309,"content":303},{"name":315,"content":316},{"attributes":603,"tag":309,"content":303},{"property":319,"content":316},{"attributes":605,"tag":309,"content":303},{"name":322,"content":316},{"attributes":607,"tag":309,"content":303},{"property":325,"content":326},{"attributes":609,"tag":309,"content":303},{"property":329,"content":330},{"attributes":611,"tag":309,"content":303},{"property":333,"content":334},{"attributes":613,"tag":309,"content":303},{"name":337,"content":326},{"attributes":615,"tag":309,"content":303},{"property":340,"content":341},{"attributes":617,"tag":309,"content":303},{"property":344,"content":345},{"attributes":619,"tag":309,"content":303},{"property":348,"content":349},{"attributes":621,"tag":309,"content":303},{"property":352,"content":353},{"attributes":623,"tag":309,"content":303},{"property":356,"content":280},{"attributes":625,"tag":309,"content":303},{"name":359,"content":360},{"attributes":627,"tag":309,"content":303},{"name":363,"content":364},[629],{"name":285,"picture":630},{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":631,"customData":632},{"x":292,"y":292},{},1790593729952]