Prefill checkout fields & preselect variants

Prefill checkout fields & preselect variants

by Sander VisserOct 19, 2022
Prefill checkout fields & preselect variants

Today we’re announcing an exciting new feature that will speed up your customer's checkout process and increase checkout conversions.

You can now prefill checkout fields!

If you've already collected your customer's information, such as their name, email address, shipping address, or any other information, you can now prefill this information to speed up your customer’s checkout experience and boost your sales.

Not stopping there, we’ve also made it possible to preselect variants in your checkout.

This powerful feature lets you preselect a product tier or product upsell so that when your customer arrives at your checkout, their choices are all ready to go.

To make this even more awesome, we've added a way to hide fields in your checkout!

Combining prefilling fields and hiding fields means that you can pass useful information to your checkout that your customer cannot see and include this in their order. Think of names and emails, but also order numbers, ID codes, or tracking numbers.

So how does all this work? Let's dive in

How to prefill checkout fields

Prefill checkout fields example

Prefilling fields is as easy as adding the data to the checkout's URL or to the URL of your site that contains your embedded checkout or popup.

For example, if you want to prefill the email field with miranda@gmail.com, you can add ?customer_email=miranda@gmail.com to the URL.

You can also prefill multiple fields at once. For example, if you want to prefill the email field with miranda@gmail.com and the name field with Miranda, you can add ?customer_email=miranda@gmail.com&customer_name=Miranda to the URL.

Prefilling fields works based on the field reference. You can find a field's reference by toggling 'Additional field settings' in the field's settings.

Checkout Page automatically creates references for your fields based on your the field data type or the label.

Prefill fields reference

For more detailed steps on how to prefill fields, check out prefill checkout fields in the help center.

Hide prefilled fields from your checkout

If you already have a customer's information and prefill the field with the above steps, you can hide the field entirely to make the checkout process even faster.

For example, you already have your customer's name and email address, but you still want to store them with the order. You can prefill the fields and hide them from your checkout so that your customer doesn't have to enter this information again.

To hide a field, toggle 'Additional field settings' in the field's settings and toggle the 'Hide field' checkbox.

Prefill fields hide field

If a field is hidden and required but not prefilled, the field will be displayed to your customers. If a field is hidden but not required and not prefilled, the field will not be displayed to your customers.

Preselect variants to upsell or select a product option

Preselect variants example

Preselecting variants works similar to prefilling fields. To preselect a variant, you add the variant reference and variant SKU to the URL.

For example, if you want to preselect the variant with the SKU full of a variant with the reference choose-your-kit, you can add ?choose-your-kit=full to the URL.

You can also preselect multiple variants at once. For example, if you want to preselect the "Size" and "Color" variants, you can add ?size=medium&color=blue to the URL.

To preselect a variant, you add the variant reference and variant SKU to the URL. You can find the variant reference by toggling 'Additional variant settings' in the variant settings.

Preselect variants reference and sku

For more detailed steps on how to preselect variants, check out preselect variants in the help center.

That’s it for another update. We're launching a number of improvements and features over the coming weeks, so stay tuned!

In the meantime, we’d absolutely love it if you could send us a quick email telling us what you love, what we could do better, and what would make your business easier.

Thanks for your support!

Team Checkout Page

Ready to start selling? Start your free Checkout Page trial—no credit card required.

Share this article

Sander Visser

Sander Visser

Sander is co-founder of Checkout Page and has over 10 years of software engineering experience. He is fascinated by technology and helping people reclaim their freedom by making a living online.


Try Checkout Page
for free

No credit card required

Start selling in minutes with our no-code checkout page builder.

Create branded, custom checkout pages and increase revenue with one-click upsells and order bumps.

Whether on your website or in your sales funnel, our simple checkout process boosts sales.

Use cases

2024 © Checkout Page LLC. All rights reserved.

8 The Green, Ste R, Dover, DE 19901