A collection of Shopify-connected Framer components for building fully functional product pages, variant selection, cart management, and checkout flows — without writing any custom code.
Wraps any element and redirects the user to their Shopify account page on click.
Was this page helpful?
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"Framerfy Docs — Setup, Components \u0026 Guides","public":true,"description":"Official Framerfy documentation. Learn how to connect Shopify to Framer, configure components, sync products, and launch your storefront.","colors":{"primary":"#5CA87C"},"logo":"https://mintcdn.com/thedesignmvp/Bnj9GiW8prCxI3an/public/logo.svg?fit=max\u0026auto=format\u0026n=Bnj9GiW8prCxI3an\u0026q=85\u0026s=68c5c26880a44a6692962464a1d1dc40","favicon":"https://mintcdn.com/thedesignmvp/Bnj9GiW8prCxI3an/public/favicon.png?fit=max\u0026auto=format\u0026n=Bnj9GiW8prCxI3an\u0026q=85\u0026s=15958dad2a57681c1a6e6939a01b2d81","appearance":{"default":"dark","strict":true},"navbar":{"links":[{"href":"https://framerfy.framer.ai/#templates","label":"Templates"},{"href":"https://admin.framerfy.ae/#pricing","label":"Pricing"}],"primary":{"type":"button","label":"Login","href":"https://admin.framerfy.ae"}},"footer":{"socials":{"x":"https://x.com/thedesignmvp","linkedin":"https://www.linkedin.com/company/thedesignmvp"}},"seo":{"metatags":{"charset":"UTF-8","viewport":"width=device-width, initial-scale=1.0","title":"Framerfy Docs – Shopify Storefronts in Framer","description":"Learn how to set up and use Framerfy to connect Shopify with Framer. Step-by-step guides, component usage, syncing products, and troubleshooting.","keywords":"Framerfy, Shopify, Storefronts, Framer, Components, Integration","robots":"index, follow","googlebot":"index, follow","language":"en","canonical":"https://docs.framerfy.ae","theme-color":"#5CA87C","color-scheme":"light dark","format-detection":"telephone=no","HandheldFriendly":"True","MobileOptimized":"320","apple-mobile-web-app-capable":"yes","apple-mobile-web-app-status-bar-style":"black-translucent","og:title":"Framerfy Docs – Shopify Storefronts in Framer","og:type":"website","og:url":"https://docs.framerfy.ae","og:description":"Learn how to set up and use Framerfy to connect Shopify with Framer. Step-by-step guides, component usage, syncing products, and troubleshooting.","og:site_name":"Framerfy Docs","og:locale":"en_US","og:locale:alternate":"ar_AE","twitter:card":"summary_large_image","twitter:title":"Framerfy Docs – Shopify Storefronts in Framer","twitter:description":"Learn how to set up and use Framerfy to connect Shopify with Framer. Step-by-step guides, component usage, syncing products, and troubleshooting."}},"banner":{"content":"This is a beta version of the documentation. Please report any issues or feedback to support@framerfy.ae","dismissible":true},"styling":{"latex":false},"navigation":{"global":{"versions":[{"version":"v0.1","href":"/"}]},"languages":[{"language":"en","default":true,"href":"shopify-integration/getting-started"},{"language":"ar","href":"ar/shopify-integration/getting-started"}]}},"deployment":{"deploymentMetadataValue":{"subdomain":"thedesignmvp","hasAudioNarration":false,"actualSubdomain":"thedesignmvp","customDomains":["docs.framerfy.ae"],"gitSource":{"type":"github","owner":"thedesignmvp","repo":"framerfy-docs","deployBranch":"main","contentDirectory":"","isPrivate":true,"mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6a2ffe09d727918aab41b091","collectionId":"edaf4a82-776d-4a96-be49-a44b82deed80","schemaVersion":"v3"},"feedback":{"thumbs":true},"entitlements":{},"buildId":"6a2ffe09d727918aab41b091:success","clientVersion":"0.0.3964","searchFilterCounts":[{"language":"ar","tag":"المكونات","count":16},{"language":"en","tag":"Components","count":16},{"language":"ar","tag":"تكامل Shopify","count":2},{"language":"en","tag":"Shopify Integration","count":2}],"searchSettings":{"maxResults":5}},"assistantConfig":{"enableAskAiButton":false,"enableStarterQuestions":false,"enableAskAiSearchBar":true},"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":"editor-v7-file-tree","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":"pause-universal-search-reconcile","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":"per-site-search-delta","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":"editor-private-page-search","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":"editor-nav-generations","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":"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":"editor-agent-model-picker","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":"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}],"isAtlas":false,"googleFontsInlined":false},"customCss":[],"page":{"pagePath":"components/overview","slug":"/components/overview","pageMetadata":{"title":"Overview","description":null,"href":"/components/overview"},"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`,p:`p`,tbody:`tbody`,td:`td`,th:`th`,thead:`thead`,tr:`tr`,..._provideComponents(),...props.components},{Heading,Table}=_components;if(!Heading)_missingMdxReference(`Heading`,true);if(!Table)_missingMdxReference(`Table`,true);return _jsxs(_Fragment,{children:[_jsx(_components.p,{children:`A collection of Shopify-connected Framer components for building fully functional product pages, variant selection, cart management, and checkout flows — without writing any custom code.`}),`\n`,_jsx(Heading,{level:`2`,id:`components`,children:`Components`}),`\n`,_jsx(Heading,{level:`3`,id:`galleries`,children:`Galleries`}),`\n`,_jsx(_components.p,{children:`Components for displaying product images.`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{style:{textAlign:`left`},children:`Component`}),_jsx(_components.th,{style:{textAlign:`left`},children:`Description`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/components/vertical-media-carousel`,children:`Vertical Media Carousel`})}),_jsx(_components.td,{style:{textAlign:`left`},children:`Scrollable vertical (or horizontal) image gallery with sticky floating thumbnails and zoom on hover.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/components/slider-media-carousel`,children:`Slider Media Carousel`})}),_jsx(_components.td,{style:{textAlign:`left`},children:`Single-image slider with arrow navigation, thumbnail strip, and zoom on hover.`})]})]})]}),`\n`,_jsx(Heading,{level:`3`,id:`variant-selection`,children:`Variant Selection`}),`\n`,_jsx(_components.p,{children:`Components for letting users choose product variants.`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{style:{textAlign:`left`},children:`Component`}),_jsx(_components.th,{style:{textAlign:`left`},children:`Description`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/components/universal-variant-picker`,children:`Universal Variant Picker`})}),_jsx(_components.td,{style:{textAlign:`left`},children:`Text-based option buttons (Size, Frame Style, etc.) for any Shopify option type. Place one per option.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/components/color-variant-picker`,children:`Color Variant Picker`})}),_jsxs(_components.td,{style:{textAlign:`left`},children:[`Circular color swatch buttons filled with each variant’s hex color. Hardcoded to the `,_jsx(_components.code,{children:`Color`}),` option.`]})]})]})]}),`\n`,_jsx(Heading,{level:`3`,id:`filtering-\u0026-sorting`,children:`Filtering \u0026 Sorting`}),`\n`,_jsx(_components.p,{children:`Components for filtering and sorting product listings.`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{style:{textAlign:`left`},children:`Component`}),_jsx(_components.th,{style:{textAlign:`left`},children:`Description`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/components/variant-based-filter`,children:`Variant-Based Filter`})}),_jsxs(_components.td,{style:{textAlign:`left`},children:[`Fetches all variants across your catalog and renders them as filter buttons. Stores the active filter in `,_jsx(_components.code,{children:`localStorage`}),` for a product grid to consume.`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/components/price-sort-controller`,children:`Price Sort Controller`})}),_jsxs(_components.td,{style:{textAlign:`left`},children:[`Dropdown for sorting products by Recommended, Price Low → High, or Price High → Low. Stores the active sort in `,_jsx(_components.code,{children:`sessionStorage`}),`.`]})]})]})]}),`\n`,_jsx(Heading,{level:`3`,id:`pricing`,children:`Pricing`}),`\n`,_jsx(_components.p,{children:`Components for displaying product prices.`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{style:{textAlign:`left`},children:`Component`}),_jsx(_components.th,{style:{textAlign:`left`},children:`Description`})]})}),_jsx(_components.tbody,{children:_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/components/dynamic-product-price`,children:`Dynamic Product Price`})}),_jsx(_components.td,{style:{textAlign:`left`},children:`Displays either the lowest variant price (Card mode) or the currently selected variant’s price (Product mode).`})]})})]}),`\n`,_jsx(Heading,{level:`3`,id:`cart`,children:`Cart`}),`\n`,_jsx(_components.p,{children:`Components for managing and displaying the cart.`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{style:{textAlign:`left`},children:`Component`}),_jsx(_components.th,{style:{textAlign:`left`},children:`Description`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/components/add-to-cart-button`,children:`Add to Cart Button`})}),_jsx(_components.td,{style:{textAlign:`left`},children:`Adds the currently selected variant to the cart. Supports toast notifications and increments quantity if the item already exists.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/components/cart-product-list`,children:`Cart Product List`})}),_jsx(_components.td,{style:{textAlign:`left`},children:`Renders all cart items as cards with product image, title, variant options, price, quantity stepper, and remove button.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/components/cart-item-counter`,children:`Cart Item Counter`})}),_jsxs(_components.td,{style:{textAlign:`left`},children:[`Displays the number of line items in the cart. Updates in real time via the `,_jsx(_components.code,{children:`cartUpdated`}),` event.`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/components/cart-state-controller`,children:`Cart State Controller`})}),_jsx(_components.td,{style:{textAlign:`left`},children:`Switches between two child components depending on whether the cart is empty or has items.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/components/cart-total-price`,children:`Cart Total Price`})}),_jsx(_components.td,{style:{textAlign:`left`},children:`Displays the total cost of all items in the cart with optional currency symbol and code.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/components/clear-cart-button`,children:`Clear Cart Button`})}),_jsx(_components.td,{style:{textAlign:`left`},children:`Wraps any element and clears the entire cart on click.`})]})]})]}),`\n`,_jsx(Heading,{level:`3`,id:`navigation`,children:`Navigation`}),`\n`,_jsx(_components.p,{children:`Components for navigating to Shopify pages.`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{style:{textAlign:`left`},children:`Component`}),_jsx(_components.th,{style:{textAlign:`left`},children:`Description`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/components/checkout-button`,children:`Checkout Button`})}),_jsxs(_components.td,{style:{textAlign:`left`},children:[`Reads the cart from `,_jsx(_components.code,{children:`localStorage`}),`, creates a Shopify cart via the Storefront API, and redirects to the Shopify checkout URL.`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/components/shopify-profile-redirect-button`,children:`Shopify Profile Redirect Button`})}),_jsx(_components.td,{style:{textAlign:`left`},children:`Wraps any element and redirects the user to their Shopify account page on click.`})]})]})]})]})}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":"Overview","description":null,"href":"/components/overview"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Components","slug":"components","depth":2,"children":[{"title":"Galleries","slug":"galleries","depth":3,"children":[]},{"title":"Variant Selection","slug":"variant-selection","depth":3,"children":[]},{"title":"Filtering \u0026 Sorting","slug":"filtering-\u0026-sorting","depth":3,"children":[]},{"title":"Pricing","slug":"pricing","depth":3,"children":[]},{"title":"Cart","slug":"cart","depth":3,"children":[]},{"title":"Navigation","slug":"navigation","depth":3,"children":[]}]}],"codeExamples":{}},"jsLinks":[],"subdomain":"thedesignmvp","siteName":"Framerfy Docs — Setup, Components \u0026 Guides","title":"Framerfy Docs – Shopify Storefronts in Framer","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{"en":{"href":"/components/overview","matchLevel":0},"ar":{"href":"/ar/components/overview","matchLevel":1}}},"lastModified":"2026-06-15T10:20:20.155Z","originalFileLocation":"components/overview.mdx","locale":"en"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=\"dark\";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=\"dark\"}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=\"Learn how to set up and use Framerfy to connect Shopify with Framer. Step-by-step guides, component usage, syncing products, and troubleshooting.\">\u003cmeta data-mint-head name=\"keywords\" content=\"Framerfy, Shopify, Storefronts, Framer, Components, Integration\">\u003cmeta data-mint-head name=\"application-name\" content=\"Framerfy Docs — Setup, Components \u0026amp; Guides\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003cmeta data-mint-head name=\"robots\" content=\"index, follow\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/thedesignmvp/nVAH7Mo4X4OXEnC_/_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/thedesignmvp/nVAH7Mo4X4OXEnC_/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/thedesignmvp/nVAH7Mo4X4OXEnC_/_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/thedesignmvp/nVAH7Mo4X4OXEnC_/_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/thedesignmvp/nVAH7Mo4X4OXEnC_/_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/thedesignmvp/nVAH7Mo4X4OXEnC_/_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/thedesignmvp/nVAH7Mo4X4OXEnC_/_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/thedesignmvp/nVAH7Mo4X4OXEnC_/_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/thedesignmvp/nVAH7Mo4X4OXEnC_/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Framerfy Docs – Shopify Storefronts in Framer\">\u003cmeta data-mint-head property=\"og:description\" content=\"Learn how to set up and use Framerfy to connect Shopify with Framer. Step-by-step guides, component usage, syncing products, and troubleshooting.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Framerfy Docs\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.framerfy.ae/components/overview\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://thedesignmvp.mintlify.app/_mintlify/api/og/v2?division=Documentation\u0026amp;title=Overview\u0026amp;theme=d14dad9a9070f29ed9b37564\u0026amp;signature=662435deb876451a2aaae32e88122293de49a0642887684a9852a68eb9acecc6\">\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=\"Framerfy Docs – Shopify Storefronts in Framer\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Learn how to set up and use Framerfy to connect Shopify with Framer. Step-by-step guides, component usage, syncing products, and troubleshooting.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://thedesignmvp.mintlify.app/_mintlify/api/og/v2?division=Documentation\u0026amp;title=Overview\u0026amp;theme=d14dad9a9070f29ed9b37564\u0026amp;signature=662435deb876451a2aaae32e88122293de49a0642887684a9852a68eb9acecc6\">\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/thedesignmvp/nVAH7Mo4X4OXEnC_/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Framerfy Docs — Setup, Components \u0026amp; Guides\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#5CA87C\">\u003cmeta data-mint-head name=\"og:locale\" content=\"en_US\">\u003cmeta data-mint-head name=\"charset\" content=\"UTF-8\">\u003cmeta data-mint-head name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\u003cmeta data-mint-head name=\"googlebot\" content=\"index, follow\">\u003cmeta data-mint-head name=\"language\" content=\"en\">\u003cmeta data-mint-head name=\"theme-color\" content=\"#5CA87C\">\u003cmeta data-mint-head name=\"color-scheme\" content=\"light dark\">\u003cmeta data-mint-head name=\"format-detection\" content=\"telephone=no\">\u003cmeta data-mint-head name=\"HandheldFriendly\" content=\"True\">\u003cmeta data-mint-head name=\"MobileOptimized\" content=\"320\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-capable\" content=\"yes\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\">\u003cmeta data-mint-head name=\"og:locale:alternate\" content=\"ar_AE\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.framerfy.ae/components/overview\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/components/overview.md\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"en\" href=\"https://docs.framerfy.ae/components/overview\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"ar\" href=\"https://docs.framerfy.ae/ar/components/overview\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"x-default\" href=\"https://docs.framerfy.ae/components/overview\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.framerfy.ae/#organization\",\"name\":\"Framerfy Docs — Setup, Components \u0026 Guides\",\"url\":\"https://docs.framerfy.ae\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/thedesignmvp/Bnj9GiW8prCxI3an/public/logo.svg?fit=max\u0026auto=format\u0026n=Bnj9GiW8prCxI3an\u0026q=85\u0026s=68c5c26880a44a6692962464a1d1dc40\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.framerfy.ae#website\",\"name\":\"Framerfy Docs — Setup, Components \u0026 Guides\",\"url\":\"https://docs.framerfy.ae\",\"publisher\":{\"@id\":\"https://docs.framerfy.ae/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.framerfy.ae/components/overview#webpage\",\"url\":\"https://docs.framerfy.ae/components/overview\",\"name\":\"Overview\",\"dateModified\":\"2026-06-15T10:20:20.155Z\",\"isPartOf\":{\"@id\":\"https://docs.framerfy.ae#website\"}},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.framerfy.ae/components/overview#article\",\"headline\":\"Overview\",\"name\":\"Overview\",\"url\":\"https://docs.framerfy.ae/components/overview\",\"mainEntityOfPage\":{\"@id\":\"https://docs.framerfy.ae/components/overview#webpage\"},\"dateModified\":\"2026-06-15T10:20:20.155Z\",\"publisher\":{\"@id\":\"https://docs.framerfy.ae/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.framerfy.ae#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Framerfy Docs — Setup, Components \u0026 Guides\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"Framerfy Docs — Setup, Components \u0026 Guides","nav":{"global":{"versions":[{"version":"v0.1","href":"/"}]},"languages":[{"language":"en","default":true,"anchors":[{"anchor":"Shopify Integration","icon":"square-terminal","pages":[{"title":"Shopify Integration","href":"/shopify-integration/getting-started"}]},{"anchor":"Components","icon":"block-brick","pages":[{"title":"Overview","href":"/components/overview"},{"title":"Vertical Media Carousel","description":null,"href":"/components/vertical-media-carousel"},{"title":"Slider Media Carousel","href":"/components/slider-media-carousel"},{"title":"Universal Variant Picker","href":"/components/universal-variant-picker"},{"title":"Variant-Based Filter","href":"/components/variant-based-filter"},{"title":"Price Sort Controller","href":"/components/price-sort-controller"},{"title":"Dynamic Product Price","href":"/components/dynamic-product-price"},{"title":"Checkout Button","href":"/components/checkout-button"},{"title":"Cart Item Counter","href":"/components/cart-item-counter"},{"title":"Cart State Controller","href":"/components/cart-state-controller"},{"title":"Cart Product List","href":"/components/cart-product-list"},{"title":"Cart Total Price","href":"/components/cart-total-price"},{"title":"Add to Cart Button","href":"/components/add-to-cart-button"},{"title":"Clear Cart Button","href":"/components/clear-cart-button"},{"title":"Shopify Profile Redirect Button Reference","href":"/components/shopify-profile-redirect-button"},{"title":"CMS Wrapper","href":"/components/cms-wrapper"}]}]},{"language":"ar","pages":[{"title":"ar","href":"/ar/components/overview"}]}]},"title":"Framerfy Docs – Shopify Storefronts in Framer","buildId":"dpl_HcHmUS6i3UwswnTHJUEdcTtwfdTQ","deploymentId":"dpl_HcHmUS6i3UwswnTHJUEdcTtwfdTQ","dynamics":["10e4515597"],"chunks":["BannerMarkdown-DblVYOPe.js","dist-BnkC_6oA.js","lib--scc4DXi.js","lib-B8HbPgcC.js","clsx-CCOYKgaU.js","html-void-elements-mCSPHezU.js","katex-YMM-FMeD.js","marked.esm-CZWythHk.js"]}
