Add the components

Insert the buy components from the Insert tab. They share a single cart.

Updated:

You add the buy components directly from the plugin’s Insert tab, by click or drag-and-drop. Hover a card and you see the tooltip Drag onto canvas, or click to insert. After inserting you see Inserted ✓.

The five cards are:

  • Buy Button: Add-to-cart button for product pages

  • Cart Button: Cart with live item count badge

  • Variant Selector: Size and color option picker

  • Qty Stepper: Plus / minus quantity control

  • Variant Image: Main product image that swaps with the variant

One shared cart

On insert, the Wix Client ID and matching theme colors are pre-filled automatically. The buy components share the same cart as long as they use the same Wix Client ID. A product added via the Buy Button therefore also appears in the Cart Button.

Checkout

Checkout always redirects to the Wix hosted checkout. For this to work, your Framer domain must be listed in the allowed domains of your Wix headless app.

When a card will not insert

If a card is disabled, the hint tells you why:

  • Select a Wix store first. Connect a store before inserting.

  • Loading… / Resolving credentials… Wait a moment, it is fetching the Wix Client ID.

  • Plugin needs permission / Permission needed. Grant the plugin permission to edit the canvas.

If the Wix Client ID cannot be resolved you may see Could not resolve Wix Client ID. Drop the component anyway and set the Wix Client ID manually. You can still drop the component and fill the Wix Client ID by hand.

_____                                                                 _____
( ___ )---------------------------------------------------------------( ___ )
 |   |                                                                 |   |
 |   |    ________                                                     |   |
 |   |    `MMMMMMM                                   68b               |   |
 |   |     MM    \                                   Y89               |   |
 |   |     MM      ___  __    ___    ___  __    __   ___ ____   ___    |   |
 |   |     MM   ,  `MM 6MM  6MMMMb   `MM 6MMb  6MMb  `MM `MM(   )P'    |   |
 |   |     MMMMMM   MM69 " 8M'  `Mb   MM69 `MM69 `Mb  MM  `MM` ,P      |   |
 |   |     MM   `   MM'        ,oMM   MM'   MM'   MM  MM   `MM,P       |   |
 |   |     MM       MM     ,6MM9'MM   MM    MM    MM  MM    `MM.       |   |
 |   |     MM       MM     MM'   MM   MM    MM    MM  MM    d`MM.      |   |
 |   |     MM       MM     MM.  ,MM   MM    MM    MM  MM   d' `MM.     |   |
 |   |    _MM_     _MM_    `YMMM9'Yb._MM_  _MM_  _MM__MM__d_  _)MM_    |   |
 |___|                                                                 |___|
(_____)---------------------------------------------------------------(_____)

Made in Augsburg by Tim Akihiro

_____                                                                 _____
( ___ )---------------------------------------------------------------( ___ )
 |   |                                                                 |   |
 |   |    ________                                                     |   |
 |   |    `MMMMMMM                                   68b               |   |
 |   |     MM    \                                   Y89               |   |
 |   |     MM      ___  __    ___    ___  __    __   ___ ____   ___    |   |
 |   |     MM   ,  `MM 6MM  6MMMMb   `MM 6MMb  6MMb  `MM `MM(   )P'    |   |
 |   |     MMMMMM   MM69 " 8M'  `Mb   MM69 `MM69 `Mb  MM  `MM` ,P      |   |
 |   |     MM   `   MM'        ,oMM   MM'   MM'   MM  MM   `MM,P       |   |
 |   |     MM       MM     ,6MM9'MM   MM    MM    MM  MM    `MM.       |   |
 |   |     MM       MM     MM'   MM   MM    MM    MM  MM    d`MM.      |   |
 |   |     MM       MM     MM.  ,MM   MM    MM    MM  MM   d' `MM.     |   |
 |   |    _MM_     _MM_    `YMMM9'Yb._MM_  _MM_  _MM__MM__d_  _)MM_    |   |
 |___|                                                                 |___|
(_____)---------------------------------------------------------------(_____)

Made in Augsburg by Tim Akihiro

_____                                                                 _____
( ___ )---------------------------------------------------------------( ___ )
 |   |                                                                 |   |
 |   |    ________                                                     |   |
 |   |    `MMMMMMM                                   68b               |   |
 |   |     MM    \                                   Y89               |   |
 |   |     MM      ___  __    ___    ___  __    __   ___ ____   ___    |   |
 |   |     MM   ,  `MM 6MM  6MMMMb   `MM 6MMb  6MMb  `MM `MM(   )P'    |   |
 |   |     MMMMMM   MM69 " 8M'  `Mb   MM69 `MM69 `Mb  MM  `MM` ,P      |   |
 |   |     MM   `   MM'        ,oMM   MM'   MM'   MM  MM   `MM,P       |   |
 |   |     MM       MM     ,6MM9'MM   MM    MM    MM  MM    `MM.       |   |
 |   |     MM       MM     MM'   MM   MM    MM    MM  MM    d`MM.      |   |
 |   |     MM       MM     MM.  ,MM   MM    MM    MM  MM   d' `MM.     |   |
 |   |    _MM_     _MM_    `YMMM9'Yb._MM_  _MM_  _MM__MM__d_  _)MM_    |   |
 |___|                                                                 |___|
(_____)---------------------------------------------------------------(_____)

Made in Augsburg by Tim Akihiro