Looop empowers you to create a Shopify storefront in Webflow using Looop Attributes. Looop Attributes are custom attributes that you can add to any HTML element in Webflow to connect it to your Shopify store.
These custom attributes are used by the Looop Embed to find elements in your site and add Shopify powers to them.
Custom attributes are a way to add extra information to an HTML element. They are not visible to the user but can be used by other programs to identify and manipulate the element.
Custom attributes provide a user-friendly and No-code way to add custom functions to your Webflow site. You can add them directly in the Webflow Designer, and they are easy to understand and manage. Plus, you can use our official Webflow designer app to search for custom attributes and then apply them to your elements.
Looop attributes are designed to utilize dynamic CMS values for custom attributes in Webflow. To learn more about assigning dynamic CMS values to custom attributes, check out the Webflow University.
{"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":""},"chroma":{"liveDeploymentHistoryId":"6a20c46e0e965794a0a74c61","collectionId":"2b14698d-6c16-4b11-8289-1ae5425f2aac","schemaVersion":"v2"},"entitlements":{},"buildId":"6a20c46e0e965794a0a74c61:success","clientVersion":"0.0.3939","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":{},"hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[],"isAtlas":false,"googleFontsInlined":false},"customCss":[],"page":{"pagePath":"webflow/introduction","slug":"/webflow/introduction","pageMetadata":{"title":"Introduction","description":"A guide to developing Shopify storefront in Webflow using Looop Attributes","icon":"paintBrush","href":"/webflow/introduction"},"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: \"A guide to developing Shopify storefront in Webflow using Looop Attributes\"\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={a:`a`,p:`p`,..._provideComponents(),...props.components},{Heading,OptimizedImage}=_components;if(!Heading)_missingMdxReference(`Heading`,true);if(!OptimizedImage)_missingMdxReference(`OptimizedImage`,true);return _jsxs(_Fragment,{children:[_jsx(OptimizedImage,{width:`300`,src:`https://assets-global.website-files.com/65aa1e4ac43693c14ea73c02/65aa2f7b0350fd3cdf77b451_attributes-p-500.png`}),`\n`,_jsx(Heading,{level:`2`,id:`how-looop-works`,children:`How Looop works`}),`\n`,_jsx(_components.p,{children:`Looop empowers you to create a Shopify storefront in Webflow using Looop Attributes. Looop Attributes are custom attributes that you can add to any HTML element in Webflow to connect it to your Shopify store.\nThese custom attributes are used by the Looop Embed to find elements in your site and add Shopify powers to them.`}),`\n`,_jsx(Heading,{level:`2`,id:`why-use-custom-attributes`,children:`Why use custom attributes?`}),`\n`,_jsx(_components.p,{children:`Custom attributes are a way to add extra information to an HTML element. They are not visible to the user but can be used by other programs to identify and manipulate the element.`}),`\n`,_jsx(Heading,{level:`2`,id:`developer-experience`,children:`Developer experience`}),`\n`,_jsx(_components.p,{children:`Custom attributes provide a user-friendly and No-code way to add custom functions to your Webflow site. You can add them directly in the Webflow Designer, and they are easy to understand and manage. Plus, you can use our official Webflow designer app to search for custom attributes and then apply them to your elements.`}),`\n`,_jsx(Heading,{level:`2`,id:`using-dynamic-cms-values`,children:`Using dynamic CMS values`}),`\n`,_jsxs(_components.p,{children:[`Looop attributes are designed to utilize dynamic CMS values for custom attributes in Webflow. To learn more about assigning dynamic CMS values to custom attributes, check out the `,_jsx(_components.a,{href:`https://university.webflow.com/lesson/custom-attributes#how-to-use-cms-data-in-custom-attributes`,children:`Webflow University`}),`.`]})]})}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":"Introduction","description":"A guide to developing Shopify storefront in Webflow using Looop Attributes","icon":"paintBrush","href":"/webflow/introduction"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"How Looop works","slug":"how-looop-works","depth":2,"children":[]},{"title":"Why use custom attributes?","slug":"why-use-custom-attributes","depth":2,"children":[]},{"title":"Developer experience","slug":"developer-experience","depth":2,"children":[]},{"title":"Using dynamic CMS values","slug":"using-dynamic-cms-values","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"subdomain":"thinddev","siteName":"Developer Docs","title":"Introduction - Developer Docs","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-01-07T00:52:17.127Z","originalFileLocation":"webflow/introduction.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=\"A guide to developing Shopify storefront in Webflow using Looop Attributes\">\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=\"Introduction - Developer Docs\">\u003cmeta data-mint-head property=\"og:description\" content=\"A guide to developing Shopify storefront in Webflow using Looop Attributes\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Developer Docs\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.uselooop.com/webflow/introduction\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://thinddev.mintlify.app/_mintlify/api/og/v2?division=Webflow\u0026amp;title=Introduction\u0026amp;description=A+guide+to+developing+Shopify+storefront+in+Webflow+using+Looop+Attributes\u0026amp;theme=64eaa4d993de40dcfe9b2e85\u0026amp;signature=4680418d63c8cdc58c66bbe7bd8bd9c133d2c5d4ef21a2ab0037852c902d7c04\">\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=\"Introduction - Developer Docs\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"A guide to developing Shopify storefront in Webflow using Looop Attributes\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://thinddev.mintlify.app/_mintlify/api/og/v2?division=Webflow\u0026amp;title=Introduction\u0026amp;description=A+guide+to+developing+Shopify+storefront+in+Webflow+using+Looop+Attributes\u0026amp;theme=64eaa4d993de40dcfe9b2e85\u0026amp;signature=4680418d63c8cdc58c66bbe7bd8bd9c133d2c5d4ef21a2ab0037852c902d7c04\">\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/introduction\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/webflow/introduction.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/introduction#webpage\",\"url\":\"https://docs.uselooop.com/webflow/introduction\",\"name\":\"Introduction\",\"description\":\"A guide to developing Shopify storefront in Webflow using Looop Attributes\",\"dateModified\":\"2026-01-07T00:52:17.127Z\",\"isPartOf\":{\"@id\":\"https://docs.uselooop.com#website\"},\"breadcrumb\":{\"@id\":\"https://docs.uselooop.com/webflow/introduction#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.uselooop.com/webflow/introduction#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Developer Docs\",\"item\":\"https://docs.uselooop.com\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introduction\",\"item\":\"https://docs.uselooop.com/webflow/introduction\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.uselooop.com/webflow/introduction#article\",\"headline\":\"Introduction\",\"name\":\"Introduction\",\"description\":\"A guide to developing Shopify storefront in Webflow using Looop Attributes\",\"url\":\"https://docs.uselooop.com/webflow/introduction\",\"mainEntityOfPage\":{\"@id\":\"https://docs.uselooop.com/webflow/introduction#webpage\"},\"dateModified\":\"2026-01-07T00:52:17.127Z\",\"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\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","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","description":"A div that contains a product image, price, quantity input, and add to cart button","href":"/webflow/productcard/productcard"},{"title":"Price \u0026 Compare Price","href":"/webflow/productcard/price"},{"title":"Quantity","href":"/webflow/productcard/quantity"},{"title":"Add to Cart","href":"/webflow/productcard/addtocart"},{"group":"Product options","pages":[{"title":"Dropdown","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"}]}]},"title":"Introduction - Developer Docs","buildId":"dpl_5UDDZ9hnigTkoV7QtvQ39eUp84nu","deploymentId":"dpl_5UDDZ9hnigTkoV7QtvQ39eUp84nu","dynamics":["a74be98ba7"],"chunks":["zoom-image-lightbox-ChyC7Hte.js","PlusIcon-DXkY3IBj.js","lightbox-handle-r17bVUz3.js"]}
