Customize your one-page checkout: Introducing grid layouts for product variants

Customize your one-page checkout: Introducing grid layouts for product variants

by Andy NelsonPublished on Apr 27, 2023
Customize your one-page checkout: Introducing grid layouts for product variants

Today, we're proud to introduce a new way for you to personalize the layout of your product variants on your one-page checkout page.

You're already aware of the benefits of one-page checkouts: customers can complete their purchases quickly and efficiently, without unnecessary clicks or waiting for pages to load. This streamlined process saves time, boosts customer satisfaction, and reduces cart abandonment rates.

In the past, product variants on your checkout page were displayed in a vertical list format. While it worked well for a few options, we understand that it could become overwhelming and space-consuming with a more extensive selection.

That's why we're thrilled to introduce our new feature that enables you to display product variants in a grid layout! Now you can choose the number of columns you prefer, making the checkout experience more visually appealing and easy to navigate for your customers. Get ready to enjoy an improved and customizable checkout experience with this grid layout upgrade!

Key takeaways

  • Flexible layout options: Choose between list and grid layouts for your product variants, allowing you to tailor the presentation to your unique needs and preferences.
  • Customizable variant elements: With just a few clicks, easily show or hide elements in your product variants, unlocking new use cases and giving you greater control over your checkout experience.
  • Enhanced design and UX: We've implemented a series of design and user experience improvements to simplify the process of creating product variants.

The power of grid layouts for product variants

Now you have the option to select our new grid layout for your product variants. This fresh feature empowers you to tailor your checkout to specific use cases, such as displaying color and size grids, presenting suggested donation amounts, or showcasing different ticket type pricing, and many others.

By combining the grid layout with the ability to hide elements like variant names, option names, prices, or price signs (+), you can completely revamp the way you showcase product variants on your checkout page. In turn, this greatly enhances your customers' checkout experience, making it more visually appealing and user-friendly.

How to display your variant as a grid

  1. Open your Checkout Page dashboard and click on your checkout
  2. Navigate to Variants
  3. Edit your variant
  4. Open Layout
  5. Choose Display as Grid
  6. Choose the number of columns that best suits your needs

Additional layout options

  • Collapse variant: Ideal for conserving space on your checkout page.
  • Show/Hide variant name: Perfect when your variant is self-explanatory, described in the product description text, or when you want to save space.
  • Show/Hide option name: Remove repetitive option names and direct your customers' focus on the price.
  • Show/Hide option price: Control the visibility of option prices based on your needs.
  • Show/Hide price sign (+): Conceal the "+" in front of option prices, ideal for use cases like "Suggested Donations" or "Ticket Prices."

Let’s explore the amazing possibilities that our new grid product variant layouts offer to turbocharge your one-page checkout experience today!

Sell T-shirt color and sizes

image-4e0fae.png

Presenting both color and size variants in a grid format enhances selection ease and accelerates your customers' checkout experience.

Open checkout example

Sell event tickets online

image-bf6460.png

Showcasing ticket types in a grid layout reduces clicks and simplifies ticket type comparison for customers.

Open checkout example

Training course dates

image-e0c3a5.png

Presenting event dates and attendance options in a grid format allows course attendees to easily identify different start dates and select their preferred option without any extra clicks.

Open checkout example

Donations form

image-5ce797.png

Displaying suggested donation amounts in a grid with center-aligned text and hidden option price signs (+) makes it easy for your customers to select a donation amount.

Open checkout example

Sell digital products variations

image-99b99a.png

Showcasing digital product details in a grid format makes the selection more appealing and engaging for your customers to choose from.

Open checkout example

Improvements to vertical list layout for product variants in one-page checkouts

We've made some notable improvements to the existing vertical list format for product variants on your one-page checkout.

By default, all new variants will now be displayed as lists in your checkout, streamlining the process of creating new products.

For variants with just a few options, where space isn't a concern, displaying your variants as lists can simplify the selection process for your customers. This approach reduces clicks and ensures that all available options are always visible.

If you find that a variant takes up too much space or you have multiple variants, we recommend selecting the Collapse variant option under the new Layout variant settings. This feature hides your variant options behind a dropdown, keeping your checkout page neat and organized.

These enhancements to the vertical list format aim to provide you with even more flexibility and control over your product variants in one-page checkouts, optimizing the overall user experience

How to collapse your list or grid variant

  1. Open your Checkout Page dashboard and click on your checkout
  2. Navigate to Variants
  3. Edit your variant
  4. Open Layout
  5. Check Collapse variant

Sell products or services that require configuration

image-eba013.png

Presenting each variant as an expanded list simplifies the process of selecting the desired configuration across multiple product variants for your customers. This approach is best suited for situations where space is not a concern or when using multi-step checkouts.

Open checkout example

Thank you for taking the time to read about our latest update to Checkout Page's one-page checkout.

We encourage you to try out the new grid layouts and explore the amazing possibilities they offer to supercharge your one-page checkout experience today.

Thank you for choosing Checkout Page and happy selling!

Ready to start selling digital products, subscriptions and event tickets?
Start your free Checkout Page trial—no credit card required.

Share this article

Andy Nelson

Andy Nelson

Andy is co-founder of Checkout Page and has over 20 years of experience in the web industry. He has a passion for building great products, making online commerce more accessible and guiding people to grow their business.


Try Checkout Page
for free

No credit card required