> ## Documentation Index
> Fetch the complete documentation index at: https://docs.framerfy.ae/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.                                              |