> ## 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. # Add to Cart Button ![Add to Cart Button preview](https://raw.githubusercontent.com/thedesignmvp/framerfy-assets/refs/heads/main/docs/Add%20to%20Cart%20Button.png) 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.