[{"data":1,"prerenderedAt":660},["ShallowReactive",2],{"bootstrap":3,"blog-how-to-build-an-international-ecommerce-website-with-sanity-and-commerce-layer":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","the-new-payments-api-built-for-how-people-pay-now","The new Payments API. Built for how people pay now.","\u003Cp>The new Payments API. Built for how people pay now.\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":556,"_seoMetaTags":621,"authors":655},{"text":279,"isExternal":11,"url":280,"link":281},"How to build an international ecommerce website with Sanity and Commerce Layer.","",{"_modelApiKey":212,"slug":282},"how-to-build-an-international-ecommerce-website-with-sanity-and-commerce-layer","April 6, 2022",{"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,{},[],"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},"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 Site with Sanity and Commerce Layer",{"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","Learn how you can integrate Sanity with Commerce Layer by looking at how we built our starter template using Sanity Studio, Next.js, and our React components.",{"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\u002F1649254052-how-to-build-an-international-ecommerce-website-with-sanity-and-commerce-layer.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:46:13Z",{"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,371,376,384,387,392,395,404,407,412,415,417,420,422,425,427,430,434,437,445,448,450,453,455,458,465,468,470,473,475,478,486,489,491,494,496,499,501,504,506,509,512,515,523,526,528,531,533,536,538,541,543,546,548,551,553],{"_modelApiKey":367,"icon":368,"copy":369,"color":370},"banner","bell-ringing","\u003Cp>We recently released a \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fcommercelayer-sanity-template\">new version of the template\u003C\u002Fa> discussed in this tutorial which introduces improvements, support for Sanity v3, React18, Next13, and next-sanity toolkit. As a result of this, the tech specs discussed in this article have changed slightly but it still relevant to read on to learn how starters were built with Sanity v2, how to model Sanity content schemas, how to fetch data from Sanity using groq queries, how to use Commerce Layer CLI, and how to seed a Commerce Layer organization. \u003C\u002Fp>\n\n\u003Cp>\u003Cbr \u002F>\u003C\u002Fp>\n\n\u003Cp>We recommend that you check out the up-to-date \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fcommercelayer-sanity-template\">template repository on GitHub\u003C\u002Fa>, read the README document to get started with the new template, and explore the code to see how it was built or \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fsanity-commercelayer-template.netlify.app\u002F\">explore the template live\u003C\u002Fa>.\u003C\u002Fp>\n","red",{"_modelApiKey":372,"copy":373,"listStyle":374,"darkTheme":11,"buttons":375,"color":370,"indent":7},"wysiwyg","\u003Cp>One of the greatest benefits of composable, headless commerce is the flexibility it introduces to the developer experience of building shopping experiences. Decoupling website content and commerce data makes it easier for content and commerce teams of experts to work independently and more efficiently. With Commerce Layer, content managers can work with a best-of-breed headless CMS like \u003Cstrong>Sanity\u003C\u002Fstrong>, merchants can build their inventory in Commerce Layer, and developers can build with any stack in their most preferred programming language while utilizing Commerce Layer’s APIs.\u003C\u002Fp>\n\n\u003Cp>In this tutorial, you will learn how we built the \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fcommercelayer-sanity-template\">Commerce Layer Template\u003C\u002Fa> with Next.js, Sanity studio, and deployed it to Netlify. At the end of the tutorial, you should be able to set up and build your own 1-click Sanity starter with ease or integrate with Commerce Layer.\u003C\u002Fp>\n","directional",[],{"_modelApiKey":377,"title":378,"preTitle":379,"linkText":380,"darkTheme":11,"link":381},"link_block","Commerce Layer Starter","Template","Get started",{"_modelApiKey":203,"text":382,"label":280,"subtitle":280,"icon":280,"isExternal":7,"url":383,"link":303,"anchor":280,"openForm":11,"form":303,"htmlClassNames":280},"Start building","https:\u002F\u002Fwww.sanity.io\u002Fcreate?template=commercelayer\u002Fsanity-template-commercelayer",{"_modelApiKey":372,"copy":385,"listStyle":374,"darkTheme":11,"buttons":386,"color":370,"indent":11},"\u003Chr>\n\n\u003Ch3>Prerequisites\u003C\u002Fh3>\n\n\u003Cul>\n\u003Cli>Git installed (learn how to install Git \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Fgit-guides\u002Finstall-git\">here\u003C\u002Fa> if you haven't already).\u003C\u002Fli>\n\u003Cli>Node and NPM installed (Learn how to install Node.js \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fnodejs.org\u002Fen\u002Fdownload\u002Fpackage-manager\u002F\">here\u003C\u002Fa> if you haven't already).\u003C\u002Fli>\n\u003Cli>Basic knowledge of how to use the terminal.\u003C\u002Fli>\n\u003Cli>Basic knowledge of NPM.\u003C\u002Fli>\n\u003Cli>A grin on your face ;)\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Chr>\n\n\u003Ch3>Introducing Sanity Studio\u003C\u002Fh3>\n\n\u003Cp>The Sanity studio is an open-source content management system built with React.js. It offers rapid configuration, free form customization, reusable structured content, a comfortable editor, real-time collaboration, toolkits, plugins, and more features to enable you to create the best content workflow.\u003C\u002Fp>\n\n\u003Cp>Sanity provides the possibility to create starter templates that can be re-used by developers easily. The starter is primarily a repository hosted on GitHub that contains some meta-information, demo content, schema, and frontend(s) that will end up in a new repository when a developer installs the starter through \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.sanity.io\u002Fstarters\">sanity.io\u002Fstarters\u003C\u002Fa>. When a developer installs the starter, Sanity creates a new project on Sanity and a new repository on GitHub with the starter code, attaches a new Sanity dataset ID to the starter, and deploys the project to Netlify simultaneously.\u003C\u002Fp>\n\n\u003Cp>Generally, a sanity starter can include a Sanity studio, a frontend application, both or multiple frontends and studios. For the purpose of this tutorial, we will create a starter that will include a studio and frontend. Our starter will include:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>An ecommerce storefront built with Next.js and \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fcommercelayer-react-components\">Commerce Layer React components\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>International shopping capabilities powered by \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fv\u002Fapi-reference\u002F\">Commerce Layer APIs\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>Some ecommerce data imported using the \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fcommercelayer-cli\">Commerce Layer CLI\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>Structured content on Sanity studio.\u003C\u002Fli>\n\u003Cli>Localization support.\u003C\u002Fli>\n\u003Cli>Deployment configuration settings to Netlify.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch3>Sanity starter project structure\u003C\u002Fh3>\n\n\u003Cp>Sanity has a defined specification for starters which includes some required files and directories. These specifications provide information about the starter to developers using the starter and make the project function as a reusable starter. Below is the folder structure of a Sanity project with required files and directories (without any frontend added):\u003C\u002Fp>\n",[],{"_modelApiKey":388,"code":389,"showLineNumbers":11,"highlightLines":280,"language":390,"size":391},"code_block","├── .sanity-template\n├── .sanity-template\u002Fassets\n├── .sanity-template\u002Fdata\n├── .sanity-template\u002Fmanifest.json\n├── README.md","shell","Standard",{"_modelApiKey":372,"copy":393,"listStyle":374,"darkTheme":11,"buttons":394,"color":370,"indent":11},"\u003Cul>\n\u003Cli>\u003Ccode>.sanity-template\u003C\u002Fcode> is the root directory where all meta-information for using this repository as a template on \u003Ca target=\"_blank\" href=\"http:\u002F\u002Fsanity.io\u002Fstarters\">sanity.io\u002Fstarters\u003C\u002Fa> is stored.\u003C\u002Fli>\n\u003Cli>\u003Ccode>.sanity-template\u002Fassets\u003C\u002Fcode> is the directory for storing assets related to displaying information about the starter (in this case, preview images for the overall project and for each site the starter contains).\u003C\u002Fli>\n\u003Cli>\u003Ccode>.sanity-template\u002Fdata\u003C\u002Fcode> is the directory to store a Sanity dataset export if you want the starter to launch with some demo content.\u003C\u002Fli>\n\u003Cli>\u003Ccode>.sanity-template\u002Fmanifest.json\u003C\u002Fcode> is the JSON file containing details about the Starter as well as deployment information.\u003C\u002Fli>\n\u003Cli>\u003Ccode>README.md\u003C\u002Fcode> is the markdown file for this project that will be displayed on the Create page.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>For a finished starter project, the root of the project should contain all deployable code, including the frontend and studio. Generally, a project spun from a starter is split into three parts:\u003C\u002Fp>\n\n\u003Col>\n\u003Cli>The root for all frontend code\u003C\u002Fli>\n\u003Cli>The \u003Ccode>\u002Fstudio\u003C\u002Fcode> directory for all studio code.\u003C\u002Fli>\n\u003Cli>The \u003Ccode>.sanity-template\u003C\u002Fcode> for all starter meta-information.\u003C\u002Fli>\n\u003C\u002Fol>\n\n\u003Cp>Here is a sample from the \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fcommercelayer-sanity-template\">Commerce Layer sanity template\u003C\u002Fa> as seen in the image below:\u003C\u002Fp>\n",[],{"_modelApiKey":396,"border":11,"caption":280,"image":397,"size":403,"darkTheme":11,"rounded":11,"color":370},"image_block",{"url":398,"alt":399,"title":399,"width":289,"height":400,"format":290,"focalPoint":401,"customData":402},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1648802385-sanity-starter-github-repo-screenshot.jpg","Sanity starter GitHub repo screenshot",1521,{"x":292,"y":292},{},"standard",{"_modelApiKey":372,"copy":405,"listStyle":374,"darkTheme":11,"buttons":406,"color":370,"indent":11},"\u003Ch3>How we built the Commerce Layer Sanity starter\u003C\u002Fh3>\n\n\u003Cp>In this section, you will learn how we built a starter with an ecommerce application with transactional functionalities powered by Commerce Layer APIs, structured content on Sanity, imported seed data, and deployment configuration to Netlify. If you want to follow along with the guide, you can take a look at the finished project \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fcommercelayer-sanity-template\">on GitHub\u003C\u002Fa>.\u003C\u002Fp>\n",[],{"_modelApiKey":377,"title":378,"preTitle":408,"linkText":409,"darkTheme":11,"link":410},"Open-source","View on GitHub",{"_modelApiKey":203,"text":409,"label":280,"subtitle":280,"icon":280,"isExternal":7,"url":411,"link":303,"anchor":280,"openForm":11,"form":303,"htmlClassNames":280},"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fsanity-template-commercelayer",{"_modelApiKey":372,"copy":413,"listStyle":374,"darkTheme":11,"buttons":414,"color":370,"indent":11},"\u003Cp>Please find below the sequential breakdown of all the steps taken to develop our starter.\u003C\u002Fp>\n\n\u003Ch4>1. Setup a new Sanity project using the Sanity CLI\u003C\u002Fh4>\n\n\u003Cp>Sanity has a command-line interface that we can use to interact with Sanity, create new projects, manage datasets, import data, and much more from the CLI. We'll use this CLI to set up a new sanity project following the steps below:\u003C\u002Fp>\n\n\u003Ch5>\u003Cstrong>1. Install the CLI\u003C\u002Fstrong>\u003C\u002Fh5>\n\n\u003Cp>Run the command below to install the Sanity CLI:\u003C\u002Fp>\n",[],{"_modelApiKey":388,"code":416,"showLineNumbers":11,"highlightLines":280,"language":390,"size":391},"npm install -g @sanity\u002Fcli",{"_modelApiKey":372,"copy":418,"listStyle":374,"darkTheme":11,"buttons":419,"color":370,"indent":11},"\u003Ch5>\u003Cstrong>2. Create a new project\u003C\u002Fstrong>\u003C\u002Fh5>\n\n\u003Cp>Run the command below to bootstrap a new project which will log you into Sanity, create a new project, set up a dataset, and generate the files needed to run the studio environment locally:\u003C\u002Fp>\n",[],{"_modelApiKey":388,"code":421,"showLineNumbers":11,"highlightLines":280,"language":390,"size":391},"sanity init",{"_modelApiKey":372,"copy":423,"listStyle":374,"darkTheme":11,"buttons":424,"color":370,"indent":11},"\u003Ch5>\u003Cstrong>3. Run the studio\u003C\u002Fstrong>\u003C\u002Fh5>\n\n\u003Cp>Run the command below to build the initial JavaScript code required to run the studio, and start a local web server:\u003C\u002Fp>\n",[],{"_modelApiKey":388,"code":426,"showLineNumbers":11,"highlightLines":280,"language":390,"size":391},"sanity start",{"_modelApiKey":372,"copy":428,"listStyle":374,"darkTheme":11,"buttons":429,"color":370,"indent":11},"\u003Cp>The studio should now run on \u003Ccode>localhost:3333\u003C\u002Fcode>. You can always run \u003Ccode>sanity help\u003C\u002Fcode> to get an overview of other available and useful commands in the Sanity CLI.\u003C\u002Fp>\n\n\u003Ch4>2. Content modelling for the created Sanity studio\u003C\u002Fh4>\n\n\u003Cp>Now that we understand how Sanity works and have set up a new sanity project, let's structure our sanity studio schema. Sanity schema defines how your content should be modelled, and this structure reflects in the studio UI. The schema describes the different field types a document consists of. Sanity uses the \u003Ccode>schema.js\u003C\u002Fcode> file in the \u003Ccode>\u002Fschemas\u003C\u002Fcode> directory to determine the content model of the project.\u003C\u002Fp>\n\n\u003Cp>With Sanity, you define a block of content as a document or split your documents into modules and import them into the parent \u003Ccode>schema.js\u003C\u002Fcode> file. Generally, there are three categories of Sanity schema types:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>\u003Cstrong>Document types\u003C\u002Fstrong> (\u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.sanity.io\u002Fdocs\u002Fdocument-type\">document\u003C\u002Fa> and other published custom schemas).\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Primitive types\u003C\u002Fstrong> (e.g. \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.sanity.io\u002Fdocs\u002Fboolean-type\">boolean\u003C\u002Fa>, \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.sanity.io\u002Fdocs\u002Fstring-type\">string\u003C\u002Fa>, \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.sanity.io\u002Fdocs\u002Ftext-type\">text\u003C\u002Fa>, \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.sanity.io\u002Fdocs\u002Fnumber-type\">number\u003C\u002Fa>, \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.sanity.io\u002Fdocs\u002Farray-type\">array\u003C\u002Fa>, \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.sanity.io\u002Fdocs\u002Fdatetime-type\">datetime\u003C\u002Fa>, and \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.sanity.io\u002Fdocs\u002Furl-type\">URL\u003C\u002Fa>).\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Object types\u003C\u002Fstrong> (e.g. \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.sanity.io\u002Fdocs\u002Fobject-type\">object\u003C\u002Fa>, \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.sanity.io\u002Fdocs\u002Fblock-type\">block\u003C\u002Fa>, \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.sanity.io\u002Fdocs\u002Fspan-type\">span\u003C\u002Fa>, \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.sanity.io\u002Fdocs\u002Freference-type\">reference\u003C\u002Fa>, \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.sanity.io\u002Fdocs\u002Fslug-type\">slug\u003C\u002Fa>, \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.sanity.io\u002Fdocs\u002Fimage-type\">image\u003C\u002Fa>, and \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.sanity.io\u002Fdocs\u002Ffile-type\">file\u003C\u002Fa>).\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>You can find all of the Sanity’s types in this \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.sanity.io\u002Fdocs\u002Fschema-types\">reference documentation\u003C\u002Fa> or learn how to structure your content model based on your needs by reading \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.sanity.io\u002Fguides\u002Fintroduction-to-content-modeling\">this comprehensive guide\u003C\u002Fa>.\u003C\u002Fp>\n\n\u003Cp>For the Commerce Layer starter, our \u003Ccode>schema.js\u003C\u002Fcode> looks like so in the snippet below with imports of several other module documents. You can view the schema code for each module \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fcommercelayer-sanity-template\u002Ftree\u002Fmain\u002Fschemas\">here\u003C\u002Fa> in the GitHub repository.\u003C\u002Fp>\n",[],{"_modelApiKey":388,"code":431,"showLineNumbers":11,"highlightLines":280,"language":432,"size":433},"import createSchema from 'part:@sanity\u002Fbase\u002Fschema-creator'\nimport schemaTypes from 'all:part:@sanity\u002Fbase\u002Fschema-type'\n\n\u002F\u002F We import object and document schemas\nimport product from '.\u002Fproduct'\nimport country from '.\u002Fcountry'\nimport variant from '.\u002Fvariant'\nimport size from '.\u002Fsize'\nimport taxon from '.\u002Ftaxon'\nimport taxonomy from '.\u002Ftaxonomy'\nimport catalog from '.\u002Fcatalog'\nimport blockContent from '.\u002FblockContent'\n\nimport productImage from '.\u002FproductImage'\nimport localeString from '.\u002Flocale\u002FString'\nimport localeText from '.\u002Flocale\u002FText'\nimport localeSlug from '.\u002Flocale\u002FSlug'\nimport localeBlockContent from '.\u002Flocale\u002FBlockContent'\n\n\u002F\u002F Then we give our schema to the builder and provide the result to Sanity\nexport default createSchema({\n  \u002F\u002F We name our schema\n  name: 'default',\n  \u002F\u002F Then proceed to concatenate our document type\n  \u002F\u002F to the ones provided by any plugins that are installed\n  types: schemaTypes.concat([\n    \u002F\u002F The following are document types which will appear\n    \u002F\u002F in the studio.\n    product,\n    country,\n    variant,\n    size,\n    taxon,\n    taxonomy,\n    catalog,\n    \u002F\u002F When added to this list, object types can be used as\n    \u002F\u002F { type: \"typename\" } in other document schemas\n    productImage,\n    blockContent,\n    localeString,\n    localeText,\n    localeSlug,\n    localeBlockContent,\n  ]),\n})","javascript","Wide",{"_modelApiKey":372,"copy":435,"listStyle":374,"darkTheme":11,"buttons":436,"color":370,"indent":11},"\u003Ch4>3. Add content to Sanity studio\u003C\u002Fh4>\n\n\u003Cp>If you are working on a new project like we did when we began developing the starter, you will have to manually add content to your project using the Sanity studio running on \u003Ccode>localhost:3333\u003C\u002Fcode>. The studio should now have the content fields populated with the configured content schemas in the “Desk” view. You can use that to add content to your project, as seen in the screenshot below.\u003C\u002Fp>\n",[],{"_modelApiKey":396,"border":7,"caption":280,"image":438,"size":403,"darkTheme":11,"rounded":7,"color":370},{"url":439,"alt":440,"title":440,"width":441,"height":442,"format":290,"focalPoint":443,"customData":444},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1648804943-sanity-studio-desk-view-screenshot.jpg","Sanity studio desk view screenshot",1600,1004,{"x":292,"y":292},{},{"_modelApiKey":372,"copy":446,"listStyle":374,"darkTheme":11,"buttons":447,"color":370,"indent":11},"\u003Cp>If you are starting a new project using a starter or a previously saved project, then you can easily import a dataset with saved data. To do that:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Extract the \u003Ccode>production.tar.gz\u003C\u002Fcode> file in \u003Ccode>\u002F.sanity-template\u002Fdata\u003C\u002Fcode> directory using the command below:\u003C\u002Fli>\n\u003C\u002Ful>\n",[],{"_modelApiKey":388,"code":449,"showLineNumbers":11,"highlightLines":280,"language":390,"size":391},"tar -xf production.tar.gz",{"_modelApiKey":372,"copy":451,"listStyle":374,"darkTheme":11,"buttons":452,"color":370,"indent":11},"\u003Cp>The extracted folder name should look like \u003Ccode>production-export-2021-02-26t14-15-56-557z\u003C\u002Fcode>.\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Run the command below in \u003Ccode>\u002Fstudio\u003C\u002Fcode> to import the \u003Ccode>data.ndjson\u003C\u002Fcode> file in the extracted folder:\u003C\u002Fli>\n\u003C\u002Ful>\n",[],{"_modelApiKey":388,"code":454,"showLineNumbers":11,"highlightLines":280,"language":390,"size":391},"sanity dataset import ..\u002F.sanity-template\u002Fdata\u002F\u003Cname of extracted folder>\u002Fdata.ndjson \u003Cyour_dataset>",{"_modelApiKey":372,"copy":456,"listStyle":374,"darkTheme":11,"buttons":457,"color":370,"indent":11},"\u003Cp>You should check the running Sanity studio now to preview the imported content.\u003C\u002Fp>\n\n\u003Ch4>4. Add frontend and integrate with Sanity\u003C\u002Fh4>\n\n\u003Cp>Before you add all frontend code to the root directory, you should move the Sanity studio code into a directory named \u003Ccode>\u002Fstudio\u003C\u002Fcode>.\u003C\u002Fp>\n",[],{"_modelApiKey":396,"border":11,"caption":280,"image":459,"size":403,"darkTheme":11,"rounded":11,"color":370},{"url":460,"alt":461,"title":461,"width":289,"height":462,"format":290,"focalPoint":463,"customData":464},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1648806016-sanity-starter-github-repo-studio-folder-screenshot.jpg","Studio folder screenshot",533,{"x":292,"y":292},{},{"_modelApiKey":372,"copy":466,"listStyle":374,"darkTheme":11,"buttons":467,"color":370,"indent":11},"\u003Cp>At this stage, you will add the frontend code of your project, which can either be a blog, marketing website, CRM, or storefront. The major thing to do here is to use any of the \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.sanity.io\u002Fdocs\u002Fclient-libraries\">Sanity client libraries\u003C\u002Fa> to integrate Sanity into your frontend and fetch data. In our case, we used the \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.sanity.io\u002Fdocs\u002Fjs-client\">official Javascript client\u003C\u002Fa> that works in Node.js and modern browsers.\u003C\u002Fp>\n",[],{"_modelApiKey":388,"code":469,"showLineNumbers":11,"highlightLines":280,"language":432,"size":433},"import sanityClient from '@sanity\u002Fclient'\n\nconst client = sanityClient({\n  projectId: process.env.SANITY_PROJECT_ID as string,\n  dataset: process.env.SANITY_DATASET as string,\n  useCdn: process.env.NODE_ENV === 'production', \u002F\u002F `false` if you want to ensure fresh data\n})",{"_modelApiKey":372,"copy":471,"listStyle":374,"darkTheme":11,"buttons":472,"color":370,"indent":11},"\u003Cp>Here’s an example of how we query Sanity to fetch the country and product data:\u003C\u002Fp>\n",[],{"_modelApiKey":388,"code":474,"showLineNumbers":11,"highlightLines":280,"language":432,"size":433},"import _ from 'lodash'\nimport {\n  SanityCountry,\n  SanityProduct\n} from '.\u002Ftypings'\n\n\u002F\u002FCountries\nconst sanityAllCountries = async (locale = 'en-US') => {\n  const lang = parseLocale(locale, '_', '-', 'lowercase')\n  const query = `*[_type == \"country\"]{\n    name,\n    code,\n    marketId,\n    defaultLocale,\n    \"image\": {\n      \"url\": image.asset->url\n    },\n    'catalog': {\n      'id': catalog->_id\n    }\n  } | order(name[\"${lang}\"] asc)`\n  const countries = await client.fetch\u003CSanityCountry[]>(query)\n  return countries.map((country) => {\n    const localization = {\n      name: country?.name[lang],\n    }\n    return { ...country, ...localization }\n  })\n}\n\n\u002F\u002FProducts\nconst sanityGetProduct = async (slug: string, locale = 'en-US') => {\n  const lang = parseLocale(locale, '_', '-', 'lowercase')\n  const query = `*[_type == \"product\" && slug[\"${lang}\"].current == \"${slug}\"]{\n    name,\n    description,\n    reference,\n    slug,\n    'images': images[]->{\n      'url': images.asset->url\n    },\n    'variants': variants[]->{\n      label,\n      code,\n      name,\n      size->,\n      'images': images[]->{\n        'url': images.asset->url\n      }\n    }    \n  }`\n  const item: any[] = await client.fetch(query)\n  return parsingProduct(_.first(item), lang)\n}",{"_modelApiKey":372,"copy":476,"listStyle":374,"darkTheme":11,"buttons":477,"color":370,"indent":11},"\u003Cp>You can explore all our queries for the Commerce Layer starter project \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fcommercelayer-sanity-template\u002Fblob\u002Fmain\u002Futils\u002Fsanity\u002Fapi.ts\">here\u003C\u002Fa> in the GitHub repository. Also, \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fcommercelayer-sanity-template\u002Ftree\u002Fmain\u002Fpages\u002F%5BcountryCode%5D\u002F%5Blang%5D\">here\u003C\u002Fa>’s the major code powering our frontend alongside some hooks, utils, components, and dependencies.\u003C\u002Fp>\n",[],{"_modelApiKey":396,"border":11,"caption":280,"image":479,"size":403,"darkTheme":11,"rounded":7,"color":370},{"url":480,"alt":481,"title":481,"width":482,"height":483,"format":290,"focalPoint":484,"customData":485},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1648828064-vs-code-sanity-dependencies-screenshot.jpg","Sanity starter project screenshot VS code",1193,879,{"x":292,"y":292},{},{"_modelApiKey":372,"copy":487,"listStyle":374,"darkTheme":11,"buttons":488,"color":370,"indent":11},"\u003Cp>Now that you have a Sanity Starter set up, we’ll show you the foundation principles needed to integrate commerce data from Commerce Layer. This is where you will begin to see the powerful combination of Commerce Layer data with Sanity content. And by the end of the tutorial, you will see not only the benefits of this integration, but you will also be able to experiment with your commerce data next to Sanity to see the power of both tools together.\u003C\u002Fp>\n\n\u003Ch4>5. Get Commerce Layer API credentials\u003C\u002Fh4>\n\n\u003Cp>In the starter we built, transactional functionalities of your ecommerce platform are managed by Commerce Layer, while the content is managed by Sanity studio. This will result in better order management and content management. To get started with using Commerce Layer, you will need to create an organization, perform some configurations and settings for your business, seed some demo data, and get your API credentials. The API credentials will allow you to interact with Commerce Layer in your presentation layer (frontend) and the CLI. To get the required credentials, kindly follow the steps below:\u003C\u002Fp>\n\n\u003Col>\n\u003Cli>Create a free developer account \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdashboard.commercelayer.io\u002Fsign_up\">here\u003C\u002Fa>. Iif you already have an account, skip to \u003Cstrong>step 3\u003C\u002Fstrong>.\u003C\u002Fli>\n\u003Cli>Upon successful sign-up, skip the onboarding tutorial for the purposes of this article (we'll set up and seed the organization manually through the CLI shortly).\u003C\u002Fli>\n\u003Cli>Create a new \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fcommercelayer.io\u002Fdocs\u002Fdata-model\u002Fusers-and-organizations\">organization\u003C\u002Fa> for your business.\u003C\u002Fli>\n\u003Cli>In the Commerce Layer dashboard, click on the \u003Cstrong>Sales channels\u003C\u002Fstrong> tab and create an application, with the name: \u003Cstrong>Website\u003C\u002Fstrong>. Upon successful creation, you'll get a \u003Cstrong>client ID\u003C\u002Fstrong> , a \u003Cstrong>base endpoint\u003C\u002Fstrong>, and one or more \u003Cstrong>allowed scopes\u003C\u002Fstrong>. Kindly remember to save that as we'll use it to interact with our application later.\u003C\u002Fli>\n\u003Cli>In the Commerce Layer dashboard, click on the \u003Cstrong>Integrations\u003C\u002Fstrong> tab and create an application, with the name: \u003Cstrong>CLI\u003C\u002Fstrong> and role: \u003Cstrong>Admin\u003C\u002Fstrong>. Upon successful creation, you'll get a \u003Cstrong>client ID\u003C\u002Fstrong>, a \u003Cstrong>client secret\u003C\u002Fstrong>, and a \u003Cstrong>base endpoint\u003C\u002Fstrong>. Kindly remember to save that as we'll use it to interact with the CLI later.\u003C\u002Fli>\n\u003C\u002Fol>\n\n\u003Ch4>6. Seed organization with test data\u003C\u002Fh4>\n\n\u003Cp>The \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fcommercelayer-cli\">Commerce Layer CLI\u003C\u002Fa> helps you to manage your Commerce Layer applications right from the terminal. Installing the CLI provides access to the \u003Ccode>commercelayer\u003C\u002Fcode> command. To set it up:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Install the CLI using your favorite package manager:\u003C\u002Fli>\n\u003C\u002Ful>\n",[],{"_modelApiKey":388,"code":490,"showLineNumbers":11,"highlightLines":280,"language":390,"size":391},"\u002F\u002Fnpm\nnpm install -g @commercelayer\u002Fcli\n\n\u002F\u002Fyarn\nyarn global add @commercelayer\u002Fcli",{"_modelApiKey":372,"copy":492,"listStyle":374,"darkTheme":11,"buttons":493,"color":370,"indent":11},"\u003Cul>\n\u003Cli>Log into your application via the CLI using the previously created integration application credentials like so:\u003C\u002Fli>\n\u003C\u002Ful>\n",[],{"_modelApiKey":388,"code":495,"showLineNumbers":11,"highlightLines":280,"language":390,"size":391},"commercelayer applications:login -o \u003CorganizationSlug> -i \u003CclientId> -s \u003CclientSecret> -a \u003CapplicationAlias>",{"_modelApiKey":372,"copy":497,"listStyle":374,"darkTheme":11,"buttons":498,"color":370,"indent":11},"\u003Cp>Now, with the steps below, you can use the CLI to import three demo \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdata.commercelayer.app\u002Fseed\u002Fmarkets.json\">markets\u003C\u002Fa> (UK, USA, and Europe), a set of \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdata.commercelayer.app\u002Fseed\u002Fskus.json\">product SKUs\u003C\u002Fa>, related \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdata.commercelayer.app\u002Fseed\u002Fprice_lists.json\">price lists\u003C\u002Fa>, related \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdata.commercelayer.app\u002Fseed\u002Fprices.json\">prices\u003C\u002Fa>, \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdata.commercelayer.app\u002Fseed\u002Fstock_locations.json\">stock locations\u003C\u002Fa>, and \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdata.commercelayer.app\u002Fseed\u002Fstock_items.json\">inventory\u003C\u002Fa>\n into your organization using the multi-market \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fcommercelayer.io\u002Fdocs\u002Fdata-model\u002Fmarkets-and-business-models\">business model\u003C\u002Fa>.\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Install the \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fcommercelayer-cli-plugin-seeder\">seeder plugin\u003C\u002Fa> using the command below:\u003C\u002Fli>\n\u003C\u002Ful>\n",[],{"_modelApiKey":388,"code":500,"showLineNumbers":11,"highlightLines":280,"language":390,"size":391},"commercelayer plugins:install seeder",{"_modelApiKey":372,"copy":502,"listStyle":374,"darkTheme":11,"buttons":503,"color":370,"indent":11},"\u003Cul>\n\u003Cli>Seed your organization using the command below:\u003C\u002Fli>\n\u003C\u002Ful>\n",[],{"_modelApiKey":388,"code":505,"showLineNumbers":11,"highlightLines":280,"language":390,"size":391},"commercelayer seed -b multi_market",{"_modelApiKey":372,"copy":507,"listStyle":374,"darkTheme":11,"buttons":508,"color":370,"indent":11},"\u003Ch4>7. Final checklists and Netlify deployment configuration\u003C\u002Fh4>\n\n\u003Cul>\n\u003Cli>In order for a starter to be validated and used through \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.sanity.io\u002Fstarters\">sanity.io\u002Fstarters\u003C\u002Fa>, it needs to follow the project name must start with \u003Ccode>sanity-template-\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>Configure your Sanity metadata in \u003Ccode>sanity-template.json\u003C\u002Fcode> and add deployment configuration for the frontend web application and Sanity studio like so:\u003C\u002Fli>\n\u003C\u002Ful>\n",[],{"_modelApiKey":388,"code":510,"showLineNumbers":11,"highlightLines":280,"language":511,"size":433},"{\n  \"version\": 2.0,\n  \"title\": \"Commerce Layer Starter\",\n  \"description\": \"A multi-country ecommerce starter built with Sanity Studio, Commerce Layer, Next.js, and deployed to Netlify.\",\n  \"previewMedia\": {\n    \"type\": \"image\",\n    \"src\": \".sanity-template\u002Fassets\u002Fpreview.jpg\",\n    \"alt\": \"Preview image with Commerce Layer, Next.js, and Netlify's logo\"\n  },\n  \"technologies\": [\n    {\n      \"id\": \"nextjs\",\n      \"name\": \"Next.js\",\n      \"url\": \"https:\u002F\u002Fnextjs.org\"\n    },\n    {\n      \"id\": \"commercelayer\",\n      \"name\": \"Commerce Layer\",\n      \"url\": \"https:\u002F\u002Fcommercelayer.io\"\n    },\n    {\n      \"id\": \"netlify\",\n      \"name\": \"Netlify\",\n      \"url\": \"https:\u002F\u002Fnetlify.com\"\n    }\n  ],\n  \"deployment\": {\n    \"provider\": \"netlify\",\n    \"sites\": [\n      {\n        \"id\": \"studio\",\n        \"type\": \"studio\",\n        \"title\": \"Commerce Layer Starter Studio\",\n        \"description\": \"A multi-country ecommerce starter built with Sanity Studio, Commerce Layer, Next.js, and deployed to Netlify.\",\n        \"dir\": \".\u002Fstudio\",\n        \"previewMedia\": {\n          \"type\": \"image\",\n          \"src\": \".sanity-template\u002Fassets\u002Fstudio.png\",\n          \"alt\": \"A preview image of the Sanity studio.\"\n        },\n        \"buildSettings\": {\n          \"base\": \"studio\",\n          \"dir\": \"\u002Fdist\",\n          \"cmd\": \"npm run build\"\n        }\n      },\n      {\n        \"id\": \"web\",\n        \"type\": \"web\",\n        \"title\": \"Commerce Layer Starter Web\",\n        \"description\": \"A multi-country ecommerce starter built with Sanity Studio, Commerce Layer, Next.js, and deployed to Netlify.\",\n        \"dir\": \".\u002Fweb\",\n        \"previewMedia\": {\n          \"type\": \"image\",\n          \"src\": \".sanity-template\u002Fassets\u002Fpreview.jpg\",\n          \"alt\": \"A preview image of the web demo.\"\n        },\n        \"buildSettings\": {\n          \"base\": \"\u002F\",\n          \"dir\": \"\u002Fout\",\n          \"cmd\": \"npm run build\"\n        }\n      }\n    ]\n  }\n}","json",{"_modelApiKey":372,"copy":513,"listStyle":374,"darkTheme":11,"buttons":514,"color":370,"indent":11},"\u003Cp>The metadata information is primarily displayed on \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.sanity.io\u002Fcreate\">sanity.io\u002Fcreate\u003C\u002Fa> as described below by the visual explainer from \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.sanity.io\u002Fdocs\u002Fstarter-templates\">Sanity docs\u003C\u002Fa>.\u003C\u002Fp>\n",[],{"_modelApiKey":396,"border":7,"caption":280,"image":516,"size":403,"darkTheme":11,"rounded":7,"color":370},{"url":517,"alt":518,"title":518,"width":519,"height":520,"format":290,"focalPoint":521,"customData":522},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1648817089-create-starter-docs-screenshot.jpg","Create starter Sanity docs screenshot",1462,804,{"x":292,"y":292},{},{"_modelApiKey":372,"copy":524,"listStyle":374,"darkTheme":11,"buttons":525,"color":370,"indent":11},"\u003Cul>\n\u003Cli>Test your \u003Ccode>sanity-template.json\u003C\u002Fcode> file for errors using the sanity-template command:\u003C\u002Fli>\n\u003C\u002Ful>\n",[],{"_modelApiKey":388,"code":527,"showLineNumbers":11,"highlightLines":280,"language":390,"size":391},"sanity-template check",{"_modelApiKey":372,"copy":529,"listStyle":374,"darkTheme":11,"buttons":530,"color":370,"indent":11},"\u003Cul>\n\u003Cli>Build your project with the configuration in \u003Ccode>sanity-template.json\u003C\u002Fcode> using the command:\u003C\u002Fli>\n\u003C\u002Ful>\n",[],{"_modelApiKey":388,"code":532,"showLineNumbers":11,"highlightLines":280,"language":390,"size":391},"sanity-template build",{"_modelApiKey":372,"copy":534,"listStyle":374,"darkTheme":11,"buttons":535,"color":370,"indent":11},"\u003Cul>\n\u003Cli>You need to refactor your project's \u003Ccode>name\u003C\u002Fcode>,  \u003Ccode>projectId\u003C\u002Fcode> and \u003Ccode>dataset\u003C\u002Fcode> in \u003Ccode>studio\u002Fsanity.json\u003C\u002Fcode> to a dynamic variable so when a user installs your starter via \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.sanity.io\u002Fstarters\">sanity.io\u002Fstarters\u003C\u002Fa>, Sanity can populate it with new values. To this, you pass the string value in \u003Ccode><#< ... >#>\u003C\u002Fcode> as seen in the snippet below:\u003C\u002Fli>\n\u003C\u002Ful>\n",[],{"_modelApiKey":388,"code":537,"showLineNumbers":11,"highlightLines":280,"language":511,"size":391},"{\n  \"root\": true,\n  \"project\": {\n    \"name\": \"\u003C#\u003C sanity.projectTitle >#>\",\n    \"basePath\": \"\u002F\"\n  },\n  \"api\": {\n    \"projectId\": \"\u003C#\u003C sanity.projectId >#>\",\n    \"dataset\": \"\u003C#\u003C sanity.dataset >#>\"\n  }\n}",{"_modelApiKey":372,"copy":539,"listStyle":374,"darkTheme":11,"buttons":540,"color":370,"indent":11},"\u003Cul>\n\u003Cli>You can also set up \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Frenovatebot\u002Frenovate\">Renovatebot\u003C\u002Fa> to automatically make and merge pull requests that bump the Sanity dependencies upgrades in \u003Ccode>studio\u002Fpackage.json\u003C\u002Fcode>. All you need to do is add a \u003Ccode>renovate.json\u003C\u002Fcode> to the root directory, with the following configuration:\u003C\u002Fli>\n\u003C\u002Ful>\n",[],{"_modelApiKey":388,"code":542,"showLineNumbers":11,"highlightLines":280,"language":390,"size":391},"{\n  \"extends\": [\n    \"github>sanity-io\u002Frenovate-presets:sanity-template\"\n  ]\n}",{"_modelApiKey":372,"copy":544,"listStyle":374,"darkTheme":11,"buttons":545,"color":370,"indent":11},"\u003Cul>\n\u003Cli>Run the command below to build the studio to a static bundle and deploy it to Sanity cloud on a \u003Ccode><your-project>.sanity.studio\u003C\u002Fcode> URL (you can also deploy anytime you make any change to your studio):\u003C\u002Fli>\n\u003C\u002Ful>\n",[],{"_modelApiKey":388,"code":547,"showLineNumbers":11,"highlightLines":280,"language":390,"size":391},"sanity deploy",{"_modelApiKey":372,"copy":549,"listStyle":374,"darkTheme":11,"buttons":550,"color":370,"indent":11},"\u003Cp>You can still host a studio on any cloud platform you choose too (here’s \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002FBolajiAyodeji\u002Fcl-jamstack-ecommerce-workshop#continous-deployment-on-netlify\">how to deploy to Netlify\u003C\u002Fa>) so you don't have to manually deploy after every change.\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Lastly, push your finished code to GitHub and test it live by deploying the starter on Sanity following the starter specification:\u003C\u002Fli>\n\u003C\u002Ful>\n",[],{"_modelApiKey":388,"code":552,"showLineNumbers":11,"highlightLines":280,"language":390,"size":391},"https:\u002F\u002Fwww.sanity.io\u002Fcreate?template=[githubhandle]\u002Fsanity-template-[starter-name]",{"_modelApiKey":372,"copy":554,"listStyle":374,"darkTheme":11,"buttons":555,"color":370,"indent":11},"\u003Ch3>Conclusion\u003C\u002Fh3>\n\n\u003Cp>Now that you have built a Sanity starter and integrated Commerce Layer, you can start to add more items and product data stored in Commerce Layer so you can see how your products and prices show up within your content. The power of Commerce Layer is that you can really localize your commerce data to make it work for multiple markets, all of which likely have different prices, SKUs, promotions, and even simple things like item weights and measurements. \u003Cstrong>Commerce Layer gives you tremendous flexibility to sell your products locally and paired with a powerful tool like Sanity, you will be on your way to building the best, most optimized shopping experience for your customers.\u003C\u002Fstrong>\u003C\u002Fp>\n\n\u003Cp>You can get started with the Commerce Layer starter by visiting \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fcommercelayer-sanity-template\">this link\u003C\u002Fa> and following the instructions. Feel free to join the \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fslack.commercelayer.app\">Commerce Layer Slack\u003C\u002Fa> community to share what you are able to build after reading this tutorial.\u003C\u002Fp>\n",[],{"displayTitle":557,"cta":303,"ctaText":280,"cards":558},"Your next read",[559,574,593,607],{"_modelApiKey":212,"link":560,"subtitle":564,"date":564,"author":565,"additionalAuthors":569,"icon":570,"abstract":571,"tag":572,"displayTitle":561,"cardRatio":300,"featured":573},{"text":561,"isExternal":11,"url":280,"link":562},"How to build an ecommerce website with Commerce Layer Demo Store.",{"_modelApiKey":212,"slug":563},"how-to-build-an-ecommerce-website-with-commerce-layer-demo-store","January 17, 2023",{"name":285,"picture":566},{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":567,"customData":568},{"x":292,"y":292},{},[],"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},0,{"_modelApiKey":212,"link":575,"subtitle":579,"date":579,"author":580,"additionalAuthors":588,"icon":589,"abstract":590,"tag":591,"displayTitle":576,"cardRatio":11,"featured":592},{"text":576,"isExternal":11,"url":280,"link":577},"How to sell internationally with a single Shopify store and Commerce Layer.",{"_modelApiKey":212,"slug":578},"how-to-sell-internationally-with-a-single-shopify-store-and-commerce-layer","February 22, 2022",{"name":581,"picture":582},"Filippo Conforti",{"url":583,"alt":584,"title":584,"width":289,"height":289,"format":585,"focalPoint":586,"customData":587},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1614874449-commercelayeravatarsquare212f3f.png","Filippo Conforti — CEO at Commerce Layer","png",{"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":594,"subtitle":598,"date":598,"author":599,"additionalAuthors":603,"icon":604,"abstract":605,"tag":606,"displayTitle":595,"cardRatio":11,"featured":38},{"text":595,"isExternal":11,"url":280,"link":596},"Composable commerce with micro frontends.",{"_modelApiKey":212,"slug":597},"composable-commerce-with-micro-frontends","December 23, 2022",{"name":581,"picture":600},{"url":583,"alt":584,"title":584,"width":289,"height":289,"format":585,"focalPoint":601,"customData":602},{"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":608,"subtitle":612,"date":612,"author":613,"additionalAuthors":617,"icon":295,"abstract":618,"tag":619,"displayTitle":609,"cardRatio":11,"featured":620},{"text":609,"isExternal":11,"url":280,"link":610},"Static is the New Dynamic.",{"_modelApiKey":212,"slug":611},"static-is-the-new-dynamic","January 31, 2019",{"name":581,"picture":614},{"url":583,"alt":584,"title":584,"width":289,"height":289,"format":585,"focalPoint":615,"customData":616},{"x":292,"y":292},{},[],"An opinionated, yet adaptable approach to build enterprise-grade ecommerce, the Jamstack way.",{"color":298,"name":100},3,[622,623,625,627,629,631,633,635,637,639,641,643,645,647,649,651,653],{"attributes":303,"tag":304,"content":305},{"attributes":624,"tag":309,"content":303},{"property":308,"content":305},{"attributes":626,"tag":309,"content":303},{"name":312,"content":305},{"attributes":628,"tag":309,"content":303},{"name":315,"content":316},{"attributes":630,"tag":309,"content":303},{"property":319,"content":316},{"attributes":632,"tag":309,"content":303},{"name":322,"content":316},{"attributes":634,"tag":309,"content":303},{"property":325,"content":326},{"attributes":636,"tag":309,"content":303},{"property":329,"content":330},{"attributes":638,"tag":309,"content":303},{"property":333,"content":334},{"attributes":640,"tag":309,"content":303},{"name":337,"content":326},{"attributes":642,"tag":309,"content":303},{"property":340,"content":341},{"attributes":644,"tag":309,"content":303},{"property":344,"content":345},{"attributes":646,"tag":309,"content":303},{"property":348,"content":349},{"attributes":648,"tag":309,"content":303},{"property":352,"content":353},{"attributes":650,"tag":309,"content":303},{"property":356,"content":280},{"attributes":652,"tag":309,"content":303},{"name":359,"content":360},{"attributes":654,"tag":309,"content":303},{"name":363,"content":364},[656],{"name":285,"picture":657},{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":658,"customData":659},{"x":292,"y":292},{},1791534735474]