This guide is designed as an overview and introduction to adding product variants.

Unlock extra functionality for your one page checkout by adding product variations (like colors and sizes), creating pricing tiers, variant layouts and offering different quantities.

Product variations like colors and sizes

One of the most popular variant use cases is for adding product variations like colors and sizes. 

Product variations allow your customers to choose the most suitable product for their needs and preferences.

It can give businesses a competitive advantage and help them attract a wider range of customers.

Collapse variant options

If you offer multiple variant options, it is easy to collapse them as a dropdown to save space. 

There is no limit to the number of variants you can add to your checkout.

You can drag and drop your variants to arrange the order of them in your checkout.

---

Add prices to variants

By adding prices to variant options, your business can cater to a wider range of customer needs and budgets.

You can also implement more effective pricing strategies or differentiate your product tiers, like Standard and Premium.

Prices on variants are currently only available for One-time, Pay what you want and Lead capture checkout. Though this will be available for subscription and payment plan checkouts soon! 

Increase or reduce variant pricing

You can choose to increase or reduce the price for every variant. 

Simply enter the variant price with either “+” or “-” before the number.

Hide “+” from variant pricing

You can choose to hide the “+” sign from your variant price. Untick Option price sign (+) in the Layout settings.

Additionally, it is possible to hide other variant information, like Variant name, Option names, and Option prices. 

Multiply price with quantity

You can add a quantity selector (Add a custom field using the Fields tab) to your one page checkout and tick Multiply price with quantity to allow customers to choose the number of tickets they need.

Remove base pricing

For now, if you don’t want your one page checkout to have a base price, use a Lead capture checkout and add variants with prices.

We plan to improve this later so that you would not need to use a Lead Capture checkout to achieve this. 

Learn more about lead capture checkouts here

---

Manage stock and SKU

You can add stock levels to each variant option. Tick Manage stock in your variant settings.

When the stock level reaches 0 or is set to 0, the option will be Sold out.

You can also add an SKU – stock-keeping unit. 

SKU numbers should be unique to each variant option and allow you to keep track of each item in inventory.

Tick Set SKU in your variant settings.

---

Variant layout

List

By default, your product variants will be displayed as a list.

Grid

You can display your product variants as a grid by clicking on Layout and selecting Grid.

You can choose the number of columns that best suits your design.

Text alignment

By default, your variant text is aligned to the left. 

You can center-align the text within your variant in the Layout section.

---

Examples

Here are some ideas for product variants.

Donation form

This form has been set up in the following way:

• Lead capture checkout
• 3 variant options with different pricing tiers
• Variant marked as Required
• Displayed as a Grid (3 columns)
• Showing Variant name and Option prices
• Text aligned to Center

Event tickets

This variant has been set up in the following way:

• Lead capture checkout
• 2 variant options with different pricing tiers
• Added a Quantity selector and ticked Multiply price with quantity
• Variant marked as Required
• Displayed as a Grid (2 columns)
• Showing Variant name, Option name and Option prices
• Hiding Option price sign (+)
• Text aligned to Default

Event tickets with variable prices per ticket amount

This form has been set up in the following way:

• Lead capture checkout
• 4 variant options with different pricing tiers
• Variant marked as Required
• Displayed as a Grid (4 columns)
• Showing Variant name, Option names and Option prices
• Hiding Option price sign (+)
• Text aligned to Default