### Getting Started with Framer Commerce Source: https://framercommerce.com/resources/docs/index Guides users through the initial setup process for Framer Commerce, including configuring Shopify and creating or connecting their store. It also provides resources for legacy users to upgrade to the new v2 platform. ```English Configure Shopify Create & connect your store Legacy users Learn how to upgrade and migrate to our new v2 platform ``` -------------------------------- ### Shopify New Customer Accounts Setup Source: https://framercommerce.com/resources/docs/shopify/customer-accounts Steps to switch to and configure Shopify's New Customer Accounts from the Shopify admin panel. ```APIDOC Shopify Admin Setup: 1. Navigate to Settings > Customer accounts in your Shopify admin. 2. In the "Choose which version of customer accounts to link to" section, select "New". 3. Click "Switch to new customer accounts". 4. Add a link on your Framer site that directs to your Account page. Refer to Shopify's official documentation for detailed instructions and to ensure New Customer Accounts are suitable for your store: https://help.shopify.com/en/manual/customers/customer-accounts/new-customer-accounts/manage ``` -------------------------------- ### Framer Plugin Setup Guide Source: https://framercommerce.com/resources/docs/plugin/set-up Step-by-step instructions for setting up the Framer Commerce plugin. This includes opening the plugin from the Framer Marketplace or directly within Framer, selecting and connecting a Shopify store, and configuring various store settings. ```APIDOC Setup the Framer plugin: 1. Open the plugin: - Visit the Framer Marketplace plugin page for Framer Commerce. - Select the project to open the plugin in, or follow direct opening instructions. - Alternatively, open a Framer file (template, existing site, or blank file). - Click on the Framer Commerce plugin icon. - Search for "Framer Commerce" and press Enter. 2. Choose your store: - Log in using your Framer Commerce credentials. - Select the desired store from the list. - If your store is not listed, refresh the list. - A Demo Store is available for testing. - Confirmation: A toast message "Framer Commerce has added a script to your website." indicates successful connection. 3. Adjust store settings: - Set Default Market: Choose default Country/Currency based on Shopify dashboard settings. - Change Default Checkout Locale: Set the checkout language to match Framer locales for a seamless user experience. - Add Facebook / Meta Pixel ID: Integrate for tracking user interactions, audience targeting, and conversion measurement. - Add Google Analytics ID: Integrate for tracking user interactions, analyzing performance, and measuring conversions. ``` -------------------------------- ### Google Analytics Setup Guide Source: https://framercommerce.com/resources/docs/data-and-analytics/google-analytics Step-by-step instructions for configuring Google Analytics tracking within Framer Commerce. ```APIDOC 1. Configure your tracking on your Google Analytics dashboard. 2. Open the Framer Commerce plugin and navigate to "Store Settings". 3. Paste your Meta Pixel ID into the designated field and click "Save". 4. Ensure the ProductPurchaseButton is exclusively on your Product Display Page (PDP). - The purchase button is responsible for firing the view_item trigger. - For product listing or other pages, utilize the Quick Add button. 5. Publish your website. ``` -------------------------------- ### Create Shopify App and Get Access Token Source: https://framercommerce.com/resources/docs/get-started/configure-shopify Steps to create a Shopify app, configure its API scopes, install it, and retrieve the Storefront API access token. ```APIDOC Create a Shopify App: 1. On your Shopify dashboard, click on "Settings" 2. Click on "Apps and Sales Channels" 3. Click on "Develop Apps" 4. Click on "Create an App" 5. Name the app and click "Create app" 6. Click "Configure Storefront API scopes" 7. Select all scopes and click "Save" 8. Click "Install app" 9. Click on the "API credentials" tab and copy the API access token (Storefront API access token). ``` -------------------------------- ### Get Shopify Store Domain Source: https://framercommerce.com/resources/docs/get-started/configure-shopify Instructions to locate and copy your primary Shopify domain, which is needed for the Framer Commerce store connection. ```APIDOC Get your Shopify Domain: 1. On your Shopify dashboard, click on "Settings" 2. Click on “Domains” tab on the sidebar on the left 3. Copy your primary domain (the default is ".myshopify.com") ``` -------------------------------- ### Data & Analytics in Framer Commerce Source: https://framercommerce.com/resources/docs/index Guides on setting up and utilizing data and analytics tools within Framer Commerce, such as Facebook/Meta Pixel, Google Analytics, UTM Parameters, and Framer Analytics. ```English Facebook/Meta Pixel Google Analytics UTM Parameters Framer Analytics ``` -------------------------------- ### Sync Custom Shopify Metafields to Framer CMS Source: https://framercommerce.com/resources/docs/plugin/cms Guide on importing custom Shopify metadata fields into Framer CMS for advanced content management and features like product grouping or variations. ```APIDOC Shopify Fields (Custom): - Import custom Shopify metadata fields. - Use these fields for product grouping, upsell suggestions, and color variations. Creating & using a new Metafield on Shopify: 1. From Shopify dashboard, go to "Settings" > "Custom Data". 2. Click "Products" > "Add Definition". 3. Configure namespace key and other settings, then click "Save". 4. On your product page, scroll to "Product Metafields" and populate content. ``` -------------------------------- ### Framercommerce Product Components Overview Source: https://framercommerce.com/resources/docs/components/product This section provides an overview of various product-related Framer components. It lists components such as Purchase Button, Price, Variant Selector, and Gallery, with links to their specific documentation sections. ```APIDOC Product Components: - Purchase Button: Handles Add to Cart and Buy Now functionality with state management for product availability and variant selection. Updates dynamically based on product status and variant selection. - Price: Displays the product price. - Compare Price: Displays the original price for comparison. - Discount Badge: Shows price discounts. - Variant Selector: Allows users to select product variants. - Variant Status: Displays the availability status of product variants. - Quantity Selector: Enables users to choose the quantity of a product. - Stock Status: Indicates the current stock level of a product. - Inventory Counter: Shows a counter for product inventory. - Selling Plans: Integrates with product selling plans. - Order Attribute Input: Allows input for order attributes. - Active Variant Image: Displays the image corresponding to the selected variant. - Gallery (Auto): An automatically generated product image gallery. - Slideshow w/ Variants: A slideshow component that supports product variants. - Shop Pay Button: Integrates the Shop Pay payment option. - Quick Add Button: A button for quickly adding products to the cart. - Gallery (Custom): A customizable product image gallery. - Static Variant Image: Displays a static image for a product variant. ``` -------------------------------- ### Quick Add Button Configuration Source: https://framercommerce.com/resources/docs/components/product Allows customers to add products directly to their cart from any page with a single click. It adds the first available variant to the cart without requiring selection. ```APIDOC Quick Add Button: Adds products directly to the cart from any page. Instantly adds the first available variant. Controls: Product ID: Connect to CMS variable (required). Instance: Connect button states (Available, Out of Stock). Type: Select 'Add to Cart' or 'Buy Now' functionality. Trigger Cart: Enable/disable tap event connected to cart overlay trigger component. Disable if in cart overlay to prevent closing. ``` -------------------------------- ### Product Gallery (Custom) Configuration Source: https://framercommerce.com/resources/docs/components/product Configures a gallery natively in Framer, using the Static Image Variant component for thumbnails. It includes tap events for state transitions and variant selection. ```APIDOC Gallery (Custom): Configured natively in Framer. Thumbnail images use [Static Image Variant](https://framercommerce.com/resources/docs/components/product#static-variant-image). Tap event transitions between gallery states and triggers on variant selection. Detach instances for full customization (may reset variable connections/states). Controls: Product ID: Connect to CMS variable (required). Image: Connect to CMS Image variable incrementally (required). Image Number: Set to match the connected image number. ``` -------------------------------- ### Product Gallery (Auto) Configuration Source: https://framercommerce.com/resources/docs/components/product Configures an automatic image gallery with static and active image variants. It supports desktop and phone layouts and integrates with Framer variants for seamless display. ```APIDOC Product ID: Connect to CMS variable (required). Type: Choose your image to Fit or Fill the component. Image(s): Choose between auto-setting the amount of images or manually set the number. Connect each Image variable to the CMS. Gallery (Auto): Components: [Static Image Variant](https://framercommerce.com/resources/docs/components/product#active-image-variant) for thumbnail, [Active Image Variant](https://framercommerce.com/resources/docs/components/product#active-image-variant) for main image. Framer Variants: Desktop, Phone. Controls: Style: Configure image fill or fit, number of items, overflow, padding, gap, and radius. Dots: Configure the styling of the dots for pagination. Arrows: Connect local arrow design components for prev/next and disabled/active states. ``` -------------------------------- ### Create & Connect Framer Commerce Store Source: https://framercommerce.com/resources/docs/get-started/create-a-store Steps to create a new Framer Commerce store and populate it with domain and API key information from Shopify. Includes validation steps to ensure a successful connection. ```English 1. Sign up for a free Framer Commerce account at app.framercommerce.com. 2. On your dashboard, click “Add new store”. 3. Populate your store info (Domain and API Key from Shopify configuration) and click “Create store”. 4. Validate your connection: A green circle indicates a successful connection. A red circle means the API key or domain may be incorrect. Contact support if issues persist. ``` -------------------------------- ### Component Updates Source: https://framercommerce.com/resources/docs/components/intro Instructions on how to update Framer components to ensure they are functioning correctly and have the latest features. This involves checking the Assets panel for available updates. ```APIDOC Updating Components: Go to the Assets panel and click on the purple "Update" link beside any component that has it. ``` -------------------------------- ### Component Customization and Behavior Source: https://framercommerce.com/resources/docs/components/intro Details on customizing Framer components, including the use of instances for native control and how array components automatically duplicate based on data. It also covers controlling text properties for dynamic content. ```APIDOC Customizing Components: - Instances: Used to reference your own design elements from the canvas for 100% native control. - Array Components: Automatically duplicate to match the number of items in your data (e.g., Variant Selectors, Cart Product Cards). - Text Properties: Control styling and text strings for dynamically set text. ``` -------------------------------- ### Selling Plans and Order Attribute Input Source: https://framercommerce.com/resources/docs/components/product Manages purchase options including one-time purchases and subscriptions, integrating with Shopify Sell Plan apps. Also includes a component for users to add custom text attributes to their orders. ```English One-time Purchase $39.99 Subscribe & Save $29.99 Selling Plans Manages one-time purchase and subscription options. Integrates with Shopify Sell Plan apps such as Seal Subscriptions. Controls Product ID Connect to CMS variable (required) Instance Connect subscription interface design Name for customization Order Attribute Input Allow users to input a text string to add to their order as an attribute. Appears in their cart on Framer and on Shopify. Controls Styles Customize form text and styles Required Set the field as optional or required Validate email Set email validation if required Attribute title Set the attribute title sent to Shopify ``` -------------------------------- ### Framer Commerce Plugin Management Source: https://framercommerce.com/resources/docs/index Details on how to set up and manage the Framer Commerce plugin, including instructions for syncing the Content Management System (CMS). ```English Get setup & manage settings Sync the CMS ``` -------------------------------- ### Framer Commerce Components Overview Source: https://framercommerce.com/resources/docs/index An introduction to the various components available in Framer Commerce, covering product components, cart components, and global components for building e-commerce interfaces. ```English Intro to Components Product Components Cart Components Global Components ``` -------------------------------- ### Shop Pay Button Configuration Source: https://framercommerce.com/resources/docs/components/product A one-click Buy Now button that directs customers to the Shopify checkout with pre-populated Shop Pay information. Note that checkout language is not supported. ```APIDOC Buy with Shop Pay: One-click Buy Now button. Directs to Shopify checkout with pre-populated Shop Pay info. Note: Checkout language is not supported. Controls: Product ID: Connect to CMS variable (required). Text: Set 'Buy with' or custom text. Color: Choose from Shopify-approved color combinations. ``` -------------------------------- ### Framer Commerce Plan Options Source: https://framercommerce.com/resources/docs/get-started/create-a-store Information on Framer Commerce's free tier and paid plans. The free tier supports Framer domains and up to 25 unique Shopify items. Paid plans are available for scaling. ```English Free Tier: Use Framer Commerce on Framer domains and up to 25 unique Shopify items. Paid Plans: Subscribe to a plan that fits your needs when ready to go live. To remove the Framer Commerce badge after upgrading, update the script via the plugin: Open plugin -> Click store name -> Click "Update script". Note: Framer and Shopify subscriptions are paid separately. See pricing page for details. ``` -------------------------------- ### Smart Modal Configuration Source: https://framercommerce.com/resources/docs/components/global Configure a Smart Modal component for market selection, promotions, or other uses. It utilizes local storage to manage display frequency and can be set to appear on load, after a delay, or on scroll. Multiple modals can be used sequentially. ```APIDOC Smart Modal: Description: A modal component for market selection, promos, and more. Behavior: - Uses local storage to show the modal once or after a set amount of days. - Multiple modals on the same page appear one after another. Appearance: - Position: Relative (at the bottom of the page) - Width: Fill - Height: Fit Triggering: - Appear on load, after a delay, or on scroll. Nesting: - Use the nested Smart Modal Close component to connect close buttons. ``` -------------------------------- ### Framercommerce Catalog Components Overview Source: https://framercommerce.com/resources/docs/components/catalog This section provides an overview of the various catalog components available in Framercommerce. These components are designed to work with Shopify to enhance product listing pages with features such as filtering, sorting, favoriting, and searching. ```English Catalog Display: Connect this component to your CMS collection on the canvas to unlock Shopify-powered Filtering, Sorting, Favoriting, and Searching, along with simplified dynamic category page setup using your Framer CMS. ``` ```English Filter Button: Enables filtering of products within a catalog. ``` ```English Search: Allows users to search for products within the catalog. ``` ```English Favorite Button: Enables users to mark products as favorites. ``` ```English Sort Dropdown: Provides options to sort products in the catalog. ``` ```English Pagination Button: Facilitates navigation through multiple pages of catalog results. ``` ```English Result Counter: Displays the total number of products in the catalog or search results. ``` ```English Filter Counter: Shows the number of products matching the current filter criteria. ``` ```English Filter Reset Button: Allows users to clear all applied filters. ``` ```English Search Button: Triggers a product search within the catalog. ``` ```English Sort Button: Allows users to sort products in the catalog. ``` -------------------------------- ### Price Display Controls Source: https://framercommerce.com/resources/docs/components/product Manages the display of product prices, including standard prices, sale prices, and compare-at prices. It supports dynamic updates with variant selections and allows configuration of prefixes, formats, and fonts for different price types. ```APIDOC Product ID: Connect to CMS variable (required) Price: Connect to CMS variable (for preview) Varying Prices: Toggle between displaying Minimum Price (i.e. "from $50") or Range (i.e. "$50-$100") when the product has multiple prices and a full variant selection hasn't been made yet. Prefix: If showing a minimum price, set the text to prefix (i.e. "from") Format: Set your currency configurations Fonts: Set fonts and colors for Regular and Sale price Price Compare: Displays Shopify Compare-at Price values. Auto-hides when no compare-at price exists. Compare Price: Connect to CMS variable (for preview) Prefix: Text to display before the compare-at-price (i.e. "was") Format: Set your currency configurations Fonts: Set fonts and colors for Regular and Sale price Strike: Configure strikethrough styling (optional) ``` -------------------------------- ### Shopify Integration with Framer Commerce Source: https://framercommerce.com/resources/docs/index Information on integrating Shopify with Framer Commerce, including details on Shopify Apps, Customer Accounts, and managing Domains and Redirects. ```English Shopify Apps Customer Accounts Domains and Redirects ``` -------------------------------- ### Appearance and Behavior Settings Source: https://framercommerce.com/resources/docs/components/global Customize the appearance and behavior of components. Set styles like Height, Max-Width, Padding, Background, and Transition. Configure the appearance timing (Instant, Delay, Scroll) and show frequency (Once or re-appear after days). ```APIDOC Appearance and Behavior Settings: Appearance: - Height: Fit or 100vh. - Max-Width: Percentage or pixels. - Padding: Customizable. - Background: Customizable. - Transition: Customizable. - Page Scroll: Block or Auto. Appear: - Options: Instant, Delay (with time setting), or Scroll (with Y pixel or percentage distance). Show: - Frequency: Once or re-appear after a set number of days. Identifier: - Purpose: Unique identifier for local storage and connecting with Smart Modal Trigger. ``` -------------------------------- ### Product Variant Controls Source: https://framercommerce.com/resources/docs/components/product Configuration for product variant selection, including connecting to CMS variables, styling options for buttons and dropdowns, and behavior settings for variant display and selection. ```English Product ID: Connect to CMS variable (required). Variants: Connect to CMS variable (required). Image IDs: Connect to "Image Variant IDs" CMS variable (optional, if you want to trigger image changes or display Variant Images) Style: Choose between Buttons or a Dropdown Buttons: Style your buttons layout and states Dropdown: Style your dropdown states Behavior: Choose to auto-select first available variants or load without any selection Choose to show or hide variant groups that only have one option Images / Type: Choose between None, Gallery, or Scroll Sections to control image triggers Images / Two-Way: Enable if you want to enable clicking on an image to change the active variant in the selector Behavior / Filter: Toggle between showing all variant groups in the selector (default), or filter by Equals or Doesn't Equal. If filtering, set the list of Variant titles to filter by (i.e. "Color", "Size", etc.) Behavior / Action: Choose what happens when you click on the variant in this component. It can update the selected variant (default, recommended), or on a product card, can Add to Cart or Buy Now. If setting it to Add to Cart or Buy Now, be sure that the variant selector only displays a single variant group (i.e. "Size"). Behavior / Select 1st: Enable or disable auto-selecting the 1st variant that's in stock. Behavior / PDP: Set to Yes if the component is on a Product Display Page (PDP). Otherwise, set to No – even if it exists in a product card that also appears on the PDP under related items. Behavior / Singles: Show or hide the variant selector if the variant group has only one item. Behavior / Out of Stock: Allow or disable selecting a variant option that's Out of Stock. Title: Show or hide variant group titles and customize the styles Selected Value: Show or hide a text display of the selected value beside the variant group title, and then style it. Color Swatches: Turn on or off Color Swatch UI, and customize styles. In the plugin under Store Settings, configure the values below and one-click save to update all components: Set a list of Titles that will show the Color Swatch UI (i.e. "Color") Set a list of Values and Hex Codes (i.e. "Red" "#FF0000") Image Swatches: Turn on or off Image Swatch UI, and customize styles or choose to inherit from the Color Swatch UI. In the plugin under Store Settings, configure the values below and one-click save to update all components: Set a list of Titles that will show the Image Swatch UI (i.e. "Pattern") Upload your images and matching Variant values (i.e. "Leather") Variant Images: Turn on or off Variant Images to display your CMS Images that are mapped to each variant and customize styles or choose to inherit from the Color Swatch UI. In the plugin under Store Settings, configure your list of Titles that will show the Variant Image UI (i.e. "Style") and one-click save to update all components. Once turned on, connect the "Image 1" "Image 2" "Image 3" etc. variables to your CMS. Make sure Image IDs field is also connected to the CMS. Select Size ``` -------------------------------- ### Preview and Display Settings Source: https://framercommerce.com/resources/docs/components/global Control the visibility of the Preview on the canvas and choose which component instance (Desktop or Phone) to render. Connect natively designed modal states for Desktop and Phone. ```APIDOC Preview and Display Settings: Preview: - Control: Hide or Show the Preview on your canvas. - Suggestion: Enable only when editing. Display: - Options: Choose component instance (Desktop or Phone). Instances: - Connection: Connect natively designed Desktop + Phone modal states. ``` -------------------------------- ### Stock Status and Inventory Counter Source: https://framercommerce.com/resources/docs/components/product Components for displaying stock availability and inventory counts. Stock Status shows availability messages with configurable thresholds, while Inventory Counter displays the exact available count. ```English Stock Status Displays inventory levels and availability messages with configurable thresholds. Controls Product ID Connect to CMS variable (required) Threshold Set inventory level for state change Instance Connect states for above and below threshold 4 left in stock Inventory Counter Display the available inventory count of a selected product or variant. Controls Style Configure quantity text appearance ``` -------------------------------- ### Price Discount Controls Source: https://framercommerce.com/resources/docs/components/product Calculates and displays percentage-based or amount-based discounts. It automatically hides when no discount applies and allows configuration of discount type (Percent or Amount), style, text format, and varying prefixes for multiple discounts. ```APIDOC Product ID: Connect to CMS variable (required). Price: Connect to CMS variable (for preview). Compare Price: Connect to CMS variable (for preview). Type: Toggle between showing a Percent (%) or Amount ($) discount. Style: Configure background and sizing Text Format: Set your text format using {{discount}} to display the value. Varying Prefix: Text to prefix when a product has multiple discounts and a full variant has not been selected yet. Format: Set your currency configurations ``` -------------------------------- ### Static Variant Image Configuration Source: https://framercommerce.com/resources/docs/components/product Displays a fixed image from the product gallery based on image number. It can be configured as a thumbnail, linked to the Variant Selector, and filtered by variant in Alt Text. ```APIDOC Static Variant Image: Displays a fixed image from the product gallery. Can be configured as a thumbnail to connect to Variant Selector and/or Selected Variant Image component. Can be configured to be visible only when image Alt Text (on Shopify) contains the variant value. Controls: Product ID: Connect to CMS variable (required). Image: Connect to CMS Image variable incrementally (required). Image Number: Set to match the image number connected above. Filter Variants: If 'Yes', hides component if Image Alt Text does not contain the variant value. Filter Match: Toggle between 'Any' or 'All' filter matching for variant visibility. Thumbnail: Enable/disable thumbnail functionality. Thumbnail / On click: Choose between triggering Tap Event, Scroll Section (to #image-X), or None. Thumbnail / Styles: Style Hover and Active states, along with Transition. ``` -------------------------------- ### Product Slideshow Configuration Source: https://framercommerce.com/resources/docs/components/product A component that mimics Framer's native slideshow, designed to work with CMS images. It can jump to the active variant if the Variant Selector prop on Images/Type is set to 'Gallery'. ```APIDOC Slideshow: Mimics Framer's native slideshow with CMS images. Triggers active variant if Variant Selector prop on Images / Type is set to "Gallery". Controls: Dots: Configure the styling of the dots on the component itself. Arrows: Connect local arrow design components for prev/next and disabled/active states. ``` -------------------------------- ### Sync Standard Shopify Fields to Framer CMS Source: https://framercommerce.com/resources/docs/plugin/cms Details on selecting and syncing standard Shopify data fields into Framer CMS. Highlights essential fields like Product ID, Title, and Slug, and discusses using Framer's Price components. ```APIDOC Shopify Fields (Standard): - Select desired standard Shopify data fields to sync. - Required fields: Product ID, Title, Slug. - Consider using Framer's Price components for live data and multi-currency support. - Fields like Product Tags, Product Types, and Collections can be used for organization. - The 'Has Variants' toggle can be used for display logic in canvas components (e.g., "Quick Add" buttons). ``` -------------------------------- ### Accessing Framer Analytics Source: https://framercommerce.com/resources/docs/data-and-analytics/framer-analytics Instructions on how to access Framer Analytics within the Framer platform. This involves navigating to the settings and then the analytics tab. ```English How to use: 1. Click on the "Settings" icon on the top right of Framer 2. Click on the "Analytics" tab on the left ``` -------------------------------- ### Make Updates to Framer CMS Content Source: https://framercommerce.com/resources/docs/plugin/cms Information on how to make updates to the content managed within Framer CMS after initial synchronization from Shopify. ```APIDOC Making updates: - Follow the steps outlined in the documentation to update the CMS content after initial sync. ``` -------------------------------- ### Add to Cart Button Controls Source: https://framercommerce.com/resources/docs/components/product Configures the 'Add to Cart' or 'Buy Now' button functionality. It allows connecting to CMS variables for ProductID and VariantID, and managing button states (Available, Out of Stock, Loading, Select Variant). It also controls the interaction with the cart overlay trigger. ```APIDOC ProductID: Connect to CMS variable (required) VariantID: Populate with specific variant ID (optional) Instance: Connect button states: Available, Out of Stock, Loading, Select Variant Type: Select Add to Cart or Buy Now functionality Trigger Cart: Enable or disable the tap event that is connected to your cart overlay trigger component. If in your cart overlay, disable to prevent the cart from closing. Debugging: If your button isn't working, make sure your shopifyProductID is set. If your product has variants, the variant selector is required on the page unless you have manually set the variantID. ``` -------------------------------- ### Create a Framer CMS Collection from Shopify Source: https://framercommerce.com/resources/docs/plugin/cms Steps to create a new collection in Framer CMS and import Shopify products. This involves connecting your store, naming the collection, and selecting fields to sync. ```APIDOC Create a collection: 1. Log in and connect your Shopify store. 2. Click the "CMS" icon on the Framer top bar. 3. If no collection exists, click "Import" on the left panel. 4. If a collection exists, click "Plugins" on the top bar and open the plugin. 5. Name your collection (e.g., "Shop") and click "Create". 6. Customize fields to sync and click "Sync Products". ``` -------------------------------- ### Framer Analytics Overview Source: https://framercommerce.com/resources/docs/data-and-analytics/framer-analytics Provides instant visibility into your store's frontend performance with Framer's built-in analytics. Optimize your user experience with data-driven insights specific to your Framer site. Framer Analytics are native to Framer, track page views and interactions, and provide site performance metrics. ```English What are Framer Analytics? Get instant visibility into your store's frontend performance with Framer's built-in analytics. Optimize your user experience with data-driven insights specific to your Framer site. Purpose: Native analytics for Framer-specific data Tracks page views and interactions Provides site performance metrics ``` -------------------------------- ### Checkout Button Component Source: https://framercommerce.com/resources/docs/components/cart Initiates the Shopify checkout process for the items in the cart. This component supports multi-language functionality and requires instance connection. ```APIDOC Checkout Button: Description: Initiates Shopify checkout process. Supports multi-language functionality. Controls: Instance: Connect button component Example: Checkout ``` -------------------------------- ### Connecting Product ID to CMS Source: https://framercommerce.com/resources/docs/components/intro Explains how to connect the 'productID' variable of a Framer component to the corresponding CMS field to display correct data and ensure proper functionality. This is crucial when components are part of a CMS Collection or CMS Page. ```APIDOC Connecting productID: 1. Insert / select the component. It must be inside a CMS Collection or CMS Page. 2. Connect the productID variable to the matching CMS field. Click the '+' icon beside the 'productID' field and select 'productID' from the list. 3. If nesting components, connect the variable on every level by feeding the variable up to the canvas where it is then connected to the CMS. ``` -------------------------------- ### Framer Commerce Controls: Filter Reset and Search Source: https://framercommerce.com/resources/docs/components/catalog Implement functionality for resetting filters and navigating to search results. Connect buttons to design instances and configure search page slugs. ```APIDOC Filter Reset Button: Let customers clear all filters with a single click. Just connect this to a native design component instance. Controls: Button: Connect to button design instance. No Filters: Show or hide the button when no filters are active. Search Button: Allow customers to click into a dedicated Search page to view all Search results. Controls: Active Button: Connect instance to your natively designed button. Disabled Button: Connect instance to your natively designed button with a disabled state to display when the search bar is empty. If not set, the button will hide instead. Slug: Set the slug of your dedicated search page to direct to. For example, if your URL is mystore.com/search, enter "search" ``` -------------------------------- ### Quantity Selector Component Source: https://framercommerce.com/resources/docs/components/product An input component for selecting product quantity, featuring increment/decrement controls and inventory limit validation. It dynamically adjusts maximum values based on stock. ```English Quantity Selector Input component for product quantity selection with built-in inventory limit validation. Provides increment/decrement controls with dynamic maximum values. Controls Product ID Connect to CMS variable (required) Instance Connect button states: Plus/Minus, Active/Disabled Style Configure quantity text appearance ``` -------------------------------- ### Framer Commerce Controls: Sorting and Pagination Source: https://framercommerce.com/resources/docs/components/catalog Configure sorting and pagination behavior for e-commerce displays. Connect to design components and set default sort orders or pagination types. ```APIDOC Controls: Component: Connect to your button design. Inside your referenced button, use {{param}} in a text layer to display the sort value. Default Sort: Choose your default sorting method that matches what's set on your Catalog Display component. Sort Values: Set your display text for each sort parameter –– Title (A-Z), Title (Z-A), Price (Low), Price (High), Newest, Best Selling. If you leave a field empty, it won't be included in the dropdown. Pagination Button: Use this button to load more results when pagination is enabled in your Catalog Display. It automatically hides when all results are loaded. Just connect it to a native design component. Controls: Type: Choose the function of your button –– Load more, Next, or Previous. Make sure this property matches the pagination type set in CatalogDisplay. Instance: Connect your button design. ``` -------------------------------- ### Standard UTM Parameters Source: https://framercommerce.com/resources/docs/data-and-analytics/utm-parameters Identifies the standard UTM parameters used for tracking marketing campaign performance. These tags help in analyzing traffic sources, marketing mediums, campaign names, paid search keywords, and specific ad content. ```APIDOC utm_source: Identifies the traffic source (facebook, google, newsletter) utm_medium: Shows marketing medium (cpc, email, social) utm_campaign: Names the specific marketing campaign (spring_sale, new_launch) utm_term: Tracks paid search keywords (blue_shoes, summer_dress) utm_content: Distinguishes specific links/ads (top_banner, footer_link) ``` -------------------------------- ### Promo Progress Bar Component Source: https://framercommerce.com/resources/docs/components/cart Incentivizes users by displaying a live progress bar within the cart, based on a set spending threshold for benefits like free shipping. Configuration involves setting the threshold. ```APIDOC Promo Progress Bar: Description: Give your user incentives by giving them a live progress bar in the cart based on the threshold you set. Example: Spend $25 more and get free shipping! ``` -------------------------------- ### Smart Modal Trigger Configuration Source: https://framercommerce.com/resources/docs/components/global A button component to re-open a closed Smart Modal. Connect it to a natively designed button and set the same identifier as the target Smart Modal component. ```APIDOC Smart Modal Trigger: Description: Button to re-open a Smart Modal. Connection: - Instance: Connect your natively designed button. - Identifier: Enter the same identifier as the Smart Modal component. Visibility: - When Open: Show or hide this component when the Smart Modal is open. ``` -------------------------------- ### Smart Modal and Trigger Components Source: https://framercommerce.com/resources/docs/components/global The Smart Modal component works in conjunction with the Smart Modal Trigger. The trigger, when placed within a Smart Modal, can be configured to close the modal on click, providing a seamless user experience for market selection. ```APIDOC Smart Modal & Smart Modal Trigger: Description: Components for managing modal interfaces, often used with market selection. Smart Modal Trigger Controls: - Close Modal: Enable this option if the button is placed within a Smart Modal to close it on click. ``` -------------------------------- ### Connecting Meta Pixel via Framer Commerce Plugin Source: https://framercommerce.com/resources/docs/data-and-analytics/facebook-pixel Provides instructions on how to connect the Meta Pixel ID to Framer Commerce using the plugin, ensuring proper tracking and avoiding conflicts. ```APIDOC Steps to connect Meta Pixel: 1. Install & configure the [Meta Sales Channel](https://apps.shopify.com/facebook?search_id=165b423d-2c20-48ac-be48-a9b1faadc1d0&shallow_install_type=search&surface_detail=meta&surface_inter_position=1&surface_intra_position=1&surface_type=search) on Shopify. 2. Open the Framer Commerce plugin and navigate to "Store Settings". 3. Paste your Meta Pixel ID into the designated field and click "Save". 4. Ensure the ProductPurchaseButton is placed only on your Product Display Page (PDP) to fire the ViewContent trigger. Use the Quick Add button for product listing or other pages. 5. Publish your site. ``` -------------------------------- ### Active Variant Image Component Source: https://framercommerce.com/resources/docs/components/product A component that visually represents the currently selected product variant by displaying its corresponding image. It works in conjunction with the Variant Selector component. ```English Active Variant Image A component that displays the currently selected variant from the Variant Selector component. ``` -------------------------------- ### Facebook / Meta Pixel Key Events Source: https://framercommerce.com/resources/docs/data-and-analytics/facebook-pixel Details the key events tracked by the Meta Pixel and the conditions under which they are triggered within the Framer Commerce platform. ```APIDOC PageView: Triggers on any page load (set by global script) ViewContent: Triggers on Product Display Page load (set by FC_ProductPurchaseButton) AddToCart: Triggers on Add to Cart click (can be set by FC_ProductPurchaseButton, FC_ProductVariants, FC_ProductQuickAddButton) RemoveFromCart: Triggered by FC_CartProductCard InitiateCheckout: Triggers on Buy Now or Checkout event (set by FC_ProductPurchaseButton, FC_ProductVariants, FC_ProductQuickAddButton, FC_CartCheckoutButton, FC_ProductShopPayButton) Checkout/Purchase: All checkout and purchase events are triggered by the Shopify app on the Shopify checkout screen ``` -------------------------------- ### Filter Shopify Items for Framer CMS Import Source: https://framercommerce.com/resources/docs/plugin/cms Instructions on how to filter which Shopify items are imported into Framer CMS by using a unique Vendor name. ```APIDOC Filter Items: 1. Assign a unique Vendor to items in Shopify. 2. In the Framer CMS plugin, select the "Filter" tab. 3. Enter the Vendor name exactly as it appears in Shopify (case-sensitive). ``` -------------------------------- ### Variant Selector Controls Source: https://framercommerce.com/resources/docs/components/product Renders and manages available product variants, including their selection states. This control automatically hides when a product has no variants. It supports different modes like Basic, Advanced, and Adaptive for variant selection. ```APIDOC Variant Selector: Renders and manages available product variants with selection states. Auto-hides when product has no variants. Modes: Basic Advanced Adaptive ```