Framer Commerce

https://framercommerce.com/resources/docs
Admin
Framer Commerce is a plugin that integrates Shopify with Framer, enabling users to create and manage...
Tokens:19,813
Snippets:67
Trust Score:7.4
Update:1 year ago
Show doc for...
Tokens:
Raw
### 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
```
Tokens:
Raw