[{"data":1,"prerenderedAt":621},["ShallowReactive",2],{"bootstrap":3,"blog-how-to-make-any-website-shoppable-with-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","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":515,"_seoMetaTags":582,"authors":616},{"text":279,"isExternal":11,"url":280,"link":281},"How to make any website shoppable with Commerce Layer.","",{"_modelApiKey":212,"slug":282},"how-to-make-any-website-shoppable-with-commerce-layer","February 14, 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,{},[],"eyedropper","The fastest way to get started with headless commerce and Commerce Layer. Let's build a simple ecommerce product page with static content, make it shoppable using Commerce Layer's dropin javascript library, and deploy the application to the cloud.",{"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","How to Make Any Website Shoppable with 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","A step-by-step tutorial to learn how to make a simple ecommerce product page with static content shoppable using Commerce Layer's Drop-in Javascript library.",{"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\u002F1643037259-how-to-make-a-static-website-shoppable-with-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","2026-09-14T15:03:40Z",{"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,370,375,383,393,396,399,402,409,412,419,422,427,430,432,435,437,440,442,445,449,452,454,457,459,462,464,467,469,472,474,477,479,482,484,487,494,497,499,502,509,512],{"_modelApiKey":367,"icon":280,"copy":368,"color":369},"banner","\u003Cp>We recently revamped our Drop-in library and deprecated the old one, which this tutorial is about. The new \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fdrop-in.js\">JS Drop-in\u003C\u002Fa> can implement our commerce web components (price, availability, add to cart, shopping cart, checkout link, and my account link) that can operate as micro frontends, into any HTML webpage. Read \u003Ca href=\"https:\u002F\u002Fcommercelayer.io\u002Fblog\u002Fcomposable-commerce-with-micro-frontends\">this article\u003C\u002Fa> to learn more and see our micro frontends in action.\u003C\u002Fp>\n","red",{"_modelApiKey":371,"copy":372,"listStyle":373,"darkTheme":11,"buttons":374,"color":369,"indent":7},"wysiwyg","\u003Cp>Digital commerce has changed, and there is an increasing demand for faster and highly efficient solutions across multiple interaction channels. The rise of \u003Ca href=\"https:\u002F\u002Fcommercelayer.io\u002Fdocs\u002Fcore-concepts\u002Fheadless-commerce\">headless commerce\u003C\u002Fa> allows for more creative flexibility, better performance, and efficient software development. \u003Cstrong>Developers can now make any website shoppable, serve customers on several platforms using the same code and content with no interruption to the customer journey using tools like Commerce Layer.\u003C\u002Fstrong> As an API-first and stack agnostic platform, Commerce Layer provides commerce APIs for inventory, orders, shopping carts, prices, promotions, shipments, customers, and more. Ecommerce businesses can integrate Commerce Layer to manage the transactional part of their sales channel alongside any architecture or tool of their choice (be it WordPress, Drupal, or any headless solution) and serve their storefront on multiple presentation layers (desktop, mobile, wearable devices, IoT, etc.).\u003C\u002Fp>\n\n\u003Cp>In this article, you'll practice the basics of headless commerce by building a simple \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fheadless-swag-store.netlify.app\u002F\">ecommerce product page\u003C\u002Fa> with static content, HTML5, and TailwindCSS as seen in the screenshot below. We will then integrate Commerce Layer to make the website shoppable using the \u003Cstrong>Drop-in Javascript library\u003C\u002Fstrong> and deploy the application to the cloud.\u003C\u002Fp>\n","directional",[],{"_modelApiKey":376,"title":377,"preTitle":378,"linkText":379,"darkTheme":11,"link":380},"link_block","Drop-in library","Open-source","View on GitHub",{"_modelApiKey":203,"text":381,"label":280,"subtitle":280,"icon":280,"isExternal":7,"url":382,"link":303,"anchor":280,"openForm":11,"form":303,"htmlClassNames":280},"JS Drop-in","https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fcommercelayer-js-dropin",{"_modelApiKey":384,"border":7,"caption":280,"image":385,"size":392,"darkTheme":11,"rounded":7,"color":369},"image_block",{"url":386,"alt":387,"title":387,"width":388,"height":389,"format":290,"focalPoint":390,"customData":391},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1644848464-headless-swag-store-demo-landing.jpg","Headless swag store demo landing",1443,1440,{"x":292,"y":292},{},"standard",{"_modelApiKey":371,"copy":394,"listStyle":373,"darkTheme":11,"buttons":395,"color":369,"indent":11},"\u003Cp>The Drop-in library is a simple way to get started with headless commerce and Commerce Layer, but if you're building for your business you can opt for a deeper integration using the \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fcommercelayer-sdk\">Commerce Layer SDK\u003C\u002Fa>.\u003C\u002Fp>\n",[],{"_modelApiKey":371,"copy":397,"listStyle":373,"darkTheme":11,"buttons":398,"color":369,"indent":11},"\u003Chr>\n\n\u003Ch3>Prerequisites\u003C\u002Fh3>\n\n\u003Cul>\n\u003Cli>Some HTML, CSS, Javascript, and command-line knowledge.\u003C\u002Fli>\n\u003Cli>A general understanding of how APIs work.\u003C\u002Fli>\n\u003Cli>An IDE and Git installed.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Chr>\n",[],{"_modelApiKey":371,"copy":400,"listStyle":373,"darkTheme":11,"buttons":401,"color":369,"indent":11},"\u003Ch3>Getting started\u003C\u002Fh3>\n\n\u003Cp>Let's start by building the static website with HTML and TailwindCSS, all in a single \u003Ccode>index.html\u003C\u002Fcode> file. We will then integrate Commerce Layer using the Drop-in library.\u003C\u002Fp>\n\n\u003Ch4>1. Create the required files\u003C\u002Fh4>\n\n\u003Cp>\u003Cstrong>1.\u003C\u002Fstrong> Create a new folder somewhere on your computer.\u003C\u002Fp>\n\n\u003Cp>\u003Cstrong>2.\u003C\u002Fstrong> Create an \u003Ccode>index.html\u003C\u002Fcode> file in the root directory.\u003C\u002Fp>\n\n\u003Cp>\u003Cstrong>3.\u003C\u002Fstrong> Create a \u003Ccode>\u002Fcss\u003C\u002Fcode> directory with a \u003Ccode>custom.css\u003C\u002Fcode> file in it.\u003C\u002Fp>\n\n\u003Ch4>2. Get your API credentials\u003C\u002Fh4>\n\n\u003Cp>You can create an account to get access to and integrate with Commerce Layer APIs following the steps below:\u003C\u002Fp>\n\n\u003Cp>\u003Cstrong>1.\u003C\u002Fstrong> Create a free developer account \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdashboard.commercelayer.io\u002Fsign_up\">here\u003C\u002Fa>. If you already have an account, kindly skip to \u003Cstrong>step 3\u003C\u002Fstrong>.\u003C\u002Fp>\n\n\u003Cp>\u003Cstrong>2.\u003C\u002Fstrong> 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\u002Fp>\n\n\u003Cp>\u003Cstrong>3.\u003C\u002Fstrong> Create a new \u003Ca href=\"https:\u002F\u002Fcommercelayer.io\u002Fdocs\u002Fdata-model\u002Fusers-and-organizations\">organization\u003C\u002Fa> for your business. \u003C\u002Fp>\n\n\u003Cp>\u003Cstrong>4.\u003C\u002Fstrong> 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> and \u003Cstrong>base endpoint\u003C\u002Fstrong>. Kindly remember to save that as we'll use it to interact with our application later.\u003C\u002Fp>\n",[],{"_modelApiKey":384,"border":7,"caption":280,"image":403,"size":392,"darkTheme":11,"rounded":7,"color":369},{"url":404,"alt":405,"title":405,"width":289,"height":406,"format":290,"focalPoint":407,"customData":408},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1658240602-screenshot-sales-channel-website-expiry.jpg","Dashboard screenshot sales channel",892,{"x":292,"y":292},{},{"_modelApiKey":371,"copy":410,"listStyle":373,"darkTheme":11,"buttons":411,"color":369,"indent":11},"\u003Cp>\u003Cstrong>5.\u003C\u002Fstrong> 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>, \u003Cstrong>client secret\u003C\u002Fstrong>, and \u003Cstrong>base endpoint\u003C\u002Fstrong>. Kindly remember to save that as we'll use it to interact with the CLI later.\u003C\u002Fp>\n",[],{"_modelApiKey":384,"border":7,"caption":280,"image":413,"size":392,"darkTheme":11,"rounded":7,"color":369},{"url":414,"alt":415,"title":415,"width":289,"height":416,"format":290,"focalPoint":417,"customData":418},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1658240642-screenshot-integration-cli-expiry.jpg","Dashboard screenshot CLI",761,{"x":292,"y":292},{},{"_modelApiKey":371,"copy":420,"listStyle":373,"darkTheme":11,"buttons":421,"color":369,"indent":11},"\u003Ch4>3. Setup Commerce Layer CLI\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. You can set it up using the following steps.\u003C\u002Fp>\n\n\u003Cp>\u003Cstrong>1.\u003C\u002Fstrong> Install the CLI using your favorite package manager:\u003C\u002Fp>\n",[],{"_modelApiKey":423,"code":424,"showLineNumbers":11,"highlightLines":280,"language":425,"size":426},"code_block","\u002F\u002Fnpm\nnpm install -g @commercelayer\u002Fcli\n\n\u002F\u002Fyarn\nyarn global add @commercelayer\u002Fcli","shell","Standard",{"_modelApiKey":371,"copy":428,"listStyle":373,"darkTheme":11,"buttons":429,"color":369,"indent":11},"\u003Cp>\u003Cstrong>2.\u003C\u002Fstrong> Log into your application via the CLI using the previously created CLI credentials like so:\u003C\u002Fp>\n",[],{"_modelApiKey":423,"code":431,"showLineNumbers":11,"highlightLines":280,"language":425,"size":426},"commercelayer applications:login -o \u003CorganizationSlug> -i \u003CclientId> -s \u003CclientSecret> -a \u003CapplicationAlias>",{"_modelApiKey":371,"copy":433,"listStyle":373,"darkTheme":11,"buttons":434,"color":369,"indent":11},"\u003Cp>You will do the above for both applications (sales channel and integration). The login command adds the application and sets it as the current one in session. You should log into the sales channel first, and then the integration. This way, you'll have the integration as the current app (which is required by the seeder).\u003C\u002Fp>\n\n\u003Ch4>4. Seed the organization with test data\u003C\u002Fh4>\n\n\u003Cp>As we mentioned earlier, you can seed your organization with a merchant, a set of markets, products (SKUs), related prices, shipping methods, inventory, etc. via the CLI.\u003C\u002Fp>\n\n\u003Cp>\u003Cstrong>1.\u003C\u002Fstrong> Install the \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fcommercelayer-cli-plugin-seeder\">seeder plugin\u003C\u002Fa> using the command below:\u003C\u002Fp>\n",[],{"_modelApiKey":423,"code":436,"showLineNumbers":11,"highlightLines":280,"language":425,"size":426},"commercelayer plugins:install seeder",{"_modelApiKey":371,"copy":438,"listStyle":373,"darkTheme":11,"buttons":439,"color":369,"indent":11},"\u003Cp>\u003Cstrong>2.\u003C\u002Fstrong> Seed your organization using the command below:\u003C\u002Fp>\n",[],{"_modelApiKey":423,"code":441,"showLineNumbers":11,"highlightLines":280,"language":425,"size":426},"commercelayer seed",{"_modelApiKey":371,"copy":443,"listStyle":373,"darkTheme":11,"buttons":444,"color":369,"indent":11},"\u003Cp>The CLI will use Commerce Layer's default seed data to populate your organization with a set of products (SKUs), related prices, and inventory information.\u003C\u002Fp>\n\n\u003Ch3>Build the static product page\u003C\u002Fh3>\n\n\u003Cp>Now let's build our product page in a single \u003Ccode>index.html\u003C\u002Fcode> file which will contain the markup for product details, prices, available variants, available quantity, item availability, shopping bag, and checkout. You can find the full code on \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fheadless-swag-store\u002Findex.html\">GitHub\u003C\u002Fa>. In this tutorial, we will only highlight the important HTML elements and related data attributes we need for dynamic data. We will replace all style classes with the dummy content \u003Ccode>[...]\u003C\u002Fcode> so you can focus on the utility classes required to interact with the Drop-in library.\u003C\u002Fp>\n\n\u003Cp>We will be using some \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FLearn\u002FHTML\u002FHowto\u002FUse_data_attributes\">data attributes\u003C\u002Fa> to store extra information that doesn't have any visual representation like \u003Ccode>data-sku-code\u003C\u002Fcode> (to store the SKU code of an item) or \u003Ccode>data-add-to-bag-id\u003C\u002Fcode> (to add a selected variant to the shopping bag when the "Add to bag" button is clicked). The Drop-in library requires some data attributes to add dynamic data to a static web page. With this mechanism, \u003Cstrong>you're building ecommerce with almost no code required\u003C\u002Fstrong> (just HTML tags). Now let's proceed!\u003C\u002Fp>\n\n\u003Ch4>1. Create static content\u003C\u002Fh4>\n\n\u003Cp>You should add some content to the page, such as product names, descriptions, reviews and images, and more. This content can be created with any CMS and rendered with any language. For this tutorial we're using just plain HTML.\u003C\u002Fp>\n",[],{"_modelApiKey":423,"code":446,"showLineNumbers":11,"highlightLines":280,"language":447,"size":448},"\u003C!DOCTYPE html>\n\u003Chtml>\n   \u003Chead>\n      \u003C!-- Static content -->\n      \u003Ctitle>Headless Swag Store\u003C\u002Ftitle>\n      \u003Clink\n\t      href=\"https:\u002F\u002Funpkg.com\u002Ftailwindcss@^2\u002Fdist\u002Ftailwind.min.css\"\n\t      rel=\"stylesheet\"\n\t    \u002F>\u003Cdiv class=\"mt-10\">\n                \u003Cdiv class=\"flex items-center justify-between\">\n                  \u003Ch3 class=\"text-sm text-indigo-600 font-medium\">\n                    Choose a size\n                  \u003C\u002Fh3>\n                \u003C\u002Fdiv>\n\n                \u003Cdiv class=\"mt-4 flex -mx-2\">\n                  \u003Cdiv class=\"flex-1 px-2\">\n                    \u003Cselect\n                      name=\"variant\"\n                      class=\"clayer-variant-select block appearance-none border-2 border-gray-500 text-base-700 py-3 px-4 pr-8 rounded\"\n                      data-sku-reference=\"SWEETHMUB7B7B7000000\"\n                      data-price-container-id=\"price\"\n                      data-availability-message-container-id=\"availability-message\"\n                      data-add-to-bag-id=\"add-to-bag\"\n                      data-add-to-bag-quantity-id=\"add-to-bag-quantity\"\n                    >\n                      \u003Coption value=\"\" disabled selected>Select variant\u003C\u002Foption>\n                      \u003Coption\n                        class=\"clayer-variant\"\n                        data-sku-code=\"SWEETHMUB7B7B7000000SXXX\"\n                        data-sku-name=\"Sport Grey Unisex Hoodie Sweatshirt with Black Logo (S)\"\n                        data-sku-image-url=\"https:\u002F\u002Fimg.commercelayer.io\u002Fskus\u002FSWEETHMUB7B7B7000000.png?fm=jpg&q=90\"\n                      >\n                        Small\n                      \u003C\u002Foption>\n                      \u003Coption\n                        class=\"clayer-variant\"\n                        data-sku-code=\"SWEETHMUB7B7B7000000MXXX\"\n                        data-sku-name=\"Sport Grey Unisex Hoodie Sweatshirt with Black Logo (M)\"\n                        data-sku-image-url=\"https:\u002F\u002Fimg.commercelayer.io\u002Fskus\u002FSWEETHMUB7B7B7000000.png?fm=jpg&q=90\"\n                      >\n                        Medium\n                      \u003C\u002Foption>\n                      \u003Coption\n                        class=\"clayer-variant\"\n                        data-sku-code=\"SWEETHMUB7B7B7000000LXXX\"\n                        data-sku-name=\"Sport Grey Unisex Hoodie Sweatshirt with Black Logo (L)\"\n                        data-sku-image-url=\"https:\u002F\u002Fimg.commercelayer.io\u002Fskus\u002FSWEETHMUB7B7B7000000.png?fm=jpg&q=90\"\n                      >\n                        Large\n                      \u003C\u002Foption>\n                      \u003Coption\n                        class=\"clayer-variant\"\n                        data-sku-code=\"SWEETHMUB7B7B7000000XLXX\"\n                        data-sku-name=\"Sport Grey Unisex Hoodie Sweatshirt with Black Logo (XL)\"\n                        data-sku-image-url=\"https:\u002F\u002Fimg.commercelayer.io\u002Fskus\u002FSWEETHMUB7B7B7000000.png?fm=jpg&q=90\"\n                      >\n                        Extra Large\n                      \u003C\u002Foption>\n                    \u003C\u002Fselect>\n                  \u003C\u002Fdiv>\n                  \u003C!-- Add to bag quantity -->\n                  \u003Cdiv class=\"flex-1 px-2\">\n                    \u003Clabel for=\"add-to-bag-quantity\" class=\"sr-only\"\n                      >Add to bag quantity\u003C\u002Flabel\n                    >\n                    \u003Cinput\n                      id=\"add-to-bag-quantity\"\n                      type=\"number\"\n                      min=\"1\"\n                      class=\"clayer-add-to-bag-quantity block appearance-none border-2 border-gray-500 text-base-700 py-3 px-4 pr-2 rounded\"\n                    \u002F>\n                  \u003C\u002Fdiv>\n                \u003C\u002Fdiv>\n              \u003C\u002Fdiv>\n      \u003Clink\n\t      rel=\"icon\"\n\t      href=\"https:\u002F\u002Fdata.commercelayer.app\u002Fassets\u002Fimages\u002Ffavicons\u002Ffavicon.ico\"\n      \u002F>   \n\t \u003C\u002Fhead>\n   \u003Cbody>\n      \u003C!-- Static content -->\n\n      \u003C!-- Image gallery -->\n      \u003Cdiv class=\"mt-6 max-w-2xl mx-auto sm:px-6 lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-3 lg:gap-x-8\">\n         \u003Cdiv class=\"hidden aspect-w-3 aspect-h-4 rounded-lg overflow-hidden lg:block\" >\n            \u003Cimg\n               src=\".\u002Fassets\u002Fimg\u002F01.png\"\n               alt=\"Model wearing the gray men hoodie\"\n               class=\"w-full h-full object-center object-cover\"\n               \u002F>\n         \u003C\u002Fdiv>\n         \u003Cdiv class=\"hidden lg:grid lg:grid-cols-1 lg:gap-y-8\">\n            \u003Cdiv class=\"aspect-w-3 aspect-h-2 rounded-lg overflow-hidden\">\n               \u003Cimg\n                  src=\".\u002Fassets\u002Fimg\u002F02.png\"\n                  alt=\"The gray men hoodie\"\n                  class=\"w-full h-full object-center object-cover\"\n                  \u002F>\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"aspect-w-3 aspect-h-2 rounded-lg overflow-hidden\">\n               \u003Cimg\n                  src=\".\u002Fassets\u002Fimg\u002F03.png\"\n                  alt=\"The gray men hoodie\"\n                  class=\"w-full h-full object-center object-cover\"\n                  \u002F>\n            \u003C\u002Fdiv>\n         \u003C\u002Fdiv>\n         \u003Cdiv class=\"aspect-w-4 aspect-h-5 sm:rounded-lg sm:overflow-hidden lg:aspect-w-3 lg:aspect-h-4\" >\n            \u003Cimg\n               src=\".\u002Fassets\u002Fimg\u002F04.png\"\n               alt=\"The gray men hoodie\"\n               class=\"w-full h-full object-center object-cover\"\n               \u002F>\n         \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Product info -->\n      \u003Cdiv class=\"max-w-2xl mx-auto pt-10 pb-8 px-4 sm:px-6 lg:max-w-7xl lg:pt-16 lg:px-8 lg:grid lg:grid-cols-3 lg:grid-rows-[auto,auto,1fr] lg:gap-x-8\" >\n      \u003Cdiv class=\"lg:col-span-2 lg:border-r lg:border-gray-200 lg:pr-8\">\n         \u003Ch1 class=\"text-2xl font-extrabold tracking-tight text-gray-900 sm:text-3xl\" >\n            Sport Grey Unisex Hoodie Sweatshirt\n         \u003C\u002Fh1>\n\n         \u003C!-- Description and details -->\n         \u003Cdiv class=\"py-4\">\n            \u003Ch3 class=\"sr-only\">Description\u003C\u002Fh3>\n            \u003Cdiv class=\"space-y-6\">\n               \u003Cp class=\"text-base text-gray-900\">\n                  This comfortable hoodie is made of 100% combed ring-spun\n                  cotton except for heather black logo, which contains\n                  polyester. Our premium Unisex Sport Hoodie Sweatshirt is\n                  everything you could ask for: it's warm and cozy,\n                  heavyweight, unique, roomy, and it's built to last. Sign up\n                  for our subscription service and be the first to get new,\n                  exciting colors, like our upcoming \"Charcoal Gray\" limited\n                  release.\n               \u003C\u002Fp>\n            \u003C\u002Fdiv>\n         \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n   \u003C\u002Fbody>\n\u003C\u002Fhtml>","html","Wide",{"_modelApiKey":371,"copy":450,"listStyle":373,"darkTheme":11,"buttons":451,"color":369,"indent":11},"\u003Ch4>2. Add configuration\u003C\u002Fh4>\n\n\u003Cp>Add the code below to \u003Ccode><body>\u003C\u002Fcode> section of the \u003Ccode>index.html\u003C\u002Fcode> file just before the \u003Ccode><\u002Fbody>\u003C\u002Fcode> tag and add the required publishable configuration data.\u003C\u002Fp>\n",[],{"_modelApiKey":423,"code":453,"showLineNumbers":11,"highlightLines":280,"language":447,"size":448},"\u003C!-- Config -->\n\u003Cdiv\n  id=\"clayer-config\"\n  data-base-url=\"\u003CyourOrganizationUrl>\"\n  data-cache=\"true\"\n  data-client-id=\"\u003CyourClientId>\"\n  data-market-id=\"\u003CyourMarketId>\"\n  data-country-code=\"US\"\n  data-language-code=\"en\"\n  data-cart-url=\"\u003Chttps:\u002F\u002Fexample.com\u002Fcart>\"\n  data-return-url=\"\u003Chttps:\u002F\u002Fexample.com\u002Freturn>\"\n  data-privacy-url=\"\u003Chttps:\u002F\u002Fexample.com\u002Fprivacy>\"\n  data-terms-url=\"\u003Chttps:\u002F\u002Fexample.com\u002Fterms>\"\n  data-dev-settings-debug=\"true\"\n  data-dev-settings-console=\"true\"\n  data-dev-settings-trace=\"true\"\n>\u003C\u002Fdiv>\n\n\u003C!-- JS Library -->\n\u003Cscript\n  type=\"text\u002Fjavascript\"\n  src=\"\u003Chttps:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@commercelayer\u002Fjs-dropin@1.5.12\u002Flib\u002Findex.js>\">\n\u003C\u002Fscript>",{"_modelApiKey":371,"copy":455,"listStyle":373,"darkTheme":11,"buttons":456,"color":369,"indent":11},"\u003Cul>\n\u003Cli>\u003Ccode>clayer-config\u003C\u002Fcode> — stores all the data attributes with your credentials and page preferences.\u003C\u002Fli>\n\u003Cli>\u003Ccode>data-base-url\u003C\u002Fcode> — stores your organization base endpoint as defined on Commerce Layer (something like \u003Ccode>https:\u002F\u002Fyour-organization.commercelayer.io\u003C\u002Fcode>).\u003C\u002Fli>\n\u003Cli>\u003Ccode>data-client-id\u003C\u002Fcode> — stores your sales channel application's client ID.\u003C\u002Fli>\n\u003Cli>\u003Ccode>data-market-id\u003C\u002Fcode> — stores the \u003Cem>number\u003C\u002Fem> of the market you want to work on as defined in Commerce Layer.\u003C\u002Fli>\n\u003Cli>\u003Ccode>data-country-code\u003C\u002Fcode> — stores the country code of the country assigned to an order (e.g. \u003Ccode>US\u003C\u002Fcode>).\u003C\u002Fli>\n\u003Cli>\u003Ccode>data-language-code\u003C\u002Fcode> — stores the language assigned to an order (e.g. \u003Ccode>en-US\u003C\u002Fcode>).\u003C\u002Fli>\n\u003Cli>\u003Ccode>data-cart-url\u003C\u002Fcode>, \u003Ccode>data-return-url\u003C\u002Fcode>, \u003Ccode>data-privacy-url\u003C\u002Fcode>, \u003Ccode>data-terms-url\u003C\u002Fcode> — store the links to external pages that Commerce Layer should redirect your user to upon certain requests (we don't need these for this tutorial, so we'll add some dummy links).\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch4>3. Add a price\u003C\u002Fh4>\n\n\u003Cp>Add the markup below to fetch the selling price (amount) and original price (compare-at-amount) of an SKU. You should add an element with \u003Ccode>clayer-price\u003C\u002Fcode> class and \u003Ccode>data-sku-code\u003C\u002Fcode> data attribute wherever you want to show a product price. The child element with class \u003Ccode>amount\u003C\u002Fcode> gets populated with the price that has been defined in Commerce Layer for that SKU code (for the market defined in the configuration step above). The child element with class \u003Ccode>compare-at-amount\u003C\u002Fcode> gets populated only if compare-at-amount is defined and is higher than the amount. The \u003Ccode>price\u003C\u002Fcode> ID is used to match the \u003Ccode>data-price-container-id\u003C\u002Fcode> in the variant options (as seen in the next section).\u003C\u002Fp>\n",[],{"_modelApiKey":423,"code":458,"showLineNumbers":11,"highlightLines":280,"language":447,"size":448},"\u003C!DOCTYPE html>\n\u003Chtml>\n   \u003Chead>\n      \u003C!-- Static content [...] -->\n   \u003C\u002Fhead>\n   \u003Cbody>\n      \u003C!-- Static content [...] -->\n\n      \u003C!-- Price -->\n      \u003Cdiv class=\"...\">\n      \u003Ch2 class=\"...\">Product information\u003C\u002Fh2>\n      \u003Cdiv\n         class=\"... clayer-price\"\n         id=\"price\"\n         data-sku-code=\"SWEETHMUB7B7B7000000XLXX\"\n         >\n         \u003Cspan class=\"... amount\">\u003C\u002Fspan>\n         \u003Cspan class=\"... compare-at-amount\">\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Config [...] -->\n\n      \u003C!-- JS Library [...] -->\n   \u003C\u002Fbody>\n\u003C\u002Fhtml>",{"_modelApiKey":371,"copy":460,"listStyle":373,"darkTheme":11,"buttons":461,"color":369,"indent":11},"\u003Ch4>4. Add variants selction\u003C\u002Fh4>\n\n\u003Cp>If your product has many variants, add an element with \u003Ccode>clayer-variant\u003C\u002Fcode> class and \u003Ccode>data-sku-code\u003C\u002Fcode> data attribute for each variant option. This will fetch the SKU for each variant from Commerce Layer. You can use either a select tag or a list of radio buttons (appending the class \u003Ccode>clayer-variant-select\u003C\u002Fcode> or \u003Ccode>clayer-variant-radio\u003C\u002Fcode> respectively). You can also add other data attributes that will be used in the shopping bag based on a user's variant selection such as:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>\u003Ccode>data-sku-name\u003C\u002Fcode> — the name of the selected SKU to be displayed in the shopping bag.\u003C\u002Fli>\n\u003Cli>\u003Ccode>data-sku-reference\u003C\u002Fcode> — the reference of the selected SKU to be displayed in the shopping bag.\u003C\u002Fli>\n\u003Cli>\u003Ccode>data-sku-image-url\u003C\u002Fcode> — the URL to an image of the SKU to be displayed in the shopping bag.\u003C\u002Fli>\n\u003Cli>\u003Ccode>data-price-container-id\u003C\u002Fcode> — the ID of the DOM element that contains the price for this SKU, in the current market (potentially different variants can have different prices, when selecting a new variant, the price will be updated accordingly).\u003C\u002Fli>\n\u003Cli>\u003Ccode>data-availability-message-container-id\u003C\u002Fcode> — the ID of the DOM element that contains the availability message for this SKU, in the current market (more on this later).\u003C\u002Fli>\n\u003Cli>\u003Ccode>data-add-to-bag-id\u003C\u002Fcode> — the ID of the "Add to bag" DOM element (when clicking the "Add to bag" button with the specified ID, the selected variant will be added to bag).\u003C\u002Fli>\n\u003Cli>\u003Ccode>data-add-to-bag-quantity-id\u003C\u002Fcode> — the ID of the "Add to bag quantity" DOM element (when clicking the "Add to bag" button with the specified ID, the selected quantity of the variant will be added to bag).\u003C\u002Fli>\n\u003C\u002Ful>\n",[],{"_modelApiKey":423,"code":463,"showLineNumbers":11,"highlightLines":280,"language":447,"size":448},"\u003C!DOCTYPE html>\n\u003Chtml>\n   \u003Chead>\n      \u003C!-- Static content [...] -->\n   \u003C\u002Fhead>\n   \u003Cbody>\n      \u003C!-- Static content [...] -->\n\n      \u003C!-- Price  [...] -->\n\n      \u003C!-- Variants (select sizes) -->\n    \u003Cdiv class=\"...\">\n      \u003Cdiv class=\"...\">\n        \u003Ch3 class=\"...\">Choose a size\u003C\u002Fh3>\n      \u003C\u002Fdiv>\n\n      \u003Cdiv class=\"mt-4 flex -mx-2\">\n        \u003Cdiv class=\"flex-1 px-2\">\n          \u003Cselect\n            name=\"variant\"\n            class=\"clayer-variant-select ...\"\n            data-sku-reference=\"SWEETHMUB7B7B7000000\"\n            data-price-container-id=\"price\"\n            data-availability-message-container-id=\"availability-message\"\n            data-add-to-bag-id=\"add-to-bag\"\n            data-add-to-bag-quantity-id=\"add-to-bag-quantity\"\n          >\n            \u003Coption value=\"\" disabled selected>Select variant\u003C\u002Foption>\n            \u003Coption\n              class=\"clayer-variant\"\n              data-sku-code=\"SWEETHMUB7B7B7000000SXXX\"\n              data-sku-name=\"Sport Grey Unisex Hoodie Sweatshirt with Black Logo (S)\"\n              data-sku-image-url=\"https:\u002F\u002Fimg.commercelayer.io\u002Fskus\u002FSWEETHMUB7B7B7000000.png?fm=jpg&q=90\"\n            >Small\n            \u003C\u002Foption>\n            \u003Coption\n              class=\"clayer-variant\"\n              data-sku-code=\"SWEETHMUB7B7B7000000MXXX\"\n              data-sku-name=\"Sport Grey Unisex Hoodie Sweatshirt with Black Logo (M)\"\n              data-sku-image-url=\"https:\u002F\u002Fimg.commercelayer.io\u002Fskus\u002FSWEETHMUB7B7B7000000.png?fm=jpg&q=90\"\n            >Medium\n            \u003C\u002Foption>\n            \u003Coption\n              class=\"clayer-variant\"\n              data-sku-code=\"SWEETHMUB7B7B7000000LXXX\"\n              data-sku-name=\"Sport Grey Unisex Hoodie Sweatshirt with Black Logo (L)\"\n              data-sku-image-url=\"https:\u002F\u002Fimg.commercelayer.io\u002Fskus\u002FSWEETHMUB7B7B7000000.png?fm=jpg&q=90\"\n            >Large\n            \u003C\u002Foption>\n            \u003Coption\n              class=\"clayer-variant\"\n              data-sku-code=\"SWEETHMUB7B7B7000000XLXX\"\n              data-sku-name=\"Sport Grey Unisex Hoodie Sweatshirt with Black Logo (XL)\"\n              data-sku-image-url=\"https:\u002F\u002Fimg.commercelayer.io\u002Fskus\u002FSWEETHMUB7B7B7000000.png?fm=jpg&q=90\"\n            >Extra Large\n            \u003C\u002Foption>\n          \u003C\u002Fselect>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n \t\t  \u003C!-- Other variant input elements [...] -->\n\n      \u003C!-- Config [...] -->\n\n      \u003C!-- JS Library [...] -->\n   \u003C\u002Fbody>",{"_modelApiKey":371,"copy":465,"listStyle":373,"darkTheme":11,"buttons":466,"color":369,"indent":11},"\u003Ch4>5. Add to bag\u003C\u002Fh4>\n\n\u003Cp>When an option (variant) is selected and the "Add to bag" button is clicked, the selected variant is added to the shopping bag using the \u003Ccode>clayer-add-to-bag\u003C\u002Fcode> class and the ID that matches the variants' \u003Ccode>data-add-to-bag-id\u003C\u002Fcode>. You can also optionally add a quantity field to let the customer add more than one item to the shopping bag using the \u003Ccode>clayer-add-to-bag-quantity\u003C\u002Fcode> attribute.\u003C\u002Fp>\n",[],{"_modelApiKey":423,"code":468,"showLineNumbers":11,"highlightLines":280,"language":447,"size":448},"\u003C!DOCTYPE html>\n\u003Chtml>\n   \u003Chead>\n      \u003C!-- Static content [...] -->\n   \u003C\u002Fhead>\n   \u003Cbody>\n      \u003C!-- Static content [...] -->\n\n      \u003C!-- Price  [...] -->\n\n      \u003C!-- Variants (select sizes) -->\n\n      \u003C!-- Add to bag quantity -->\n      \u003Cdiv class=\"...\">\n\t      \u003Clabel for=\"add-to-bag-quantity\" class=\"...\">Add to bag quantity\u003C\u002Flabel>\n        \u003Cinput\n\t\t      id=\"add-to-bag-quantity\"\n\t\t      type=\"number\"\n\t\t      min=\"1\"\n\t\t      class=\"clayer-add-to-bag-quantity ...\"\n        \u002F>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Add to bag button -->\n      \u003Ca\n         href=\"#\"\n         class=\"clayer-add-to-bag ...\"\n         id=\"add-to-bag\"\n         data-availability-message-container-id=\"availability-message\"\n         >\n      Add to bag\n      \u003C\u002Fa>\n\n      \u003C!-- Config [...] -->\n\n      \u003C!-- JS Library [...] -->\n   \u003C\u002Fbody>\n\u003C\u002Fhtml>",{"_modelApiKey":371,"copy":470,"listStyle":373,"darkTheme":11,"buttons":471,"color":369,"indent":11},"\u003Ch4>6. Add availability message templates\u003C\u002Fh4>\n\n\u003Cp>Add an element with \u003Ccode>clayer-availability-message-available-template\u003C\u002Fcode> ID as the template tag to be displayed when the selected SKU is available. All the child elements will be populated with the delivery lead time and shipping method information related to the selected variant.\u003C\u002Fp>\n\n\u003Cp>Add an element with \u003Ccode>clayer-availability-message-unavailable-template\u003C\u002Fcode> ID as the template tag to be displayed when the selected SKU is not available. This element will be appended to a specific container when customers will try to add an SKU to the shopping bag and that SKU’s stock item has a quantity of zero or doesn’t exist at all. If you try to create a line item, you will get an "out of stock" error. The \u003Ccode>clayer-availability-message-unavailable-template\u003C\u002Fcode> is used to store the "out of stock" message.\u003C\u002Fp>\n",[],{"_modelApiKey":423,"code":473,"showLineNumbers":11,"highlightLines":280,"language":447,"size":448},"\u003C!DOCTYPE html>\n\u003Chtml>\n   \u003Chead>\n      \u003C!-- Static content [...] -->\n   \u003C\u002Fhead>\n   \u003Cbody>\n      \u003C!-- Static content [...] -->\n\n      \u003C!-- Price  [...] -->\n\n      \u003C!-- Variants (select sizes) -->\n\n      \u003C!-- Add to bag quantity -->\n\n      \u003C!-- Availability message templates -->\n      \u003Cdiv\n         class=\"... clayer-availability-message-container\"\n         id=\"availability-message\"\n         >\u003C\u002Fdiv>\n      \u003Ctemplate id=\"clayer-availability-message-available-template\">\n         \u003Cp class=\"...\">\n            Available in\n            \u003Cspan class=\"clayer-availability-message-available-min-days\">\u003C\u002Fspan>\n            -\n            \u003Cspan class=\"clayer-availability-message-available-max-days\">\u003C\u002Fspan>\n            days with\n            \u003Cspan class=\"clayer-availability-message-available-shipping-method-name\">\u003C\u002Fspan>\n            (\u003Cspan class=\"clayer-availability-message-available-shipping-method-price\">\u003C\u002Fspan>)\n         \u003C\u002Fp>\n      \u003C\u002Ftemplate>\n      \u003Ctemplate id=\"clayer-availability-message-unavailable-template\">\n         \u003Cp class=\"...\">The selected SKU is not available.\u003C\u002Fp>\n      \u003C\u002Ftemplate>\n      \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Config [...] -->\n\n      \u003C!-- JS Library [...] -->\n   \u003C\u002Fbody>\n\u003C\u002Fhtml>",{"_modelApiKey":371,"copy":475,"listStyle":373,"darkTheme":11,"buttons":476,"color":369,"indent":11},"\u003Ch4>Add shopping bag summary\u003C\u002Fh4>\n\n\u003Cp>The shopping bag includes a list of all items added to the bag alongside a summary of the current shopping bag details. Add an element with \u003Ccode>clayer-shopping-bag-container\u003C\u002Fcode> ID wherever you want to show the shopping bag. The \u003Ccode>clayer-shopping-bag-items-container\u003C\u002Fcode> is used as the parent element of the shopping bag line items, built from the \u003Ccode>clayer-shopping-bag-item-template\u003C\u002Fcode> template tag. The lists below explain what each child data attribute does.\u003C\u002Fp>\n\n\u003Cp>The line item template elements:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>\u003Ccode>clayer-shopping-bag-item-name\u003C\u002Fcode> — will be populated with the name of the SKU.\u003C\u002Fli>\n\u003Cli>\u003Ccode>clayer-shopping-bag-item-unit-amount\u003C\u002Fcode> — displays the unit amount of the SKU.\u003C\u002Fli>\n\u003Cli>\u003Ccode>clayer-shopping-bag-item-qty-container\u003C\u002Fcode> — displays an input field with the quantity of the SKU added to the bag (you can use this to update the quantity too).\u003C\u002Fli>\n\u003Cli>\u003Ccode>clayer-shopping-bag-item-availability-message-container\u003C\u002Fcode> — displays an "out of stock" message (contained in \u003Ccode>clayer-availability-message-unavailable-template\u003C\u002Fcode>) when you change a quantity and that quantity is not available.\u003C\u002Fli>\n\u003Cli>\u003Ccode>clayer-shopping-bag-item-total-amount\u003C\u002Fcode> — displays the total amount of a line item.\u003C\u002Fli>\n\u003Cli>\u003Ccode>clayer-shopping-bag-item-remove\u003C\u002Fcode> — displays a link to remove an item from the shopping bag.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>The order summary elements:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>\u003Ccode>clayer-shopping-bag-subtotal\u003C\u002Fcode> — displays the subtotal amount of the entire shopping bag.\u003C\u002Fli>\n\u003Cli>\u003Ccode>clayer-shopping-bag-shipping\u003C\u002Fcode> — displays the shipping cost of the order.\u003C\u002Fli>\n\u003Cli>\u003Ccode>clayer-shopping-bag-payment\u003C\u002Fcode> — displays the selected payment method charge (if any).\u003C\u002Fli>\n\u003Cli>\u003Ccode>clayer-shopping-bag-discount\u003C\u002Fcode> — displays the discount amount of the order (if applied).\u003C\u002Fli>\n\u003Cli>\u003Ccode>clayer-shopping-bag-taxes\u003C\u002Fcode> — displays the cost of tax (if present).\u003C\u002Fli>\n\u003Cli>\u003Ccode>clayer-shopping-bag-total\u003C\u002Fcode> — displays the grand total summing up all the above costs for the order.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>By default, the shopping bag container is always closed. The \u003Ccode>clayer-shopping-bag-toggle\u003C\u002Fcode> element toggles an open class (attached to a button) on the shopping bag container.\u003C\u002Fp>\n",[],{"_modelApiKey":423,"code":478,"showLineNumbers":11,"highlightLines":280,"language":447,"size":448},"\u003C!DOCTYPE html>\n\u003Chtml>\n   \u003Chead>\n      \u003C!-- Static content [...] -->\n   \u003C\u002Fhead>\n   \u003Cbody>\n      \u003C!-- Static content [...] -->\n\n      \u003C!-- Price  [...] -->\n\n      \u003C!-- Variants (select sizes) -->\n\n      \u003C!-- Add to bag quantity -->\n\n      \u003C!-- Availability message templates -->\n\n      \u003C!-- Shopping bag -->\n      \u003Cdiv class=\"...\">\n      \u003Ch2 class=\"...\">Shopping bag\u003C\u002Fh2>\n      \u003Cp class=\"...\">\n         Your shopping bag contains\n         \u003Cspan class=\"... clayer-shopping-bag-items-count\">0\u003C\u002Fspan>\n         items worth\n         \u003Cspan class=\"... clayer-shopping-bag-total\">\u003C\u002Fspan>\n      \u003C\u002Fp>\n      \u003Cbutton class=\"... clayer-shopping-bag-toggle\">\n      Toggle Bag ⇅\n      \u003C\u002Fbutton>\n      \u003Cdiv id=\"clayer-shopping-bag-container\">\n      \u003Ctable class=\"...\">\n         \u003Cthead class=\"...\">\n            \u003Ctr>\n               \u003Cth class=\"...\">\n                  SKU\n               \u003C\u002Fth>\n               \u003Cth class=\"...\">\n                  Unit price\n               \u003C\u002Fth>\n               \u003Cth class=\"...\">\n                  Q.ty\n               \u003C\u002Fth>\n               \u003Cth class=\"...\">\n                  Total\n               \u003C\u002Fth>\n               \u003Cth class=\"...\">\n               \u003C\u002Fth>\n            \u003C\u002Ftr>\n         \u003C\u002Fthead>\n         \u003Ctbody class=\"...\" id=\"clayer-shopping-bag-items-container\">\u003C\u002Ftbody>\n         \u003Ctemplate id=\"clayer-shopping-bag-item-template\">\n            \u003Ctr>\n               \u003Ctd class=\"...\">\n                  \u003Cspan class=\"clayer-shopping-bag-item-name\">\u003C\u002Fspan>\n               \u003C\u002Ftd>\n               \u003Ctd class=\"... clayer-shopping-bag-item-unit-amount\">\u003C\u002Ftd>\n               \u003Ctd class=\"... clayer-shopping-bag-item-qty-container\">\n                  \u003Cinput\n                     type=\"number\"\n                     min=\"1\"\n                     class=\"...\"\n                     \u002F>\n                  \u003Cspan\n                     class=\"... clayer-shopping-bag-item-availability-message-container\">\u003C\u002Fspan>\n               \u003C\u002Ftd>\n               \u003Ctd class=\"... clayer-shopping-bag-item-total-amount\">\u003C\u002Ftd>\n               \u003Ctd>\n                  \u003Ca href=\"#\" class=\"... clayer-shopping-bag-item-remove\">❌\u003C\u002Fa>\n               \u003C\u002Ftd>\n            \u003C\u002Ftr>\n         \u003C\u002Ftemplate>\n      \u003C\u002Ftable>\n      \u003Chr \u002F>\n      \u003Cdiv class=\"...\">\n         \u003Cdiv class=\"...\">\n            \u003Cp class=\"...\">\n               Subtotal:\n               \u003Cspan class=\"clayer-shopping-bag-subtotal\">\u003C\u002Fspan>\n            \u003C\u002Fp>\n            \u003Cp class=\"...\">\n               Shipping:\n               \u003Cspan class=\"clayer-shopping-bag-shipping\">\u003C\u002Fspan>\n            \u003C\u002Fp>\n            \u003Cp class=\"...\">\n               Payment:\n               \u003Cspan class=\"clayer-shopping-bag-payment\">\u003C\u002Fspan>\n            \u003C\u002Fp>\n            \u003Cp class=\"...\">\n               Discount:\n               \u003Cspan class=\"clayer-shopping-bag-discount\">\u003C\u002Fspan>\n            \u003C\u002Fp>\n            \u003Cp class=\"...\">\n               Taxes:\n               \u003Cspan class=\"clayer-shopping-bag-taxes\">\u003C\u002Fspan>\n            \u003C\u002Fp>\n            \u003Cp class=\"...\">\n               Total:\n               \u003Cspan class=\"clayer-shopping-bag-total\">\u003C\u002Fspan>\n            \u003C\u002Fp>\n         \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Config [...] -->\n\n      \u003C!-- JS Library [...] -->\n   \u003C\u002Fbody>\n\u003C\u002Fhtml>",{"_modelApiKey":371,"copy":480,"listStyle":373,"darkTheme":11,"buttons":481,"color":369,"indent":11},"\u003Ch4>Add checkout button\u003C\u002Fh4>\n\n\u003Cp>Add an element with \u003Ccode>clayer-shopping-bag-checkout\u003C\u002Fcode> class wherever you want to show the checkout button. This button will link to a dedicated checkout page where a customer can complete their purchase and place the order. We'll explain how this works soon.\u003C\u002Fp>\n",[],{"_modelApiKey":423,"code":483,"showLineNumbers":11,"highlightLines":280,"language":447,"size":448},"\u003C!DOCTYPE html>\n\u003Chtml>\n   \u003Chead>\n      \u003C!-- Static content [...] -->\n   \u003C\u002Fhead>\n   \u003Cbody>\n      \u003C!-- Static content [...] -->\n\n      \u003C!-- Price  [...] -->\n\n      \u003C!-- Variants (select sizes) -->\n\n      \u003C!-- Add to bag quantity -->\n\n      \u003C!-- Availability message templates -->\n\n      \u003C!-- Shopping bag -->\n\n      \u003C!--Checkout button-->\n      \u003Ca href=\"#\" class=\"... clayer-shopping-bag-checkout\">\n      Proceed to checkout\n      \u003C\u002Fa>\n\n      \u003C!-- Config [...] -->\n\n      \u003C!-- JS Library [...] -->\n   \u003C\u002Fbody>\n\u003C\u002Fhtml>",{"_modelApiKey":371,"copy":485,"listStyle":373,"darkTheme":11,"buttons":486,"color":369,"indent":11},"\u003Cp>Coupled together, we get a nice-looking product page with some static content and some elements updated dynamically. In summary, once a user selects a variant and clicks the "Add to bag" button, we pass the data down with help from the specified data attributes and create an order associated with some line items. If there are any errors, we display them in the availability message container. The customer can then decide to check out the order.\u003C\u002Fp>\n",[],{"_modelApiKey":384,"border":7,"caption":280,"image":488,"size":392,"darkTheme":11,"rounded":7,"color":369},{"url":489,"alt":490,"title":490,"width":388,"height":491,"format":290,"focalPoint":492,"customData":493},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1644517527-headless-swag-store-demo-cart.jpg","Drop-in demo cart",1492,{"x":292,"y":292},{},{"_modelApiKey":371,"copy":495,"listStyle":373,"darkTheme":11,"buttons":496,"color":369,"indent":11},"\u003Ch3>Checkout functionality\u003C\u002Fh3>\n\n\u003Cp>The Drop-in library uses the \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fmfe-checkout\">Commerce Layer hosted checkout application\u003C\u002Fa> to provide \u003Cstrong>a PCI-compliant, PSD2-compliant, and production-ready checkout flow powered by Commerce Layer APIs.\u003C\u002Fstrong> The orders API will return the checkout URL using the format:\u003C\u002Fp>\n",[],{"_modelApiKey":423,"code":498,"showLineNumbers":11,"highlightLines":280,"language":425,"size":426},"https:\u002F\u002F\u003Cyour-organization-slug>.checkout.commercelayer.app\u002F:order_id?accessToken=\u003Cyour-access-token>",{"_modelApiKey":371,"copy":500,"listStyle":373,"darkTheme":11,"buttons":501,"color":369,"indent":11},"\u003Cp>The Drop-in library will then automatically pass that URL to the checkout button (with class \u003Ccode>clayer-shopping-bag-checkout\u003C\u002Fcode>) alongside the order ID and required access token. When you click on the checkout button, you will be redirected to the checkout application. Upon successful checkout, the order will be sent to and can be managed in the orders management system (OMS), in the Commerce Layer dashboard. So cool, right?\u003C\u002Fp>\n",[],{"_modelApiKey":376,"title":503,"preTitle":504,"linkText":505,"darkTheme":11,"link":506},"Introducing our hosted checkout application.","Related article","Read",{"isExternal":11,"link":507},{"_modelApiKey":212,"slug":508},"introducing-our-hosted-checkout-application",{"_modelApiKey":371,"copy":510,"listStyle":373,"darkTheme":11,"buttons":511,"color":369,"indent":11},"\u003Ch3>Deploying the final project\u003C\u002Fh3>\n\n\u003Cp>Now let's push our project to GitHub and deploy it to Netlify or Vercel. Whenever you push any change to GitHub, both tools will run your build and re-deploy the repository again. You can follow the guidelines in the documentation for \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdocs.netlify.com\u002Fsite-deploys\u002Fcreate-deploys\u002F\">Netlify\u003C\u002Fa> or \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fvercel.com\u002Fdocs\u002Fconcepts\u002Fdeployments\u002Foverview\">Vercel\u003C\u002Fa> to get set up for either tool.\u003C\u002Fp>\n",[],{"_modelApiKey":371,"copy":513,"listStyle":373,"darkTheme":11,"buttons":514,"color":369,"indent":11},"\u003Ch3>Conclusion\u003C\u002Fh3>\n\n\u003Cp>Yes! You have successfully turned a website into a \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fheadless-swag-store.netlify.app\u002F\">shoppable website\u003C\u002Fa> using Commerce Layer and the \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fdrop-in.js\">Drop-in library\u003C\u002Fa> — how cool is that?!\u003C\u002Fp>\n\n\u003Cp>With Commerce Layer, you can manage all transactional parts of your ecommerce business, integrate with any CMS of your choice to manage content, build your user interface\u002Fexperience with your favorite technologies, and build your business logic without friction. In addition, this will result in more flexibility and autonomy between sub-teams in your engineering team, thereby helping you scale your business globally.\u003C\u002Fp>\n\n\u003Cp>This is a great way to quickly start building with Commerce Layer and can be used for specific use cases such as \u003Cstrong>adding ecommerce to a Jamstack website or transforming a Shopify theme into a multi-market store.\u003C\u002Fstrong> To create a comprehensive global shopping platform for your brand, check out our \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002F\">documentation\u003C\u002Fa> and \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fslack.commercelayer.app\">join our Slack community\u003C\u002Fa> to learn about the possibilities.\u003C\u002Fp>\n",[],{"displayTitle":516,"cta":303,"ctaText":280,"cards":517},"Your next read",[518,535,553,567],{"_modelApiKey":212,"link":519,"subtitle":521,"date":521,"author":522,"additionalAuthors":530,"icon":531,"abstract":532,"tag":533,"displayTitle":503,"cardRatio":300,"featured":534},{"text":503,"isExternal":11,"url":280,"link":520},{"_modelApiKey":212,"slug":508},"January 20, 2022",{"name":523,"picture":524},"Simone Fiorucci",{"url":525,"alt":526,"title":526,"width":289,"height":289,"format":527,"focalPoint":528,"customData":529},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1614874508-commercelayeravatarsquareff7e27.png","Simone Fiorucci — Marketing Manager at Commerce Layer","png",{"x":292,"y":292},{},[],"shopping-cart","Not only an out-of-the-box, hosted payment solution for developers who are working with Commerce Layer and looking for a one-stop integration, but also and above all a powerful reference tool to build your own custom checkout experience with unlimited flexibility.",{"color":298,"name":8},0,{"_modelApiKey":212,"link":536,"subtitle":540,"date":540,"author":541,"additionalAuthors":548,"icon":549,"abstract":550,"tag":551,"displayTitle":537,"cardRatio":11,"featured":552},{"text":537,"isExternal":11,"url":280,"link":538},"How to sell internationally with a single Shopify store and Commerce Layer.",{"_modelApiKey":212,"slug":539},"how-to-sell-internationally-with-a-single-shopify-store-and-commerce-layer","February 22, 2022",{"name":542,"picture":543},"Filippo Conforti",{"url":544,"alt":545,"title":545,"width":289,"height":289,"format":527,"focalPoint":546,"customData":547},"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":554,"subtitle":558,"date":558,"author":559,"additionalAuthors":563,"icon":564,"abstract":565,"tag":566,"displayTitle":555,"cardRatio":11,"featured":38},{"text":555,"isExternal":11,"url":280,"link":556},"Static is the New Dynamic.",{"_modelApiKey":212,"slug":557},"static-is-the-new-dynamic","January 31, 2019",{"name":542,"picture":560},{"url":544,"alt":545,"title":545,"width":289,"height":289,"format":527,"focalPoint":561,"customData":562},{"x":292,"y":292},{},[],"shapes","An opinionated, yet adaptable approach to build enterprise-grade ecommerce, the Jamstack way.",{"color":298,"name":100},{"_modelApiKey":212,"link":568,"subtitle":572,"date":572,"author":573,"additionalAuthors":577,"icon":578,"abstract":579,"tag":580,"displayTitle":569,"cardRatio":11,"featured":581},{"text":569,"isExternal":11,"url":280,"link":570},"How to build ecommerce websites in 2019 — Hint: static.",{"_modelApiKey":212,"slug":571},"how-to-build-ecommerce-websites-in-2019","October 29, 2018",{"name":542,"picture":574},{"url":544,"alt":545,"title":545,"width":289,"height":289,"format":527,"focalPoint":575,"customData":576},{"x":292,"y":292},{},[],"laptop","Static sites are disrupting the web development industry. They are fast, scalable and secure by design. All amazing features that will make your ecommerce shine without breaking the bank",{"color":298,"name":100},3,[583,584,586,588,590,592,594,596,598,600,602,604,606,608,610,612,614],{"attributes":303,"tag":304,"content":305},{"attributes":585,"tag":309,"content":303},{"property":308,"content":305},{"attributes":587,"tag":309,"content":303},{"name":312,"content":305},{"attributes":589,"tag":309,"content":303},{"name":315,"content":316},{"attributes":591,"tag":309,"content":303},{"property":319,"content":316},{"attributes":593,"tag":309,"content":303},{"name":322,"content":316},{"attributes":595,"tag":309,"content":303},{"property":325,"content":326},{"attributes":597,"tag":309,"content":303},{"property":329,"content":330},{"attributes":599,"tag":309,"content":303},{"property":333,"content":334},{"attributes":601,"tag":309,"content":303},{"name":337,"content":326},{"attributes":603,"tag":309,"content":303},{"property":340,"content":341},{"attributes":605,"tag":309,"content":303},{"property":344,"content":345},{"attributes":607,"tag":309,"content":303},{"property":348,"content":349},{"attributes":609,"tag":309,"content":303},{"property":352,"content":353},{"attributes":611,"tag":309,"content":303},{"property":356,"content":280},{"attributes":613,"tag":309,"content":303},{"name":359,"content":360},{"attributes":615,"tag":309,"content":303},{"name":363,"content":364},[617],{"name":285,"picture":618},{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":619,"customData":620},{"x":292,"y":292},{},1790593723474]