Docs

Click here to go back to main site.

BuyButton & VariantSelector

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

Updated:

May 31, 2026

BuyButton is the buy button. In "buyNow" mode a click goes straight to checkout, in "addToCart" mode the product is only added to the cart and the visitor stays on the page.

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

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

VariantSelector displays the product options, such as size or color. The selection is passed to the BuyButton that shares the same Wix Product ID. To wire this up, bind the Wix Product ID field to the CMS on both components. Products without variants are not rendered by the VariantSelector at all.

‹ Add the components

FAQ & Limits ›

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