Preselect variant options on a checkout
In this help article, you will learn how to preselect a variant option on a checkout.
Checkout Page is a one-page checkout that lets you preselect a product tier or product upsell before your customer arrives at your checkout.
This way, their (or your!) preferred choice is already selected.
Why you may want to preselect a variant option
You sell your product at 3 price points. You preselect the middle option (“most popular”) so your customers don’t have to make a choice.
You offer an upsell for your product (e.g. a private coaching call or an additional item). You preselect the upsell option to increase the average order value.
You let people choose a product variation on your site and preselect their choice on the checkout.
You use your checkout in multiple places on your site, and on each page, you preselect a different product variant option.
How to preselect a variant option
There are two ways you can preselect the variant option for your checkout.
Preselect variant option using variant settings
You can quickly preselect the variant option in your variant settings.
Once you have added your product variants, scroll down to variant Settings and tick Preselect option.
Now, you can choose the default variant option preselected for your customers when they open your checkout.
Preselect variant option using URL query parameters
Preselecting variant options using URL query parameters works similarly to prefilling fields.
You can dynamically preselect variant options by using URL query parameters. You can use this to preselect a variant option based on a specific landing page or button click on your website.
To preselect a variant option, you add the variant Reference and variant SKU to the URL. You can find the variant Reference and Set SKU in the Settings.
For example, if you want to preselect the variant option with the SKU
2 of a variant with the reference
type, you can add
?type=2 to the URL.
You can also preselect multiple variants at once. For example, if your checkout has “Size” and “Color” variants that you'd like to preselect, you can add
?size=medium&color=blue to the URL.