If there’s one page in the user’s conversion flow that I consider crucial to have a well-defined design, where the user can clearly understand what they’re actually getting, it’s the plans and pricing page.

This is the page where the user has likely already learned a bit more about your product, and now they want to clearly understand what they’re actually purchasing.

It’s the moment when the user needs to grasp what’s included and what’s not. This is the moment when the user will pull out their wallet and click that coveted “pick plan” button. Undoubtedly, in the conversion flow, it’s the most important page—who doesn’t love receiving that notification that a new sale has been made?

A few days ago, I was creating the sales page for Planu, and I have to admit that Voxel’s pricing table component is a bit limited in this regard. But I wasn’t too worried—everything can be worked out. Still, I anticipated needing to ask ChatGPT for help with modifying the HTML of the pricing table to achieve the visual aspect I wanted.

That’s when it hit me: I thought it might be easier than I initially imagined—and it actually was.

As I noticed this question had been asked in the Voxel Facebook group, where people are truly collaborative and make you feel part of a real community, I thought: I need to address this topic and share this conclusion with the other members.

Here’s what I concluded:

Step 01: Create a container and insert two containers into it. In the second internal container, you can insert three containers (one for each plan you have, which is three in my case).

Step 2: In the middle column, I added a title ‘Starter Plan.’ Below the title, I inserted a new container and set both the column and row gaps to 0, so all the elements within the container are closely aligned with each other.”

Step 3: I inserted two icon list widgets. For the first icon list, I set the typography to ‘Line Through’ for items not included in the plan. I added a divider after the first list widget to visually separate it from the second list, and below, I inserted a section for configuring the included items.

Step 4: In the final step, you need to add the pricing element from Voxel.

Now the sky’s the limit; you can customize it however you prefer.