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

​

Product ID

​

Product Title

​

Variants (CMS)

​

Image URLs (CMS)

​

Texts

​

Styles

Controls the visual appearance of the button.

​

Toast Layout

Controls the confirmation toast shown after adding an item to the cart. Offset — fine-tunes the toast position relative to the screen edges:

​

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 library and shows the product image, title, and variant name.