[{"data":1,"prerenderedAt":470},["ShallowReactive",2],{"bootstrap":3,"blog-using-sanity-cms-to-model-a-product-catalog-for-the-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","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":303,"abstract":304,"tag":305,"displayTitle":279,"cardRatio":308,"featured":11,"seoMetaTags":309,"layout":373,"blogPostCarousel":311,"_seoMetaTags":427,"authors":461},{"text":279,"isExternal":11,"url":280,"link":281},"Using Sanity CMS to model a product catalog.","",{"_modelApiKey":212,"slug":282},"using-sanity-cms-to-model-a-product-catalog-for-the-commerce-layer-demo-store","December 12, 2023",{"name":285,"picture":286},"Fabrizio Picca",{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":291,"customData":293},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1614875259-commercelayeravatarsquare113f26.png","Fabrizio Picca —      Partnerships Manager at Commerce Layer",1280,"png",{"x":292,"y":292},0.5,{},[295],{"name":296,"picture":297},"Seth Bindernagel",{"url":298,"alt":299,"title":299,"width":289,"height":289,"format":300,"focalPoint":301,"customData":302},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1656680208-seth.jpg","Seth Bindernagel avatar","jpg",{"x":292,"y":292},{},"shirt-folded","While many ecommerce devs might think it unconventional, it's perfectly OK to model a product catalog with a CMS. After all, it's just content. We use Sanity CMS to illustrate the point.",{"color":306,"name":307},"gray","Tutorials","portrait",[310,314,318,321,325,328,331,335,339,343,346,350,354,358,362,365,369],{"attributes":311,"tag":312,"content":313},null,"title","Using Sanity CMS to model a product catalog",{"attributes":315,"tag":317,"content":311},{"property":316,"content":313},"og:title","meta",{"attributes":319,"tag":317,"content":311},{"name":320,"content":313},"twitter:title",{"attributes":322,"tag":317,"content":311},{"name":323,"content":324},"description","This POC shows how to use Sanity to manage a product catalog. As a result, all content can be stored in a CMS with all transactional data in Commerce Layer.",{"attributes":326,"tag":317,"content":311},{"property":327,"content":324},"og:description",{"attributes":329,"tag":317,"content":311},{"name":330,"content":324},"twitter:description",{"attributes":332,"tag":317,"content":311},{"property":333,"content":334},"og:image","https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1702408394-commerce-layer-sanity-how-to-model-a-product-catalog.jpg?auto=format&fit=max&w=1200",{"attributes":336,"tag":317,"content":311},{"property":337,"content":338},"og:image:width","1200",{"attributes":340,"tag":317,"content":311},{"property":341,"content":342},"og:image:height","630",{"attributes":344,"tag":317,"content":311},{"name":345,"content":334},"twitter:image",{"attributes":347,"tag":317,"content":311},{"property":348,"content":349},"og:locale","en",{"attributes":351,"tag":317,"content":311},{"property":352,"content":353},"og:type","article",{"attributes":355,"tag":317,"content":311},{"property":356,"content":357},"og:site_name","Commerce Layer",{"attributes":359,"tag":317,"content":311},{"property":360,"content":361},"article:modified_time","2025-10-08T16:51:46Z",{"attributes":363,"tag":317,"content":311},{"property":364,"content":280},"article:publisher",{"attributes":366,"tag":317,"content":311},{"name":367,"content":368},"twitter:card","summary_large_image",{"attributes":370,"tag":317,"content":311},{"name":371,"content":372},"twitter:site","@commercelayer",[374,380,392,395,404,407,417,420],{"_modelApiKey":375,"copy":376,"listStyle":377,"darkTheme":11,"buttons":378,"color":379,"indent":7},"wysiwyg","\u003Cp>Commerce Layer approaches building digital ecommerce experiences differently. We focus primarily on transactional commerce. We offer a highly flexible and unopinionated API for brands that want to go composable. However, our focus opens the door for questions that stem from more traditional “monolithic” thinking.  For example, we are often asked, “Do you manage the product catalog and product content?” We don’t and don’t want to. We believe that the product catalog is just content data, and it is best managed by a composable service like a headless CMS. (It could also be a PIM, by the way.) CMSes are built to store content and model how data will be used by a client application like a webstore. Moreover, a number of leading headless CMSes are very capable of managing a product catalog. In this post, we will describe a baseline integration we built with Sanity to manage a product catalog.\u003C\u002Fp>\n\n\u003Cp>This is not a code tutorial, but it is a semi-technical article that leads down the correct path to using our Demo Store Application with Commerce Layer as the commerce engine and Sanity as the CMS. To utilize the examples we share and build on your own, you will need the following:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Commerce Layer account\u003C\u002Fli>\n\u003Cli>Sanity account\u003C\u002Fli>\n\u003Cli>Github account\u003C\u002Fli>\n\u003Cli>Any IDE you want to use to modify the code\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch3>What we built and how it works?\u003C\u002Fh3>\n\n\u003Cp>Commerce Layer offers a Demo Store application \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fdemo-store\">hosted on our Github page\u003C\u002Fa>. The Demo Store serves as a reference app that any business can use as a starting point for as they consider  rebuilding their digital ecommerce experience. It can also be used to see how we demonstrate a clear separation between content and commerce data. In this post, we’ll explain how we configured Sanity as the CMS to power all the content on the Demo Store, including the product catalog. All Demo Store content data is modeled and stored in the CMS, and all commerce functionality is managed by Commerce Layer.\u003C\u002Fp>\n\n\u003Cp>The Demo Store serves two purposes as a prototype application: it can demonstrate and test integration capabilities between Commerce Layer and other components in a composable architecture. It is essential that it works easily with as many CMS schemas as possible. For this reason, we have created an event-driven architecture that uses the CMS webhooks. In this example, it’s Sanity’s. The webhook triggers a GitHub action that maps data from the CMS to the schema expected by our Demo Store application. In reality, such an implementation wouldn’t be necessary in a production where no data transformation would be required.\u003C\u002Fp>\n\n\u003Cp>The basic Demo Store application uses a reference set of JSON files as the data model for the product catalog. We manually created those files so the app had a basic, functional catalog. But, that example falls short of production-ready capabilities. With this new demo, we take a step closer to what an actual reference stack might look like using Sanity as the content data model for the catalog. The result is that Sanity becomes the application responsible for generating the JSON files that the Demo Store application uses for its catalog.\u003C\u002Fp>\n\n\u003Cp>Like other CMSes, Sanity’s Visual Studio web application opens with a blank page that requires content data modeling. For this demo, we used Sanity’s code editor to create the content model. The Code Editor is a very powerful developer feature that Sanity provides. You can do the same, working in your preferred IDE, to model anything you want. For the product catalog, we created a model that is now hosted on our Github page linked \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fexamples\u002Ftree\u002Fmain\u002Fcms\u002Fsanity-demo-store\u002F\">here\u003C\u002Fa>. Feel free to clone or fork this repository to use it in your proof of concept. Below is a screenshot of the folder structure we created for the content data model for the Demo Store.\u003C\u002Fp>\n","checkbox",[],"red",{"_modelApiKey":381,"border":11,"caption":382,"image":383,"size":391,"darkTheme":11,"rounded":7,"color":379},"image_block","The content model that we use for the product catalog and all other content in the Demo Store built with the Sanity code editor.",{"url":384,"alt":385,"title":386,"width":387,"height":388,"format":290,"focalPoint":389,"customData":390},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1701443730-schema-of-the-ontent-model-using-sanity-code-editor.png","The schema of the content model for the product catalog and all other content built with Sanity Code Editor","Schema for the product catalog and all other content",1420,1800,{"x":292,"y":292},{},"standard",{"_modelApiKey":375,"copy":393,"listStyle":377,"darkTheme":11,"buttons":394,"color":379,"indent":11},"\u003Cp>Sanity provides a templated top-level folder structure. You define the subfolders. The code in each subfolder defines what users see in the Visual Studio interface based on the data model we created. Let’s look at the items that define the product catalog:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>\u003Cstrong>Catalog:\u003C\u002Fstrong> The actual product catalog. There could be multiple product catalogs (i.e. one per country with different taxonomies and product reference) or a single instance for the whole website. \u003C\u002Fli>\n\u003Cli>\u003Cstrong>Products:\u003C\u002Fstrong> Base Product with related size\u002Fcolor variants (skus).\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Taxon:\u003C\u002Fstrong>  a product category. Can either contain product references or other categories (sub-categories)\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Taxonomy:\u003C\u002Fstrong>  the full set of categories used to model the catalog.\u003Cbr>\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch3>Sanity Webhooks\u003C\u002Fh3>\n\n\u003Cp>Now that the product catalog data model is created, we can seed Sanity with content and build the demo store. We created a continuous integration (CI) job that runs on Github with Github Actions. Every time new content is added to Sanity or the layout in Visual Studio changes, a web hook sends a callback to the Github Actions and the Demo Store gets updated by the CI job. To achieve this, we configured a webhook in Sanity. Let’s look at the webhook configuration:\u003C\u002Fp>\n\n\u003Cp>This is a webhook configurator entitled "Trigger SSR build". The name says what it does, it triggers a server-side rendered build of the demo store any time someone creates, updates, or deletes anything in this specific Sanity space. The user just selects those options for when to trigger the hook. Then the webhook sends a payload of information to the callback URL that is input in the field. In this case, it's just a Github Action that dispatches a build. The projection box is a simple JSON file that tells Sanity exactly what to send in the callback's payload.\u003C\u002Fp>\n",[],{"_modelApiKey":381,"border":11,"caption":280,"image":396,"size":391,"darkTheme":11,"rounded":7,"color":379},{"url":397,"alt":398,"title":399,"width":400,"height":401,"format":290,"focalPoint":402,"customData":403},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1701443974-sanity-webhook.png","We configure the Sanity webhook to send a call back to the Github actions URL","Sanity webhook configurator",2058,2106,{"x":292,"y":292},{},{"_modelApiKey":375,"copy":405,"listStyle":377,"darkTheme":11,"buttons":406,"color":379,"indent":11},"\u003Ch3>Github Action\u003C\u002Fh3>\n\n\u003Cp>The Github Action triggered by the Sanity webhook calls a sanity_exporter script to get everything we want. The process pulls content from Sanity and generates JSON files that will be published on Github pages and accessed by our Demo Store. The screenshot below shows all the data that is exported from Sanity as JSON.\u003C\u002Fp>\n",[],{"_modelApiKey":381,"border":11,"caption":408,"image":409,"size":391,"darkTheme":11,"rounded":7,"color":379},"GitHub Action then ensures that the output JSON matches what the Demo Store requires.",{"url":410,"alt":411,"title":412,"width":413,"height":414,"format":290,"focalPoint":415,"customData":416},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1701444832-github-action.png","This Github Action takes the data from Sanity and transforms it into JSON files that match what the Commerce Layer Demo Store is expecting.","A Github Action used to transform data from Sanity to the Demo Store",2122,2194,{"x":292,"y":292},{},{"_modelApiKey":375,"copy":418,"listStyle":377,"darkTheme":11,"buttons":419,"color":379,"indent":11},"\u003Cp>This is possible because the Demo Store can read remote folders using this env variable: \u003C\u002Fp>\n\n\u003Cp>\u003Ccode>NEXT_PUBLIC_JSON_DATA_FOLDER=https:\u002F\u002Fcommercelayer.github.io\u002Fdemo-store-data-ssr\u002Fsanity\u002F\u003C\u002Fcode>\u003C\u002Fp>\n\n\u003Cp>The full set of env variables needed by the Demo Store can be found in the project documentation on Github.\u003C\u002Fp>\n\n\u003Ch3>Benefits of Sanity and Commerce Layer\u003C\u002Fh3>\n\n\u003Cp>Sanity’s philosophy of “Content is just data” aligns closely with Commerce Layer. Since the product catalog is content, it can be considered “just data”.  This approach is how both Sanity and Commerce Layer are able to offer some of the most flexible, unopinionated solutions. Both companies offer a suite of powerful developer tools that enable things like data modeling in an IDE, developer collaboration and version control, and simple webhook configurations. Sanity also offers every user a clean slate to model content. With this level of configurability, it is a perfect tool to manage all content, including the product catalog data. In doing so, all content gets managed by Sanity alongside Commerce Layer, which manages all commerce\u002Ftransactional data. This is the cleanest separation of concerns imaginable. Your teams can focus independently on the tools they need for their workflows. Content lives in the CMS. Commerce lives in Commerce Layer.\u003C\u002Fp>\n\n\u003Ch3>What’s next?\u003C\u002Fh3>\n\n\u003Cp>In the near future, we will also debut a Sanity Commerce application, which will be the next level of the integration. Sanity Commerce is an initiative to accelerate projects that utilize Commerce Layer as the ecommerce engine. Sanity will manage all content, including the product catalog. The result will also serve as a pre-sales tool to demonstrate the potential content architecture in a composable commerce system. The final deliverable will be a Sanity plugin that, once configured, creates a content model for a product catalog.\u003C\u002Fp>\n\n\u003Cp>Our focus makes us a truly composable solution, and aligns directly with the MACH Alliance’s core principles: “Designed to easily integrate, MACH tools are easy to add in and take out of your stack so you can select best fit solutions for each domain, instead of one large platform that works “ok” for multiple domains.” The combination of content and commerce leads to a very clean separation of concerns, which truly unlocks all the benefits promoted by the MACH Alliance.\u003C\u002Fp>\n",[],{"id":421,"_modelApiKey":422,"border":11,"caption":423,"rounded":11,"size":391,"video":424},"JGJ-Q2RuSD6ZN0diJs7XzA","video","All the content in our Demo Store application, including the data model for the  product catalog, powered by Sanity CMS.",{"videoId":425,"videoProvider":426,"videoPoster":311},"U0yR4o3167I","youtube",[428,429,431,433,435,437,439,441,443,445,447,449,451,453,455,457,459],{"attributes":311,"tag":312,"content":313},{"attributes":430,"tag":317,"content":311},{"property":316,"content":313},{"attributes":432,"tag":317,"content":311},{"name":320,"content":313},{"attributes":434,"tag":317,"content":311},{"name":323,"content":324},{"attributes":436,"tag":317,"content":311},{"property":327,"content":324},{"attributes":438,"tag":317,"content":311},{"name":330,"content":324},{"attributes":440,"tag":317,"content":311},{"property":333,"content":334},{"attributes":442,"tag":317,"content":311},{"property":337,"content":338},{"attributes":444,"tag":317,"content":311},{"property":341,"content":342},{"attributes":446,"tag":317,"content":311},{"name":345,"content":334},{"attributes":448,"tag":317,"content":311},{"property":348,"content":349},{"attributes":450,"tag":317,"content":311},{"property":352,"content":353},{"attributes":452,"tag":317,"content":311},{"property":356,"content":357},{"attributes":454,"tag":317,"content":311},{"property":360,"content":361},{"attributes":456,"tag":317,"content":311},{"property":364,"content":280},{"attributes":458,"tag":317,"content":311},{"name":367,"content":368},{"attributes":460,"tag":317,"content":311},{"name":371,"content":372},[462,466],{"name":285,"picture":463},{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":464,"customData":465},{"x":292,"y":292},{},{"name":296,"picture":467},{"url":298,"alt":299,"title":299,"width":289,"height":289,"format":300,"focalPoint":468,"customData":469},{"x":292,"y":292},{},1791534735149]