An add Cart button should be present in every Variant item on the product card or the product page. A quantity input must be a sibling of every Add to Cart button.
Every add to cart button dictates the product and variant that will be added to the cart.
All Add to the Cart buttons should also have a trigger to start an animation to open your cart so that when the user clicks any Add to Cart button on the website, the cart will open. Looop will update the item list in the background so it is a seamless operation for the end user.
When the Add to Cart button is disabled, it should have a different style to indicate that the product is not available. Looop adds a class out-of-stock to the button when the product is not available.
The Add to Cart button should always be a sibling of Quantity.
{"docsConfig":{"$schema":"https://mintlify.com/docs.json","theme":"mint","name":"Developer Docs","colors":{"primary":"#ab6cff","light":"#D8B9FF","dark":"#ab6cff"},"favicon":"/favicon.svg","logo":{"light":"https://mintcdn.com/thinddev/5vCSKuNRwWtbt3SO/logo/light.svg?fit=max\u0026auto=format\u0026n=5vCSKuNRwWtbt3SO\u0026q=85\u0026s=14981d71df9f0cf7566542f04f819894","dark":"https://mintcdn.com/thinddev/5vCSKuNRwWtbt3SO/logo/dark.svg?fit=max\u0026auto=format\u0026n=5vCSKuNRwWtbt3SO\u0026q=85\u0026s=09ff84329406251b97636e3c8e561de5"},"appearance":{"default":"light","strict":false},"navbar":{"links":[{"label":"Support","href":"mailto:customercare@uselooop.com"}],"primary":{"type":"button","label":"Dashboard","href":"https://manage.uselooop.com"}},"integrations":{"fathom":{"siteId":"MVDXETUM"}},"navigation":{"global":{"anchors":[{"anchor":"Tutorials","href":"https://www.youtube.com/channel/UC5xADlZY5L-TAbwJHsh8uIA","icon":"youtube"},{"anchor":"Cloneables","href":"https://webflow.com/@thind-dev/sites","icon":"copy"}]},"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"thinddev","hasAudioNarration":false,"actualSubdomain":"thinddev","customDomains":["docs.uselooop.com"],"gitSource":{"type":"github","owner":"thindharminder","repo":"looopdocs","deployBranch":"main","contentDirectory":"","isPrivate":true,"mountPath":"","label":""},"entitlements":{},"buildId":"6ae91ef5a502069952e918f8:success","clientVersion":"0.0.4111","searchFilterCounts":[{"language":"default","tag":"Weblow Setup","count":63},{"language":"default","tag":"Webflow","count":63},{"language":"default","tag":"Customer Accounts","count":21},{"language":"default","tag":"Cart","count":20},{"language":"default","tag":"Default State","count":17},{"language":"default","tag":"Onbaording","count":14},{"language":"default","tag":"Integrations","count":13},{"language":"default","tag":"Cart Item","count":9},{"language":"default","tag":"Customer Variables","count":9},{"language":"default","tag":"Product Card","count":9}]},"assistantConfig":{},"basePath":"","hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[],"googleFontsInlined":false},"customCss":[],"page":{"pagePath":"webflow/productcard/addtocart","slug":"/webflow/productcard/addtocart","pageMetadata":{"title":"Add to Cart","description":"Button used by the user to add items to their cart","href":"/webflow/productcard/addtocart"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Button used by the user to add items to their cart\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={code:`code`,p:`p`,pre:`pre`,span:`span`,..._provideComponents(),...props.components},{CodeBlock,Heading,Warning}=_components;if(!CodeBlock)_missingMdxReference(`CodeBlock`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!Warning)_missingMdxReference(`Warning`,true);return _jsxs(_Fragment,{children:[_jsx(Heading,{level:`2`,id:`setup`,children:`Setup`}),`\n`,_jsx(_components.p,{children:`An add Cart button should be present in every Variant item on the product card or the product page. A quantity input must be a sibling of every Add to Cart button.\nEvery add to cart button dictates the product and variant that will be added to the cart.`}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`1`,language:`html`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`html`,children:_jsxs(_components.code,{language:`html`,numberOfLines:`1`,children:[_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`\"looop\"=\"addtocart\"`})}),`\n`]})})}),`\n`,_jsx(Heading,{level:`2`,id:`open-the-cart-after-adding-an-item`,children:`Open the cart after adding an item`}),`\n`,_jsx(_components.p,{children:`All Add to the Cart buttons should also have a trigger to start an animation to open your cart so that when the user clicks any Add to Cart button on the website, the cart will open. Looop will update the item list in the background so it is a seamless operation for the end user.`}),`\n`,_jsx(Heading,{level:`2`,id:`out-of-stock-/-not-available-state`,children:`Out of stock / Not Available state`}),`\n`,_jsx(_components.p,{children:`If the selected product/variant is not available, the Add to Cart will be disabled and will say Out of Stock or Not Available.`}),`\n`,_jsx(Heading,{level:`3`,id:`style-disabled-add-to-cart-button`,children:`Style disabled Add to Cart button`}),`\n`,_jsxs(_components.p,{children:[`When the Add to Cart button is disabled, it should have a different style to indicate that the product is not available. Looop adds a class `,_jsx(_components.code,{children:`out-of-stock`}),` to the button when the product is not available.`]}),`\n`,_jsx(Warning,{children:_jsx(_components.p,{children:`The Add to Cart button should always be a sibling of Quantity.`})})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Add to Cart","description":"Button used by the user to add items to their cart","href":"/webflow/productcard/addtocart"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Setup","slug":"setup","depth":2,"children":[]},{"title":"Open the cart after adding an item","slug":"open-the-cart-after-adding-an-item","depth":2,"children":[]},{"title":"Out of stock / Not Available state","slug":"out-of-stock-/-not-available-state","depth":2,"children":[{"title":"Style disabled Add to Cart button","slug":"style-disabled-add-to-cart-button","depth":3,"children":[]}]}],"codeExamples":{}},"jsLinks":[],"subdomain":"thinddev","siteName":"Developer Docs","title":"Add to Cart - Developer Docs","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-01-07T00:52:17.132Z","originalFileLocation":"webflow/productcard/addtocart.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"light\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Button used by the user to add items to their cart\">\u003cmeta data-mint-head name=\"application-name\" content=\"Developer Docs\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/thinddev/gdw_-dNo0q96jzPV/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/thinddev/gdw_-dNo0q96jzPV/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/thinddev/gdw_-dNo0q96jzPV/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/thinddev/gdw_-dNo0q96jzPV/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/thinddev/gdw_-dNo0q96jzPV/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/thinddev/gdw_-dNo0q96jzPV/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/thinddev/gdw_-dNo0q96jzPV/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/thinddev/gdw_-dNo0q96jzPV/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/thinddev/gdw_-dNo0q96jzPV/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Add to Cart - Developer Docs\">\u003cmeta data-mint-head property=\"og:description\" content=\"Button used by the user to add items to their cart\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Developer Docs\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.uselooop.com/webflow/productcard/addtocart\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://thinddev.mintlify.site/_mintlify/api/og/v2?division=Product+Card\u0026amp;title=Add+to+Cart\u0026amp;description=Button+used+by+the+user+to+add+items+to+their+cart\u0026amp;theme=9ebd30b1fa15cc37dc32afe0\u0026amp;signature=b2b5113f3735ab01dca792c595a97675742fc9afa5e2a700a2c8abc397acb662\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Add to Cart - Developer Docs\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Button used by the user to add items to their cart\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://thinddev.mintlify.site/_mintlify/api/og/v2?division=Product+Card\u0026amp;title=Add+to+Cart\u0026amp;description=Button+used+by+the+user+to+add+items+to+their+cart\u0026amp;theme=9ebd30b1fa15cc37dc32afe0\u0026amp;signature=b2b5113f3735ab01dca792c595a97675742fc9afa5e2a700a2c8abc397acb662\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/thinddev/gdw_-dNo0q96jzPV/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Developer Docs\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#ab6cff\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.uselooop.com/webflow/productcard/addtocart\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/webflow/productcard/addtocart.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.uselooop.com/#organization\",\"name\":\"Developer Docs\",\"url\":\"https://docs.uselooop.com\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/thinddev/5vCSKuNRwWtbt3SO/logo/light.svg?fit=max\u0026auto=format\u0026n=5vCSKuNRwWtbt3SO\u0026q=85\u0026s=14981d71df9f0cf7566542f04f819894\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.uselooop.com#website\",\"name\":\"Developer Docs\",\"url\":\"https://docs.uselooop.com\",\"publisher\":{\"@id\":\"https://docs.uselooop.com/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.uselooop.com/webflow/productcard/addtocart#webpage\",\"url\":\"https://docs.uselooop.com/webflow/productcard/addtocart\",\"name\":\"Add to Cart\",\"description\":\"Button used by the user to add items to their cart\",\"dateModified\":\"2026-01-07T00:52:17.132Z\",\"isPartOf\":{\"@id\":\"https://docs.uselooop.com#website\"},\"breadcrumb\":{\"@id\":\"https://docs.uselooop.com/webflow/productcard/addtocart#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.uselooop.com/webflow/productcard/addtocart#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Webflow\",\"item\":\"https://docs.uselooop.com/webflow/introduction\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Product Card\",\"item\":\"https://docs.uselooop.com/webflow/productcard/productcard\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Add to Cart\",\"item\":\"https://docs.uselooop.com/webflow/productcard/addtocart\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.uselooop.com/webflow/productcard/addtocart#article\",\"headline\":\"Add to Cart\",\"name\":\"Add to Cart\",\"description\":\"Button used by the user to add items to their cart\",\"url\":\"https://docs.uselooop.com/webflow/productcard/addtocart\",\"mainEntityOfPage\":{\"@id\":\"https://docs.uselooop.com/webflow/productcard/addtocart#webpage\"},\"dateModified\":\"2026-01-07T00:52:17.132Z\",\"publisher\":{\"@id\":\"https://docs.uselooop.com/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.uselooop.com#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Developer Docs\",\"publisher\":{\"@type\":\"Organization\",\"name\":\"Developer Docs\"},\"provider\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","agentPointerHref":"/webflow/productcard/addtocart.md","siteName":"Developer Docs","nav":{"global":{"anchors":[{"anchor":"Tutorials","href":"https://www.youtube.com/channel/UC5xADlZY5L-TAbwJHsh8uIA","icon":"youtube"},{"anchor":"Cloneables","href":"https://webflow.com/@thind-dev/sites","icon":"copy"}]},"tabs":[{"tab":"Onbaording","pages":[{"title":"Onbaording","href":"/introduction"}]},{"tab":"Weblow Setup","groups":[{"group":"Webflow","pages":[{"title":"Introduction","icon":"paintBrush","href":"/webflow/introduction"},{"group":"Product Card","icon":"cards","pages":[{"title":"Product Card","href":"/webflow/productcard/productcard"},{"title":"Price \u0026 Compare Price","href":"/webflow/productcard/price"},{"title":"Quantity","description":"Input used by a user to select the number of items to add to their cart.","href":"/webflow/productcard/quantity"},{"title":"Add to Cart","href":"/webflow/productcard/addtocart"},{"group":"Product options","pages":[{"title":"Dropdown","description":"Show product options to the user","href":"/webflow/productcard/options/dropdown"},{"title":"Radio","href":"/webflow/productcard/options/radio"}]},{"group":"Product Subscription","pages":[{"title":"Dropdown","href":"/webflow/productcard/subscription/dropdown"},{"title":"Radio","href":"/webflow/productcard/subscription/radio"}]},{"title":"Hero Image","href":"/webflow/productcard/hero-image"}]},{"group":"Cart","icon":"cart-shopping","pages":[{"title":"Introduction","href":"/webflow/cart/cart"},{"group":"Default State","pages":[{"title":"Default Wrapper","href":"/webflow/cart/default/wrapper"},{"title":"Cart List","href":"/webflow/cart/default/list"},{"group":"Cart Item","pages":[{"title":"Introduction","href":"/webflow/cart/default/cart-item"},{"title":"Cart Item - Image","href":"/webflow/cart/default/image"},{"title":"Cart Item - Name","href":"/webflow/cart/default/product-name"},{"title":"Cart Item - Variant","href":"/webflow/cart/default/variant-name"},{"title":"Cart Item Quantity","href":"/webflow/cart/default/quantity"},{"title":"Item Total Price","href":"/webflow/cart/default/price-total"},{"title":"Item Total Compare Price","href":"/webflow/cart/default/compare-price-total"},{"title":"Remove Button","href":"/webflow/cart/default/remove"},{"title":"Selected Subscription","href":"/webflow/cart/default/subscription"}]},{"group":"Discounts","pages":[{"title":"Introduction","href":"/webflow/cart/default/discount"},{"title":"Discount Form","href":"/webflow/cart/default/discount-form"},{"title":"Discount List","href":"/webflow/cart/default/discount-list"}]},{"title":"Subtotal","href":"/webflow/cart/default/subtotal"},{"title":"Checkout Button","href":"/webflow/cart/default/checkout"},{"title":"Go to Cart","href":"/webflow/cart/default/go-to-cart"}]},{"title":"Empty State","href":"/webflow/cart/empty"},{"title":"Cart Count","href":"/webflow/cart/count"}]},{"group":"Markets","icon":"dollar-sign","pages":[{"title":"Introduction","href":"/webflow/markets/markets"},{"title":"Market Selector","href":"/webflow/markets/selector"},{"title":"Market Form","href":"/webflow/markets/form"},{"title":"Currency Symbol","href":"/webflow/markets/currency-symbol"},{"title":"Market Ignore","href":"/webflow/markets/ignore"}]},{"group":"Customer Accounts","icon":"user","pages":[{"title":"Introduction","href":"/webflow/customer/customer"},{"group":"Auth Pages","pages":[{"title":"Login","href":"/webflow/customer/login"},{"title":"Signup","href":"/webflow/customer/customer-signup"},{"title":"Recover","href":"/webflow/customer/recover"},{"title":"Reset","href":"/webflow/customer/reset"},{"title":"Activate","href":"/webflow/customer/activate"}]},{"title":"Update Form","href":"/webflow/customer/update"},{"title":"Address Form","href":"/webflow/customer/address"},{"group":"Customer Variables","pages":[{"title":"Introduction","href":"/webflow/customer/variables"},{"group":"On Login Variables","pages":[{"title":"Redirect","href":"/webflow/customer/on-login/redirect"},{"title":"CSS Variables","href":"/webflow/customer/on-login/css"},{"title":"Remove","href":"/webflow/customer/on-login/remove"},{"title":"Change Text","href":"/webflow/customer/on-login/change"}]},{"group":"On Logout Variables","pages":[{"title":"Redirect","href":"/webflow/customer/on-logout/redirect"},{"title":"CSS Variables","href":"/webflow/customer/on-logout/css"},{"title":"Remove","href":"/webflow/customer/on-logout/remove"},{"title":"Change Text","href":"/webflow/customer/on-logout/change"}]}]},{"group":"Customer Orders","pages":[{"title":"Introduction","href":"/webflow/customer/orders"},{"title":"Orders List","href":"/webflow/customer/orders-list"},{"title":"Orders Empty State","href":"/webflow/customer/order-empty"}]},{"title":"Logout","href":"/webflow/customer/logout"}]},{"group":"Wishlist","icon":"heart","pages":[{"title":"Introduction","href":"/webflow/wishlist/wishlist"},{"title":"Wishlist Button","href":"/webflow/wishlist/wishlist-button"},{"title":"Wishlist List","href":"/webflow/wishlist/wishlist-list"},{"title":"Wishlist Empty State","href":"/webflow/wishlist/wishlist-empty"}]},{"group":"Search","icon":"magnifying-glass","pages":[{"title":"Introduction","href":"/webflow/search/search"},{"title":"Search Input","href":"/webflow/search/form"},{"title":"Search List","href":"/webflow/search/list"}]}]}]},{"tab":"Integrations","pages":[{"title":"Integrations","href":"/integrations/introduction"}]}]},"basePath":"","title":"Add to Cart - Developer Docs","buildId":"dpl_DqYu5MPb49gWBBbUGgpHQUmCHY3P","deploymentId":"dpl_DqYu5MPb49gWBBbUGgpHQUmCHY3P","dynamics":[],"chunks":[]}
