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.
Was this page helpful?
⌘I
Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
This is a beta version of the documentation. Please report any issues or feedback to support@framerfy.ae
| Component | Description |
|---|---|
| Vertical Media Carousel | Scrollable vertical (or horizontal) image gallery with sticky floating thumbnails and zoom on hover. |
| Slider Media Carousel | Single-image slider with arrow navigation, thumbnail strip, and zoom on hover. |
| Component | Description |
|---|---|
| Universal Variant Picker | Text-based option buttons (Size, Frame Style, etc.) for any Shopify option type. Place one per option. |
| Color Variant Picker | Circular color swatch buttons filled with each variant’s hex color. Hardcoded to the Color option. |
| Component | Description |
|---|---|
| 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 | Dropdown for sorting products by Recommended, Price Low → High, or Price High → Low. Stores the active sort in sessionStorage. |
| Component | Description |
|---|---|
| Dynamic Product Price | Displays either the lowest variant price (Card mode) or the currently selected variant’s price (Product mode). |
| Component | Description |
|---|---|
| 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 | Renders all cart items as cards with product image, title, variant options, price, quantity stepper, and remove button. |
| Cart Item Counter | Displays the number of line items in the cart. Updates in real time via the cartUpdated event. |
| Cart State Controller | Switches between two child components depending on whether the cart is empty or has items. |
| Cart Total Price | Displays the total cost of all items in the cart with optional currency symbol and code. |
| Clear Cart Button | Wraps any element and clears the entire cart on click. |
| Component | Description |
|---|---|
| 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 | Wraps any element and redirects the user to their Shopify account page on click. |
Was this page helpful?