The product options element shows a set of options available for the parent product card. When the user selects the options, Looop updates the price, the compare price, and the hero picture.
You can design product options using a dropdown or radio button.
On page load for each Shopify product option, we will duplicate the product-option-wrapper and update the product-option-name and product-option-select with the product option name and values.
The Options Dropdown element should be inside a Webflow Form element.
{"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.4044","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":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"full-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"byok-sep-25","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"vite-origin","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-updated-9-15","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-dual-write","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"approve-review-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"sso-setup-deadline-banner","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"googleFontsInlined":false},"customCss":[],"page":{"pagePath":"webflow/productcard/options/dropdown","slug":"/webflow/productcard/options/dropdown","pageMetadata":{"title":"Dropdown","description":"Show product options to the user","href":"/webflow/productcard/options/dropdown"},"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: \"Show product options to the user\"\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`,code:`code`,li:`li`,ol:`ol`,p:`p`,pre:`pre`,span:`span`,..._provideComponents(),...props.components},{CodeBlock,Frame,Heading,OptimizedImage,Warning}=_components;if(!CodeBlock)_missingMdxReference(`CodeBlock`,true);if(!Frame)_missingMdxReference(`Frame`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!OptimizedImage)_missingMdxReference(`OptimizedImage`,true);if(!Warning)_missingMdxReference(`Warning`,true);return _jsxs(_Fragment,{children:[_jsxs(_components.p,{children:[`The product options element shows a set of options available for the parent product card. When the user selects the options, Looop updates the price, the compare price, and the hero picture.\nYou can design product options using a `,_jsx(_components.a,{href:`/webflow/productcard/options/dropdown`,children:`dropdown`}),` or `,_jsx(_components.a,{href:`/webflow/productcard/options/radio`,children:`radio`}),` button.`]}),`\n`,_jsx(Heading,{level:`2`,id:`setup`,children:`Setup`}),`\n`,_jsx(_components.p,{children:`We will create a template for product options. This template will be used to create product options for each product card.`}),`\n`,_jsx(Frame,{children:_jsx(OptimizedImage,{src:`https://mintcdn.com/thinddev/WJpokBS_R24FjARc/images/dropdown-options.jpg?fit=max\u0026auto=format\u0026n=WJpokBS_R24FjARc\u0026q=85\u0026s=fbf3c9d53a3cdd906a68d31f1af09fea`,\"data-og-width\":`463`,width:`463`,\"data-og-height\":`200`,height:`200`,\"data-path\":`images/dropdown-options.jpg`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/thinddev/WJpokBS_R24FjARc/images/dropdown-options.jpg?w=280\u0026fit=max\u0026auto=format\u0026n=WJpokBS_R24FjARc\u0026q=85\u0026s=13256ef5bb735c25b231f8cdc726b8e8 280w, https://mintcdn.com/thinddev/WJpokBS_R24FjARc/images/dropdown-options.jpg?w=560\u0026fit=max\u0026auto=format\u0026n=WJpokBS_R24FjARc\u0026q=85\u0026s=edf7e654261b8c85a9c1a4a562d77a42 560w, https://mintcdn.com/thinddev/WJpokBS_R24FjARc/images/dropdown-options.jpg?w=840\u0026fit=max\u0026auto=format\u0026n=WJpokBS_R24FjARc\u0026q=85\u0026s=3a060fa767b908b713bb898cd20a7ba4 840w, https://mintcdn.com/thinddev/WJpokBS_R24FjARc/images/dropdown-options.jpg?w=1100\u0026fit=max\u0026auto=format\u0026n=WJpokBS_R24FjARc\u0026q=85\u0026s=532ceb9d8e63cc3711d69963065f255a 1100w, https://mintcdn.com/thinddev/WJpokBS_R24FjARc/images/dropdown-options.jpg?w=1650\u0026fit=max\u0026auto=format\u0026n=WJpokBS_R24FjARc\u0026q=85\u0026s=c552085e18223362a080c800e458468f 1650w, https://mintcdn.com/thinddev/WJpokBS_R24FjARc/images/dropdown-options.jpg?w=2500\u0026fit=max\u0026auto=format\u0026n=WJpokBS_R24FjARc\u0026q=85\u0026s=5abef1ed1f787ab379b39dba86dddb6d 2500w`})}),`\n`,_jsxs(_components.ol,{children:[`\n`,_jsx(_components.li,{children:`Create a div block and give it the following Attribute:`}),`\n`]}),`\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=product-option-wrapper`})}),`\n`]})})}),`\n`,_jsxs(_components.ol,{start:`2`,children:[`\n`,_jsx(_components.li,{children:`Inside the div block, create a text block and give it the following Attribute:`}),`\n`]}),`\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=product-option-name`})}),`\n`]})})}),`\n`,_jsx(_components.p,{children:`3.. Inside the div block, create a dropdown element and give it the following Attribute:`}),`\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=product-option-select`})}),`\n`]})})}),`\n`,_jsx(Heading,{level:`2`,id:`what-will-be-updated`,children:`What will be updated?`}),`\n`,_jsxs(_components.p,{children:[`On page load for each Shopify product option, we will duplicate the `,_jsx(_components.code,{children:`product-option-wrapper`}),` and update the `,_jsx(_components.code,{children:`product-option-name`}),` and `,_jsx(_components.code,{children:`product-option-select`}),` with the product option name and values.`]}),`\n`,_jsx(Warning,{children:_jsx(_components.p,{children:`The Options Dropdown element should be inside a Webflow Form element.`})})]})}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":"Dropdown","description":"Show product options to the user","href":"/webflow/productcard/options/dropdown"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Setup","slug":"setup","depth":2,"children":[]},{"title":"What will be updated?","slug":"what-will-be-updated","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"subdomain":"thinddev","siteName":"Developer Docs","title":"Dropdown - Developer Docs","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-01-07T00:52:17.736Z","originalFileLocation":"webflow/productcard/options/dropdown.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=\"Show product options to the user\">\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=\"Dropdown - Developer Docs\">\u003cmeta data-mint-head property=\"og:description\" content=\"Show product options to the user\">\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/options/dropdown\">\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=Product+options\u0026amp;title=Dropdown\u0026amp;description=Show+product+options+to+the+user\u0026amp;theme=4362bebb14ec4deb577a0eca\u0026amp;signature=11ad0d75ea7e1cb86e35a5653278ddd61617cd77f8d6b1640e7fd7e1357e6033\">\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=\"Dropdown - Developer Docs\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Show product options to the user\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://thinddev.mintlify.app/_mintlify/api/og/v2?division=Product+options\u0026amp;title=Dropdown\u0026amp;description=Show+product+options+to+the+user\u0026amp;theme=4362bebb14ec4deb577a0eca\u0026amp;signature=11ad0d75ea7e1cb86e35a5653278ddd61617cd77f8d6b1640e7fd7e1357e6033\">\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/options/dropdown\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/webflow/productcard/options/dropdown.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/options/dropdown#webpage\",\"url\":\"https://docs.uselooop.com/webflow/productcard/options/dropdown\",\"name\":\"Dropdown\",\"description\":\"Show product options to the user\",\"dateModified\":\"2026-01-07T00:52:17.736Z\",\"isPartOf\":{\"@id\":\"https://docs.uselooop.com#website\"},\"breadcrumb\":{\"@id\":\"https://docs.uselooop.com/webflow/productcard/options/dropdown#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.uselooop.com/webflow/productcard/options/dropdown#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\":\"Dropdown\",\"item\":\"https://docs.uselooop.com/webflow/productcard/options/dropdown\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.uselooop.com/webflow/productcard/options/dropdown#article\",\"headline\":\"Dropdown\",\"name\":\"Dropdown\",\"description\":\"Show product options to the user\",\"url\":\"https://docs.uselooop.com/webflow/productcard/options/dropdown\",\"mainEntityOfPage\":{\"@id\":\"https://docs.uselooop.com/webflow/productcard/options/dropdown#webpage\"},\"dateModified\":\"2026-01-07T00:52:17.736Z\",\"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","href":"/webflow/productcard/productcard"},{"title":"Price \u0026 Compare Price","href":"/webflow/productcard/price"},{"title":"Quantity","href":"/webflow/productcard/quantity"},{"title":"Add to Cart","description":"Button used by the user to add items to their cart","href":"/webflow/productcard/addtocart"},{"group":"Product options","pages":[{"title":"Dropdown","href":"/webflow/productcard/options/dropdown"},{"title":"Radio","description":"Show product options to the user","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":"Dropdown - Developer Docs","buildId":"dpl_DeHjVRGfFnhYQwHnfC2pjeXXv8h9","deploymentId":"dpl_DeHjVRGfFnhYQwHnfC2pjeXXv8h9","dynamics":["07c022d89b","a74be98ba7"],"chunks":["Frame-DXXFP6nH.js","DynamicMarkdown-B54_zNBF.js","zoom-image-lightbox-BG6oD64b.js","lightbox-handle-r17bVUz3.js"]}