يلتف حول أي عنصر ويعيد توجيه المستخدم إلى صفحة حسابه على Shopify عند النقر.
هل كانت هذه الصفحة مفيدة؟
{"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":"ar/components/overview","slug":"/ar/components/overview","pageMetadata":{"title":"نظرة عامة","description":null,"href":"/ar/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:`مجموعة من مكونات Framer المتصلة بـ Shopify لبناء صفحات منتجات متكاملة وخيارات المتغيرات وإدارة عربة التسوق وإجراءات الدفع — دون كتابة أي كود مخصص.`}),`\n`,_jsx(Heading,{level:`2`,id:`المكونات`,children:`المكونات`}),`\n`,_jsx(Heading,{level:`3`,id:`المعارض`,children:`المعارض`}),`\n`,_jsx(_components.p,{children:`مكونات لعرض صور المنتجات.`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{style:{textAlign:`left`},children:`المكون`}),_jsx(_components.th,{style:{textAlign:`left`},children:`الوصف`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/ar/components/vertical-media-carousel`,children:`عرض الوسائط العمودي`})}),_jsx(_components.td,{style:{textAlign:`left`},children:`معرض صور قابل للتمرير مع صور مصغرة عائمة ثابتة وتكبير عند التحويم.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/ar/components/slider-media-carousel`,children:`عرض الوسائط المنزلق`})}),_jsx(_components.td,{style:{textAlign:`left`},children:`شريحة صورة واحدة مع أزرار تنقل بالأسهم وشريط صور مصغرة وتكبير عند التحويم.`})]})]})]}),`\n`,_jsx(Heading,{level:`3`,id:`اختيار-المتغيرات`,children:`اختيار المتغيرات`}),`\n`,_jsx(_components.p,{children:`مكونات تتيح للمستخدمين اختيار متغيرات المنتج.`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{style:{textAlign:`left`},children:`المكون`}),_jsx(_components.th,{style:{textAlign:`left`},children:`الوصف`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/ar/components/universal-variant-picker`,children:`محدد المتغيرات الشامل`})}),_jsx(_components.td,{style:{textAlign:`left`},children:`أزرار خيارات نصية (الحجم، نمط الإطار، إلخ) لأي نوع خيار Shopify. ضع واحدًا لكل خيار.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/ar/components/color-variant-picker`,children:`محدد متغير الألوان`})}),_jsxs(_components.td,{style:{textAlign:`left`},children:[`أزرار دائرية لعينات الألوان مملوءة بالألوان السداسية لكل متغير. مرتبط بخيار `,_jsx(_components.code,{children:`Color`}),`.`]})]})]})]}),`\n`,_jsx(Heading,{level:`3`,id:`التصفية-والترتيب`,children:`التصفية والترتيب`}),`\n`,_jsx(_components.p,{children:`مكونات لتصفية قوائم المنتجات وترتيبها.`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{style:{textAlign:`left`},children:`المكون`}),_jsx(_components.th,{style:{textAlign:`left`},children:`الوصف`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/ar/components/variant-based-filter`,children:`فلتر حسب المتغير`})}),_jsxs(_components.td,{style:{textAlign:`left`},children:[`يجلب جميع المتغيرات من الكتالوج ويعرضها كأزرار فلتر. يحفظ الفلتر النشط في `,_jsx(_components.code,{children:`localStorage`}),` لاستخدامه في شبكة المنتجات.`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/ar/components/price-sort-controller`,children:`متحكم ترتيب الأسعار`})}),_jsxs(_components.td,{style:{textAlign:`left`},children:[`قائمة منسدلة لترتيب المنتجات حسب الموصى به أو السعر من الأدنى للأعلى أو من الأعلى للأدنى. يحفظ الترتيب في `,_jsx(_components.code,{children:`sessionStorage`}),`.`]})]})]})]}),`\n`,_jsx(Heading,{level:`3`,id:`الأسعار`,children:`الأسعار`}),`\n`,_jsx(_components.p,{children:`مكونات لعرض أسعار المنتجات.`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{style:{textAlign:`left`},children:`المكون`}),_jsx(_components.th,{style:{textAlign:`left`},children:`الوصف`})]})}),_jsx(_components.tbody,{children:_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/ar/components/dynamic-product-price`,children:`سعر المنتج الديناميكي`})}),_jsx(_components.td,{style:{textAlign:`left`},children:`يعرض إما أدنى سعر للمتغير (وضع البطاقة) أو سعر المتغير المحدد حاليًا (وضع المنتج).`})]})})]}),`\n`,_jsx(Heading,{level:`3`,id:`عربة-التسوق`,children:`عربة التسوق`}),`\n`,_jsx(_components.p,{children:`مكونات لإدارة عربة التسوق وعرضها.`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{style:{textAlign:`left`},children:`المكون`}),_jsx(_components.th,{style:{textAlign:`left`},children:`الوصف`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/ar/components/add-to-cart-button`,children:`زر إضافة إلى عربة التسوق`})}),_jsx(_components.td,{style:{textAlign:`left`},children:`يضيف المتغير المحدد حاليًا إلى عربة التسوق. يدعم إشعارات التنبيه ويزيد الكمية إذا كان العنصر موجودًا بالفعل.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/ar/components/cart-product-list`,children:`قائمة منتجات عربة التسوق`})}),_jsx(_components.td,{style:{textAlign:`left`},children:`يعرض جميع عناصر عربة التسوق كبطاقات مع صورة المنتج والعنوان وخيارات المتغير والسعر ومتحكم الكمية وزر الحذف.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/ar/components/cart-item-counter`,children:`عداد عناصر عربة التسوق`})}),_jsxs(_components.td,{style:{textAlign:`left`},children:[`يعرض عدد العناصر في عربة التسوق. يتحدث في الوقت الفعلي عبر حدث `,_jsx(_components.code,{children:`cartUpdated`}),`.`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/ar/components/cart-state-controller`,children:`متحكم حالة عربة التسوق`})}),_jsx(_components.td,{style:{textAlign:`left`},children:`يتبدل بين مكونين فرعيين اعتمادًا على ما إذا كانت عربة التسوق فارغة أم تحتوي على عناصر.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/ar/components/cart-total-price`,children:`السعر الإجمالي لعربة التسوق`})}),_jsx(_components.td,{style:{textAlign:`left`},children:`يعرض التكلفة الإجمالية لجميع العناصر في عربة التسوق مع رمز العملة والرمز الاختصاري الاختياريين.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/ar/components/clear-cart-button`,children:`زر مسح عربة التسوق`})}),_jsx(_components.td,{style:{textAlign:`left`},children:`يلتف حول أي عنصر ويمسح عربة التسوق بالكامل عند النقر.`})]})]})]}),`\n`,_jsx(Heading,{level:`3`,id:`التنقل`,children:`التنقل`}),`\n`,_jsx(_components.p,{children:`مكونات للتنقل إلى صفحات Shopify.`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{style:{textAlign:`left`},children:`المكون`}),_jsx(_components.th,{style:{textAlign:`left`},children:`الوصف`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/ar/components/checkout-button`,children:`زر الدفع`})}),_jsxs(_components.td,{style:{textAlign:`left`},children:[`يقرأ عربة التسوق من `,_jsx(_components.code,{children:`localStorage`}),`، ينشئ عربة Shopify عبر Storefront API، ويعيد التوجيه إلى رابط الدفع على Shopify.`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{style:{textAlign:`left`},children:_jsx(_components.a,{href:`https://docs.framerfy.ae/ar/components/shopify-profile-redirect-button`,children:`زر إعادة توجيه الملف الشخصي على Shopify`})}),_jsx(_components.td,{style:{textAlign:`left`},children:`يلتف حول أي عنصر ويعيد توجيه المستخدم إلى صفحة حسابه على Shopify عند النقر.`})]})]})]})]})}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":"نظرة عامة","description":null,"href":"/ar/components/overview"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"المكونات","slug":"المكونات","depth":2,"children":[{"title":"المعارض","slug":"المعارض","depth":3,"children":[]},{"title":"اختيار المتغيرات","slug":"اختيار-المتغيرات","depth":3,"children":[]},{"title":"التصفية والترتيب","slug":"التصفية-والترتيب","depth":3,"children":[]},{"title":"الأسعار","slug":"الأسعار","depth":3,"children":[]},{"title":"عربة التسوق","slug":"عربة-التسوق","depth":3,"children":[]},{"title":"التنقل","slug":"التنقل","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":1},"ar":{"href":"/ar/components/overview","matchLevel":0}}},"lastModified":"2026-06-15T10:20:20.096Z","originalFileLocation":"ar/components/overview.mdx","locale":"ar"},"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/ar/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=%D9%86%D8%B8%D8%B1%D8%A9+%D8%B9%D8%A7%D9%85%D8%A9\u0026amp;theme=d14dad9a9070f29ed9b37564\u0026amp;signature=6728d39afbb4a9b3507740c37da1305a1190196695db430d99fe414d32d74c29\">\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=%D9%86%D8%B8%D8%B1%D8%A9+%D8%B9%D8%A7%D9%85%D8%A9\u0026amp;theme=d14dad9a9070f29ed9b37564\u0026amp;signature=6728d39afbb4a9b3507740c37da1305a1190196695db430d99fe414d32d74c29\">\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/ar/components/overview\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/ar/components/overview.md\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"ar\" href=\"https://docs.framerfy.ae/ar/components/overview\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"en\" href=\"https://docs.framerfy.ae/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/ar/components/overview#webpage\",\"url\":\"https://docs.framerfy.ae/ar/components/overview\",\"name\":\"نظرة عامة\",\"dateModified\":\"2026-06-15T10:20:20.096Z\",\"isPartOf\":{\"@id\":\"https://docs.framerfy.ae#website\"}},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.framerfy.ae/ar/components/overview#article\",\"headline\":\"نظرة عامة\",\"name\":\"نظرة عامة\",\"url\":\"https://docs.framerfy.ae/ar/components/overview\",\"mainEntityOfPage\":{\"@id\":\"https://docs.framerfy.ae/ar/components/overview#webpage\"},\"dateModified\":\"2026-06-15T10:20:20.096Z\",\"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,"pages":[{"title":"en","href":"/components/overview"}]},{"language":"ar","anchors":[{"anchor":"تكامل Shopify","icon":"square-terminal","pages":[{"title":"تكامل Shopify","href":"/ar/shopify-integration/getting-started"}]},{"anchor":"المكونات","icon":"block-brick","pages":[{"title":"نظرة عامة","href":"/ar/components/overview"},{"title":"عرض الوسائط العمودي","description":null,"href":"/ar/components/vertical-media-carousel"},{"title":"عرض الوسائط المنزلق","href":"/ar/components/slider-media-carousel"},{"title":"محدد المتغيرات الشامل","href":"/ar/components/universal-variant-picker"},{"title":"فلتر حسب المتغير","href":"/ar/components/variant-based-filter"},{"title":"متحكم ترتيب الأسعار","href":"/ar/components/price-sort-controller"},{"title":"سعر المنتج الديناميكي","href":"/ar/components/dynamic-product-price"},{"title":"زر الدفع","href":"/ar/components/checkout-button"},{"title":"عداد عناصر عربة التسوق","href":"/ar/components/cart-item-counter"},{"title":"متحكم حالة عربة التسوق","href":"/ar/components/cart-state-controller"},{"title":"قائمة منتجات عربة التسوق","href":"/ar/components/cart-product-list"},{"title":"السعر الإجمالي لعربة التسوق","href":"/ar/components/cart-total-price"},{"title":"زر إضافة إلى عربة التسوق","href":"/ar/components/add-to-cart-button"},{"title":"زر مسح عربة التسوق","href":"/ar/components/clear-cart-button"},{"title":"زر إعادة توجيه الملف الشخصي على Shopify","href":"/ar/components/shopify-profile-redirect-button"},{"title":"غلاف CMS","href":"/ar/components/cms-wrapper"}]}]}]},"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"]}
