Docs

Click here to go back to main site.

Buy Button & Variant Selector

Configure and connect the buy button and the variant picker correctly.

Updated:

Jun 23, 2026

Buy Button

The Buy Button is the purchase control (Add-to-cart button for product pages).

In buyNow mode, a click goes straight to checkout.
In addToCart mode, the product is added to the cart and the visitor stays on the page.

If a product has variants, the Buy Button blocks the purchase until all options are selected and a valid combination exists. This prevents buying without a selection.

The thank-you and cancel URLs in the checkout settings must be full (absolute) addresses.

Variant Selector

The Variant Selector displays the product options, such as size or color (Size and color option picker). The selection is passed to the Buy Button that shares the same Wix Product ID.

To wire this up:

Bind the Wix Product ID field to the CMS on both the Buy Button and the Variant Selector.
Confirm both point at the same product.

Products without variants are not rendered by the Variant Selector at all.

For a main image that swaps with the variant and a clickable thumbnail strip, see the Variant images and gallery guide.

When it goes wrong

The Buy Button does nothing on click: a variant product still has unselected options. Select every option so a valid combination exists.
The Variant Selector shows nothing: the product has no variants (expected), or the Wix Product ID binding is missing or points at the wrong product.
Checkout fails to open: confirm the thank-you and cancel URLs are full absolute addresses, and that your Framer domain is in the Wix allowed domains.

‹ Add the components

Variant images & gallery ›

_____                                                                 _____
( ___ )---------------------------------------------------------------( ___ )
 |   |                                                                 |   |
 |   |    ________                                                     |   |
 |   |    `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_    |   |
 |___|                                                                 |___|
(_____)---------------------------------------------------------------(_____)

Socials

Legal

Links

Blog

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_    |   |
 |___|                                                                 |___|
(_____)---------------------------------------------------------------(_____)

Socials

Legal

Links

Blog

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_    |   |
 |___|                                                                 |___|
(_____)---------------------------------------------------------------(_____)

Socials

Legal

Links

Blog

Made in Augsburg by Tim Akihiro