# Add to Cart Button
Source: https://docs.framerfy.ae/components/add-to-cart-button
A Shopify-connected add-to-cart button for Framer that reads the currently selected variant from the URL, adds it to the `localStorage` cart, and optionally shows a toast notification confirming the action.
***
## What It Does
The **Add to Cart Button** is a fully styled, animated button that handles the complete add-to-cart flow for a Shopify product. It reads the active variant from the URL, finds its details from the variants data, and writes the item to the `localStorage` cart — incrementing the quantity if the item is already in the cart.
Key behaviors at a glance:
* **Reads active variant from URL** — on click, reads the `?variant=` URL query parameter to determine which variant to add. Updates automatically when the URL changes (e.g. when the user switches variants).
* **Adds or increments** — if the variant is already in the cart, its quantity is incremented by `1`. If it's new, it is added as a fresh cart entry with quantity `1`.
* \*\*Writes to \*\*`localStorage` — saves the updated cart to `localStorage` under the `cart` key and dispatches a `cartUpdated` event to keep all other cart components in sync.
* **Toast notification** — optionally shows a floating toast with the product image, title, and variant name after a successful add. The toast position and offset are fully configurable.
* **Loading state** — while the item is being added, the button displays a configurable loading label and is temporarily disabled to prevent double-clicks.
* **Animated button** — includes a subtle scale-down on tap and a border-radius transition on hover via Framer Motion.
***
## Property Controls
All controls are accessible in Framer's right panel when the component is selected. They are grouped into seven sections: **Store ID**, **Product ID**, **Product Title**, **Variants**, **Image URLs**, **Texts**, **Styles**, and **Toast Layout**.
### Store ID
| Property | Type | Description |
| :----------- | :----- | :-------------------------------------------------------------------------------------------------------------------- |
| **Store ID** | String | The Shopify store ID. Connect this to the `Store ID` variable from your Framer CMS. Used for total price calculation. |
### Product ID
| Property | Type | Description |
| :------------- | :----- | :--------------------------------------------------------------------------------------------------------------------------------------------- |
| **Product ID** | String | The Shopify product ID. Connect this to the `Product ID` variable from your Framer CMS. Required for the cart item to be correctly identified. |
### Product Title
| Property | Type | Description |
| :---------------- | :----- | :-------------------------------------------------------------------------------------------------------------------------------------- |
| **Product Title** | String | The product name. Connect this to the `Title` variable from your Framer CMS. Used as the cart item title and in the toast notification. |
### Variants *(CMS)*
| Property | Type | Description |
| :----------- | :------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Variants** | String (JSON) | A JSON array of all variant objects for this product. Connect this to the `Variants` variable from your Framer CMS. Used to look up price, title, selected options, and image for the active variant. |
### Image URLs *(CMS)*
| Property | Type | Description |
| :------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Image URLs** | String (JSON) | A JSON array of product image URL objects. Connect this to the `Image URLs` variable from your Framer CMS. Used as a fallback image when the selected variant has no image of its own. |
### Texts
| Property | Type | Default | Description |
| :--------------- | :----- | :------------ | :----------------------------------------------------------------------- |
| **Button Text** | String | `Add to cart` | The label shown on the button in its default state. |
| **Loading Text** | String | `Adding` | The label shown on the button while the item is being added to the cart. |
### Styles
Controls the visual appearance of the button.
| Property | Type | Default | Description |
| :------------------- | :----------- | :--------------------------------- | :------------------------------- |
| **Font** | Font | `16px` | Typography for the button label. |
| **Padding** | Padding | `12px` | Inner spacing of the button. |
| **Background Color** | Color | `#000000` | Background color of the button. |
| **Text Color** | Color | `#ffffff` | Color of the button label text. |
| **Border Radius** | BorderRadius | `12px` | Corner rounding of the button. |
| **Border** | Border | `1px solid rgba(0,0,0,0.5)` | Border style of the button. |
| **Box Shadow** | BoxShadow | `0px 1px 2px 0px rgba(0,0,0,0.25)` | Shadow applied to the button. |
### Toast Layout
Controls the confirmation toast shown after adding an item to the cart.
| Property | Type | Default | Description |
| :----------------- | :------ | :----------- | :--------------------------------------------------------------------------------------------------------------------------------- |
| **Enable Toast** | Boolean | `true` | Toggle the toast notification on or off. |
| **Toast Position** | Enum | `Top Center` | Where the toast appears on screen. Options: `Top Center`, `Top Left`, `Top Right`, `Bottom Left`, `Bottom Center`, `Bottom Right`. |
**Offset** — fine-tunes the toast position relative to the screen edges:
| Property | Type | Default | Description |
| :--------- | :---------- | :------ | :-------------------------------------- |
| **Top** | Number (px) | `64` | Distance from the top of the screen. |
| **Right** | Number (px) | `64` | Distance from the right of the screen. |
| **Bottom** | Number (px) | `64` | Distance from the bottom of the screen. |
| **Left** | Number (px) | `64` | Distance from the left of the screen. |
## Notes
* The button does nothing if **Product ID** is not set — always connect this from CMS.
* The active variant is read from the `?variant=` URL parameter. If no variant is selected when the button is clicked, `selectedVariant` will be `null` and the variant lookup will fail silently. Make sure a variant picker is on the same page.
* The cart item written to `localStorage` includes: `productId`, `variantId`, `title`, `variantTitle`, `price`, `quantity`, `selectedOptions`, and `image`.
* After every add, a `cartUpdated` event is dispatched on `window`, keeping the Cart Item Counter, Cart State Controller, Cart Product List, and Cart Total Price all in sync automatically.
* The toast notification is rendered using the [Sonner](https://sonner.emilkowal.ski/) library and shows the product image, title, and variant name.
# Cart Item Counter
Source: https://docs.framerfy.ae/components/cart-item-counter
A lightweight component for Framer that displays the number of items currently in the cart by reading from `localStorage` and updating in real time when the cart changes.
***
## What It Does
The **Cart Item Counter** renders a single number — the count of items in the cart — as a styled text element. It is designed to be placed in a navbar or cart icon area to give users a live count of how many items they have added.
Key behaviors at a glance:
* \*\*Reads cart from \*\*`localStorage` — on mount, reads the `cart` key from `localStorage` and counts the number of items in the array.
* **Updates in real time** — listens for a custom `cartUpdated` event on `window`. Whenever another component (e.g. an Add to Cart button) dispatches this event, the counter re-reads `localStorage` and updates the displayed number instantly without a page reload.
* **Renders nothing until loaded** — the count is `null` on the first render before `localStorage` is read, so no placeholder number flickers on screen during load.
## Property Controls
| Property | Type | Default | Description |
| :-------- | :---- | :-------- | :------------------------------------------------------------ |
| **Font** | Font | `12px` | Typography for the counter text (family, size, weight, etc.). |
| **Color** | Color | `#181A2C` | Text color of the counter number. |
## Notes
* The counter shows the number of **line items** in the cart array, not the total quantity. If the same product is added twice as separate entries, the count will show `2`.
* The cart must be stored in `localStorage` under the key `cart` as a JSON array. Any component that modifies the cart must dispatch a `cartUpdated` event on `window` after writing to `localStorage` for the counter to update — otherwise it will only reflect the state from the initial page load.
* The component renders no fallback or zero state — if `localStorage` has no `cart` key, the counter displays nothing.
# Cart Product List
Source: https://docs.framerfy.ae/components/cart-product-list
A fully interactive cart item list component for Framer that reads from `localStorage`, renders each item with its image, title, variant options, price, and quantity controls, and supports increasing, decreasing, and removing items in real time.
***
## What It Does
The **Cart Product List** renders all items currently in the cart as individual cards. Each card shows the product image, title, selected variant options, price, a quantity stepper (+/−), and a trash icon to remove the item. All interactions write directly back to `localStorage` and dispatch a `cartUpdated` event to keep other cart components in sync.
Key behaviors at a glance:
* \*\*Reads cart from \*\*`localStorage` — on mount, reads the `cart` key and renders one card per item.
* **Increase / decrease quantity** — the `+` and `−` buttons update the item's quantity. The minimum quantity is `1`; the `−` button does not go below it.
* **Remove item** — the trash icon removes the item from the cart entirely.
* \*\*Writes back to \*\*`localStorage` — every quantity or delete action saves the updated cart back to `localStorage` and dispatches a `cartUpdated` event so the Cart Item Counter, Cart State Controller, and any other cart components update instantly.
* **Preview-safe dummy data** — when the cart is empty (e.g. on the Framer canvas), the component renders five sample items so the layout is always visible while designing.
* **Updates in real time** — listens for `cartUpdated` events from other components so the list stays in sync if the cart is modified elsewhere on the page.
***
## Property Controls
All controls are accessible in Framer's right panel when the component is selected. They are grouped into four sections: **Outer Container**, **Card**, **Image**, and **Content**.
***
### Outer Container
| Property | Type | Description |
| :-------------------- | :---------- | :--------------------------------------------------- |
| **Gap between cards** | Number (px) | Vertical spacing between individual cart item cards. |
***
### Card
Controls the appearance of each cart item card.
| Property | Type | Default | Description |
| :---------------- | :----------- | :--------------------------------- | :----------------------------------------------------------------- |
| **Padding** | Padding | — | Inner spacing inside each card. |
| **Border** | Border | `1px solid rgba(0,0,0,0.5)` | Border style of each card. |
| **Border Radius** | BorderRadius | — | Corner rounding of each card. |
| **Shadow** | BoxShadow | `0px 1px 2px 0px rgba(0,0,0,0.25)` | Shadow applied to each card. |
| **Background** | Color | `#fff` | Background color of each card. |
| **Gap** | Number (px) | — | Horizontal spacing between the product image and the content area. |
***
### Image
Controls the product image on the left side of each card.
| Property | Type | Default | Description |
| :---------------- | :----------- | :-------- | :---------------------------------------------------------------- |
| **Width** | Number (px) | `180` | Width of the product image. |
| **Height** | Number (px) | `180` | Height of the product image. |
| **Border Radius** | BorderRadius | — | Corner rounding of the product image. |
| **Type** | Enum | `Contain` | How the image fills its box. Options: `Contain`, `Cover`, `Fill`. |
***
### Content
Controls all text, layout, and interactive elements in the right-hand content area of each card.
***
#### Quantity
Controls the quantity stepper (− / value / +).
**Container** — the pill or box wrapping all three elements:
| Property | Type | Default | Description |
| :---------------- | :----------- | :--------------------------------- | :-------------------------------------------------- |
| **Gap** | Number (px) | `4` | Spacing between the buttons and the quantity value. |
| **Background** | Color | `#000` | Background color of the quantity container. |
| **Padding** | Padding | — | Inner spacing of the quantity container. |
| **Border** | Border | `1px solid rgba(0,0,0,0.5)` | Border of the quantity container. |
| **Border Radius** | BorderRadius | — | Corner rounding of the quantity container. |
| **Shadow** | BoxShadow | `0px 1px 2px 0px rgba(0,0,0,0.25)` | Shadow on the quantity container. |
**Buttons** — the individual `+` and `−` buttons:
| Property | Type | Default | Description |
| :---------------- | :----------- | :-------------------------- | :--------------------------------- |
| **Padding** | Padding | — | Inner spacing of each button. |
| **Border** | Border | `1px solid rgba(0,0,0,0.5)` | Border of each button. |
| **Border Radius** | BorderRadius | — | Corner rounding of each button. |
| **Background** | Color | `#fff` | Background color of each button. |
| **Icon Color** | Color | `#000` | Color of the plus and minus icons. |
| **Icon Size** | Number (px) | `16` | Size of the plus and minus icons. |
**Text** — the quantity value displayed between the buttons:
| Property | Type | Default | Description |
| :-------- | :---- | :------ | :---------------------------------- |
| **Font** | Font | — | Typography for the quantity number. |
| **Color** | Color | `#fff` | Text color of the quantity number. |
***
#### Trash Icon
Controls the remove item button.
| Property | Type | Default | Description |
| :---------------- | :----------- | :------ | :-------------------------------------------- |
| **Background** | Color | `#000` | Background color of the trash icon container. |
| **Color** | Color | `#fff` | Color of the trash icon. |
| **Size** | Number (px) | `16` | Size of the trash icon. |
| **Padding** | Padding | — | Inner spacing around the trash icon. |
| **Border Radius** | BorderRadius | — | Corner rounding of the trash icon container. |
#### Title
| Property | Type | Default | Description |
| :-------- | :---- | :------ | :-------------------------------- |
| **Font** | Font | — | Typography for the product title. |
| **Color** | Color | `#000` | Text color of the product title. |
#### Price
| Property | Type | Default | Description |
| :------------ | :---- | :------- | :-------------------------------------------------------------------------------------------------- |
| **Font** | Font | — | Typography for the product price. |
| **Color** | Color | `#000` | Text color of the product price. |
| **Alignment** | Enum | `Center` | Vertical alignment of the price relative to the title. Options: `Center`, `Flex Start`, `Flex End`. |
#### Variant
Controls the variant option labels (e.g. `Color: Black`) shown under the product title.
**Key** — the option name (e.g. `Color`, `Size`):
| Property | Type | Default | Description |
| :-------- | :---- | :------ | :--------------------------------- |
| **Font** | Font | — | Typography for variant key labels. |
| **Color** | Color | `#000` | Text color of variant key labels. |
**Value** — the option value (e.g. `Black`, `Large`):
| Property | Type | Default | Description |
| :-------- | :---- | :------ | :----------------------------- |
| **Font** | Font | — | Typography for variant values. |
| **Color** | Color | `#000` | Text color of variant values. |
#### Spacing
| Property | Type | Description |
| :----------- | :------ | :------------------------------------------------------------------------------------------------------------------------- |
| **Padding** | Padding | Inner spacing of the entire content area. |
| **Gap** | Gap | Spacing between title, variant labels, and price. |
| **Main Gap** | Gap | Spacing between the upper content block (title, variants, price) and the lower controls (quantity stepper and trash icon). |
## Notes
* Each cart item in `localStorage` must include `variantId`, `title`, `price.amount`, `quantity`, `selectedOptions`, and optionally `image`. If `image` is missing, a placeholder image is shown.
* Every interaction (increase, decrease, delete) dispatches a `cartUpdated` event on `window` after saving to `localStorage`, keeping the Cart Item Counter and Cart State Controller in sync automatically.
* The minimum quantity per item is `1`. Clicking `−` on a quantity of `1` does nothing.
* When the cart is empty, five dummy preview items are rendered so the layout remains visible in Framer's canvas while designing.
# Cart State Controller
Source: https://docs.framerfy.ae/components/cart-state-controller
A cart-aware visibility switcher for Framer that renders one of two components depending on whether the cart has items or is empty.
***
## What It Does
The **Cart State Controller** conditionally renders one of two child components based on the current cart state. It is designed for use cases like showing a filled cart icon when items are present and an empty cart icon when the cart is cleared — or toggling entire UI sections based on cart state.
Key behaviors at a glance:
* **Switches between two states** — renders the **Filled** slot when the cart has one or more items, and the **Empty** slot when the cart is empty or not yet loaded.
* \*\*Reads cart from \*\*`localStorage` — on mount, reads the `cart` key from `localStorage` to determine the initial state.
* **Updates in real time** — listens for a custom `cartUpdated` event on `window`. When any other component dispatches this event after modifying the cart, the controller switches its displayed state instantly without a page reload.
* **Stretches child to fill** — automatically sets the first child element's width and height to `100%` so it fills the container regardless of the child component's own sizing.
## Property Controls
| Property | Type | Description |
| :--------- | :----------------- | :------------------------------------------------------------------- |
| **Filled** | Component Instance | The Framer component shown when the cart contains one or more items. |
| **Empty** | Component Instance | The Framer component shown when the cart is empty. |
## Notes
* Both slots accept any Framer component — icon variants, full UI sections, animated elements, etc.
* The switch is based on the number of **line items** in the cart array, not total quantity. An array with one entry counts as filled even if its quantity is greater than `1`.
* Any component that modifies the cart must dispatch a `cartUpdated` event on `window` after writing to `localStorage` for the controller to react — otherwise it will only reflect the state from initial page load.
* Until `localStorage` is read on mount, `items` is `null` and the **Empty** slot is shown by default.
# Cart Total Price
Source: https://docs.framerfy.ae/components/cart-total-price
A real-time cart total component for Framer that calculates and displays the combined price of all items in the cart, with optional currency symbol and code.
***
## What It Does
The **Cart Total Price** renders a single line of text showing the total cost of all items currently in the cart. It multiplies each item's price by its quantity, sums them up, and updates automatically whenever the cart changes.
Key behaviors at a glance:
* **Calculates total** — sums `price.amount × quantity` across all cart items and displays the result.
* **Updates in real time** — listens for the `cartUpdated` event on `window` and recalculates the total instantly whenever the cart is modified by any other component.
* **Currency symbol and code** — optionally displays the currency symbol (e.g. `₹`) before the total and/or the currency code (e.g. `INR`) after it. Both are derived from the first item's `currencyCode` field in the cart.
* **Defaults to zero** — displays `0` when the cart is empty.
***
## Property Controls
All controls are accessible in Framer's right panel when the component is selected. They are grouped into two sections: **Styles** and **Format**.
### Styles
| Property | Type | Default | Description |
| :-------- | :---- | :------ | :----------------------------------- |
| **Font** | Font | `16px` | Typography for the total price text. |
| **Color** | Color | — | Text color of the total price. |
### Format
| Property | Type | Default | Description |
| :-------------- | :------ | :------ | :------------------------------------------------------------------------------------------------------------------------------------------- |
| **Show Symbol** | Boolean | `false` | When enabled, displays the currency symbol before the total (e.g. `₹`, `$`). Derived from the `currencyCode` of the first item in the cart. |
| **Show Code** | Boolean | `false` | When enabled, displays the currency code after the total (e.g. `INR`, `USD`). Derived from the `currencyCode` of the first item in the cart. |
## Notes
* The currency symbol and code are both read from the **first item** in the cart. If your cart contains items with mixed currencies, only the first item's currency will be shown.
* The total does not apply any decimal formatting — it displays the raw calculated number. Use the **Dynamic Product Price** component if you need decimal control per variant.
* Any component that modifies the cart must dispatch a `cartUpdated` event on `window` after writing to `localStorage` for the total to update.
* The supported currencies and their symbols are: USD `$`, EUR `€`, GBP `£`, INR `₹`, JPY `¥`, CNY `¥`, AUD `A$`, CAD `C$`, CHF `CHF`, SEK `kr`, NZD `NZ$`, SGD `S$`, HKD `HK$`, KRW `₩`, ZAR `R`, RUB `₽`, BRL `R$`, MXN `MX$`, AED `د.إ`, SAR `﷼`.
# Checkout Button
Source: https://docs.framerfy.ae/components/checkout-button
A Shopify checkout trigger component for Framer that reads the current cart from `localStorage`, creates a Shopify cart via the Storefront API, and redirects the user to the Shopify checkout URL.
***
## What It Does
The **Checkout Button** is a wrapper component — it accepts any Framer element as its child and makes it trigger the Shopify checkout flow when clicked. The button itself has no visual style of its own; the appearance is entirely defined by whatever component you place inside it.
Key behaviors at a glance:
* \*\*Reads cart from \*\*`localStorage` — on click, reads the `cart` key from `localStorage`, which is expected to be a JSON array of items with `variantId` and `quantity`.
* **Creates a Shopify cart** — sends a `cartCreate` GraphQL mutation to the Shopify Storefront API with all items in the cart.
* **Redirects to checkout** — opens the Shopify-generated `checkoutUrl` in a new tab once the cart is successfully created.
* **Silent on empty cart** — if the cart is empty or missing, the click does nothing and logs a warning to the console.
* **Accepts any child element** — wraps whatever Framer component or design element you place inside it, so the visual design of the button is completely up to you.
## Property Controls
| Property | Type | Description |
| :----------- | :----------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Children** | Component Instance | The Framer component or element that visually represents the button. Click events on this element trigger the checkout flow. Any component can be used — a styled rectangle, a text layer, a component from your assets panel, etc. |
## Notes
* This component requires `window.DOMAIN` and `window.ACCESSTOKEN` to be set globally on the page. Without these, the Shopify API call will fail.
* The cart data must be stored in `localStorage` under the key `cart` as a JSON array. Each item in the array must have a `variantId` (numeric Shopify variant ID) and optionally a `quantity` (defaults to `1` if not provided).
* The checkout URL opens in a **new tab** (`window.open`).
* If the Shopify API returns no checkout URL (e.g. due to an invalid variant ID or API error), the component logs an error to the console and does not redirect.
* This component has no fallback UI for errors — error states are only visible in the browser console.
# Clear Cart Button
Source: https://docs.framerfy.ae/components/clear-cart-button
A cart-clearing wrapper component for Framer that removes all items from the cart when clicked and notifies all other cart components to update.
***
## What It Does
The **Clear Cart Button** wraps any Framer component and makes it completely empty the cart on click. It has no visual style of its own — the appearance is entirely defined by the component placed inside it.
Key behaviors at a glance:
* **Clears the entire cart** — removes the `cart` key from `localStorage` entirely on click.
* **Notifies other components** — dispatches a `cartUpdated` event on `window` after clearing, so the Cart Item Counter, Cart State Controller, Cart Product List, and Cart Total Price all update instantly.
* **Accepts any child element** — wraps whatever Framer component or design element you place inside it, so the visual design is completely up to you.
## Property Controls
| Property | Type | Description |
| :---------------------------------------------------- | :----------------- | :----------------------------------------------------------------------------------- |
| **Custom button or element that triggers clear cart** | Component Instance | The Framer component shown as the button. Any click on this element clears the cart. |
## Notes
* This action is **irreversible** — there is no confirmation step or undo. The entire cart is deleted immediately on click.
* After clearing, a `cartUpdated` event is dispatched on `window`, keeping all cart components in sync automatically.
* The wrapper has a minimum size of `20×20px` to ensure it remains clickable even if the child component renders at zero size.
# CMS Wrapper
Source: https://docs.framerfy.ae/components/cms-wrapper
A DOM-based product listing controller for Framer that adds pagination, price sorting, and variant filtering on top of any Framer CMS collection — with responsive layout support for desktop, tablet, and mobile.
***
## What It Does
The **CMS Wrapper** wraps a Framer CMS collection component and takes control of which items are shown. It reads prices and product IDs directly from the rendered DOM, then handles pagination, sorting, and filtering entirely on the client side — no backend required.
Key behaviors at a glance:
* **Pagination** — splits the full list of CMS items into pages and renders only the current page's items. Previous/Next buttons navigate between pages. The page counter shows the current page and total pages, or "No items" when all items are filtered out.
* **Price sorting** — reads the `priceSort` key from `sessionStorage` and re-orders items by price (Low → High or High → Low) whenever it changes. Works with the **Price Sort Controller** component out of the box.
* **Variant filtering** — reads the `variantFilterProductIds` key from `localStorage` and hides any CMS items whose product ID is not in the list. Works with the **Variant-Based Filter** component out of the box.
* **Responsive layouts** — accepts separate CMS page components for desktop, tablet, and mobile. Switches between them based on configurable breakpoint widths.
* **Scroll on page change** — after navigating to a new page, the viewport automatically scrolls up to the top of the list with a configurable offset to account for sticky headers or navbars.
* **Live updates** — listens for `storage` events on `window` so the list reacts instantly whenever the sort order or variant filter changes without a page reload.
* **DOM-based price extraction** — reads prices from elements with the class `.framerfyPrice` and product IDs from the second class name on that element (e.g. `framerfyPrice 8352533184673`).
***
## Property Controls
All controls are accessible in Framer's right panel when the component is selected.
### CMS Pages
| Property | Type | Default | Description |
| ------------------- | ------------------ | ------- | ------------------------------------------------------------------------------------------------------------- |
| **CMS Page** | Component Instance | — | The primary Framer CMS collection component used on desktop. This is the main content slot — always required. |
| **CMS Tablet Page** | Component Instance | — | The CMS collection component used when the screen width is at or below the **Tablet Breakpoint**. |
| **CMS Mobile Page** | Component Instance | — | The CMS collection component used when the screen width is at or below the **Mobile Breakpoint**. |
### Breakpoints
| Property | Type | Default | Description |
| --------------------- | ------ | ------- | ----------------------------------------------------------------------------------------------------------------------- |
| **Tablet Breakpoint** | Number | `1199` | Screen width in pixels at which the Tablet CMS page is used instead of the Desktop CMS page. |
| **Mobile Breakpoint** | Number | `809` | Screen width in pixels at which the Mobile CMS page is used. Takes priority over the Tablet breakpoint when both apply. |
### Pagination
| Property | Type | Default | Description |
| ------------------------- | ----------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Items Per Page** | Number | `15` | How many CMS items to show per page. Range: 1–50. |
| **Scroll Offset Padding** | Number (px) | `258` | When the user navigates to a new page, the viewport scrolls to the top of the list minus this offset. Increase this value if a sticky header or navbar covers the top of the list. Range: 0–500 px. |
## Notes
* This component requires the **Dynamic Product Price** component to be inside each CMS card with the class `framerfyPrice` for price sorting and filtering to work. Without it, all items will have a price of `0`.
* Product IDs are read from the second class name on the `.framerfyPrice` element (e.g. ``). The **Dynamic Product Price** component handles this automatically when **Product ID** is connected from CMS.
* Price sorting reacts to the `priceSort` key in `sessionStorage`. Connect a **Price Sort Controller** on the same page to drive this.
* Variant filtering reacts to the `variantFilterProductIds` key in `localStorage`. Connect a **Variant-Based Filter** on the same page to drive this.
* When no variant filter is active (the `variantFilterProductIds` array is empty), all items are shown.
* The breakpoint check runs once on mount using `window.innerWidth` — it does not dynamically swap layouts on browser resize.
* Price filtering via min/max inputs is implemented in the code but currently disabled in the Framer panel. It can be enabled by uncommenting the relevant property controls in the source.
# Dynamic Product Price
Source: https://docs.framerfy.ae/components/dynamic-product-price
A variant-aware price display component for Framer that shows either the lowest available price for a product card or the price of the currently selected variant on a product page.
***
## What It Does
The **Dynamic Product Price** renders a single price value as a styled text element. It has two modes — **Card** for product listing pages and **Product** for product detail pages — and supports optional currency symbol, currency code, and decimal formatting.
Key behaviors at a glance:
* **Card mode** — displays the lowest price across all variants. Useful on collection or listing pages where no specific variant is selected.
* **Product mode** — reads the `?variant=` URL query parameter and displays the price of the currently selected variant. Updates automatically when the variant changes (e.g. when the user interacts with a variant picker).
* **Currency symbol and code** — optionally shows the currency symbol (e.g. `₹`) and/or the currency code (e.g. `INR`) alongside the price. Both are derived from the variant's `currencyCode` field, with a fallback to the **Currency** setting in Format.
* **Decimal control** — decimals can be shown or hidden independently of the symbol and code.
* **Variant-aware** — listens to `popstate` events so the displayed price stays in sync with the active variant across all picker components on the page.
***
## Property Controls
All controls are accessible in Framer's right panel when the component is selected. They are grouped into five sections: **Product ID**, **Variants**, **Price Type**, **Format**, and **Styles**.
### Product ID
| Property | Type | Description |
| :------------- | :----- | :------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Product ID** | String | The Shopify product ID for this product. Connect this to the `Product ID` variable from your Framer CMS. Used to scope the price to the correct product. |
### Variants *(CMS)*
| Property | Type | Description |
| :----------- | :------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Variants** | String (JSON) | A JSON array of all variant objects for this product, each containing `id`, `price.amount`, and `price.currencyCode`. Connect this to the `Variants` variable from your Framer CMS. |
### Price Type
| Property | Type | Default | Description |
| :------------- | :--- | :------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Price Type** | Enum | `Card` | Controls which price is displayed. `Card` shows the lowest price across all variants — use this on listing/collection pages. `Product` shows the price of the currently selected variant — use this on product detail pages alongside variant pickers. |
### Format
Controls how the price value is displayed.
| Property | Type | Default | Description |
| :--------------- | :------ | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Show Symbol** | Boolean | `false` | When enabled, displays the currency symbol before the price (e.g. `₹`, `$`, `€`). The symbol is derived from the active variant's `currencyCode`. |
| **Show Code** | Boolean | `false` | When enabled, displays the currency code after the price (e.g. `INR`, `USD`). The code is derived from the active variant's `currencyCode`. |
| **Show Decimal** | Boolean | `false` | When enabled, formats the price to two decimal places (e.g. `600.00`). When disabled, the price is shown as a whole number. |
### Styles
Controls the visual appearance of the price text.
| Property | Type | Description |
| :-------- | :---- | :---------------------------------------------------------- |
| **Font** | Font | Typography for the price text (family, size, weight, etc.). |
| **Color** | Color | Text color of the price. |
## Notes
* The supported currencies and their symbols are: USD `$`, EUR `€`, GBP `£`, INR `₹`, JPY `¥`, CNY `¥`, AUD `A$`, CAD `C$`, CHF `CHF`, SEK `kr`, NZD `NZ$`, SGD `S$`, HKD `HK$`, KRW `₩`, ZAR `R`, RUB `₽`, BRL `R$`, MXN `MX$`, AED `د.إ`, SAR `﷼`.
* In **Card** mode the price shown is always the lowest price across all variants, regardless of any active URL variant parameter.
* In **Product** mode the price updates automatically whenever the `?variant=` URL parameter changes — no extra wiring needed as long as the variant pickers on the page are also writing to that parameter.
* If no variant is selected and no fallback `price` prop is passed, the price area may render empty in **Product** mode.
# Overview
Source: https://docs.framerfy.ae/components/overview
A collection of Shopify-connected Framer components for building fully functional product pages, variant selection, cart management, and checkout flows — without writing any custom code.
## Components
### Galleries
Components for displaying product images.
| Component | Description |
| :------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------- |
| [Vertical Media Carousel](https://docs.framerfy.ae/components/vertical-media-carousel) | Scrollable vertical (or horizontal) image gallery with sticky floating thumbnails and zoom on hover. |
| [Slider Media Carousel](https://docs.framerfy.ae/components/slider-media-carousel) | Single-image slider with arrow navigation, thumbnail strip, and zoom on hover. |
### Variant Selection
Components for letting users choose product variants.
| Component | Description |
| :--------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------- |
| [Universal Variant Picker](https://docs.framerfy.ae/components/universal-variant-picker) | Text-based option buttons (Size, Frame Style, etc.) for any Shopify option type. Place one per option. |
| [Color Variant Picker](https://docs.framerfy.ae/components/color-variant-picker) | Circular color swatch buttons filled with each variant's hex color. Hardcoded to the `Color` option. |
### Filtering & Sorting
Components for filtering and sorting product listings.
| Component | Description |
| :--------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Variant-Based Filter](https://docs.framerfy.ae/components/variant-based-filter) | Fetches all variants across your catalog and renders them as filter buttons. Stores the active filter in `localStorage` for a product grid to consume. |
| [Price Sort Controller](https://docs.framerfy.ae/components/price-sort-controller) | Dropdown for sorting products by Recommended, Price Low → High, or Price High → Low. Stores the active sort in `sessionStorage`. |
### Pricing
Components for displaying product prices.
| Component | Description |
| :--------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
| [Dynamic Product Price](https://docs.framerfy.ae/components/dynamic-product-price) | Displays either the lowest variant price (Card mode) or the currently selected variant's price (Product mode). |
### Cart
Components for managing and displaying the cart.
| Component | Description |
| :--------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------- |
| [Add to Cart Button](https://docs.framerfy.ae/components/add-to-cart-button) | Adds the currently selected variant to the cart. Supports toast notifications and increments quantity if the item already exists. |
| [Cart Product List](https://docs.framerfy.ae/components/cart-product-list) | Renders all cart items as cards with product image, title, variant options, price, quantity stepper, and remove button. |
| [Cart Item Counter](https://docs.framerfy.ae/components/cart-item-counter) | Displays the number of line items in the cart. Updates in real time via the `cartUpdated` event. |
| [Cart State Controller](https://docs.framerfy.ae/components/cart-state-controller) | Switches between two child components depending on whether the cart is empty or has items. |
| [Cart Total Price](https://docs.framerfy.ae/components/cart-total-price) | Displays the total cost of all items in the cart with optional currency symbol and code. |
| [Clear Cart Button](https://docs.framerfy.ae/components/clear-cart-button) | Wraps any element and clears the entire cart on click. |
### Navigation
Components for navigating to Shopify pages.
| Component | Description |
| :----------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------- |
| [Checkout Button](https://docs.framerfy.ae/components/checkout-button) | Reads the cart from `localStorage`, creates a Shopify cart via the Storefront API, and redirects to the Shopify checkout URL. |
| [Shopify Profile Redirect Button](https://docs.framerfy.ae/components/shopify-profile-redirect-button) | Wraps any element and redirects the user to their Shopify account page on click. |
# Price Sort Controller
Source: https://docs.framerfy.ae/components/price-sort-controller
# Price Sort Controller
A price sorting dropdown component for Framer that stores the active sort order in `sessionStorage` and broadcasts a storage event for a product listing component to reactively re-sort its results.
***
## What It Does
The **Price Sort Controller** renders a styled native dropdown (`