Hello guys,
How can I set up this amazing price table in my studio?
I really enjoy them because they show all the features and change price depending on monthly or annually.
The one I have in the studio is not that attractive. Only shows the price and the list of tools.
Thanks In advance
Hi there,
It’s definitely possible to build a pricing table like that, though it will require some knowledge of HTML and CSS to structure and style it the way you want. You can create it within the HTML section of your Studio and customize its appearance using your own HTML and CSS styling.
The design you shared looks like our old pricing table, which isn’t used anymore, but you can visit our current pricing page, right-click on any element, and select “Inspect” to see how it’s built and use that as inspiration for creating your own.
Hi Danny,
Thanks for the reply.
I’m not referring to the price itself on the example I sent but to the design. I’ll try to follow your instructions and inspect.
It would be useful to pickaxe develop a pricing table to our studio like that. I have no idea on how to use HTML and CSS and the actual pricing table is ugly and doesn’t help the selling.
Thanks,
Felipe
Hi Felipe,
Yes, I meant the design as well. At the moment, there is no built-in way to change the product listing design in the Studio. To achieve a custom pricing layout, you would use the HTML section with your own HTML and CSS. If you are not comfortable with that, you can hire a Pickaxe Expert at Pickaxe Experts to help you build the product listing section you want, or submit your request to change how the product listing section looks as a feature request.
If you’d like to try it yourself, here is a simple two-card template you can paste directly into the HTML section and customize as you like.
<section class="pricing">
<div class="grid">
<!-- Free Plan -->
<div class="plan">
<div class="header">No credit card required</div>
<img src="https://pickaxe.co/pricing/assets/images/stone-free.png" alt="Free plan" />
<h4>Free</h4>
<p>Build, launch, and sell AI products in no-code.</p>
<h5>$0/month</h5>
<p class="billing">Billed monthly</p>
<button>Start free</button>
<ul>
<li>$5/month free credits</li>
<li>Build your own AI Studio</li>
<li>Create unlimited Pickaxes</li>
<li>Monetize Pickaxes in your Studio</li>
<li>Monitor customer activity</li>
<li>Embed your Pickaxes anywhere</li>
</ul>
</div>
<!-- Gold Plan -->
<div class="plan popular">
<div class="header gold">Popular choice</div>
<img src="https://pickaxe.co/pricing/assets/images/stone-gold.png" alt="Gold plan" />
<h4>Gold</h4>
<p>For solopreneurs and creators to build scalable AI businesses.</p>
<h5>$37/month</h5>
<p class="billing">Billed monthly</p>
<button>Get Gold</button>
<ul>
<li>$15/month free credits</li>
<li>White-labeling</li>
<li>Build up to 3 AI Studios</li>
<li>Connect up to 3 actions per Pickaxe</li>
<li>Include 1 collaborator per Studio</li>
<li>Access to more AI models</li>
</ul>
</div>
</div>
<style>
.pricing { font-family: system-ui, sans-serif; text-align:center; }
/* Two-column grid */
.pricing .grid {
display:grid;
grid-template-columns:1fr;
gap:2rem;
max-width:800px;
margin:2rem auto;
padding:0 1rem;
}
@media(min-width:768px){
.pricing .grid{ grid-template-columns:repeat(2,1fr); }
}
/* Plan card styling */
.pricing .plan {
background:white;
border:1.5px solid #E5E7EB;
border-radius:8px;
box-shadow:0 2px 6px rgba(0,0,0,0.15);
padding:24px;
transition:transform .2s, box-shadow .2s;
}
.pricing .plan:hover {
transform:translateY(-4px);
box-shadow:0 8px 16px rgba(0,0,0,0.15);
}
.pricing .plan img {
max-width:132px;
height:auto;
margin:0 auto 12px;
}
.pricing .plan h4 {
font-size:1.5rem;
margin-bottom:12px;
}
.pricing .plan p {
font-size:0.95rem;
min-height:60px;
color:#333;
}
.pricing .plan h5 {
font-size:1.5rem;
font-weight:700;
margin:12px 0 4px;
}
.pricing .plan button {
width:100%;
border:1px solid #000;
border-radius:8px;
padding:12px 16px;
font-weight:600;
background:radial-gradient(316.85% 218.22% at 36.61% 0%, #FFF0C1 11.09%, #EFB915 83.6%);
cursor:pointer;
}
.pricing .plan ul {
list-style:none;
text-align:left;
margin-top:16px;
padding:0 16px;
font-size:0.9rem;
}
.pricing .plan ul li::before {
content:"âś“";
margin-right:8px;
color:#000;
}
.pricing .plan .header {
font-weight:600;
padding:6px 0;
font-size:14px;
border-radius:4px;
margin-bottom:12px;
background:#FBE9C0;
color:#342832;
}
.pricing .plan .header.gold {
background:#EBA300;
color:#000;
}
</style>
</section>
This is how it will look:
Thank you so much. I’ll try here
Hi Danny,
Thanks so much for the code for the awesome price table for Studio! I was able to duplicate the layout, but now I’m curious about what code to use for the buttons so that they add correctly to the checkout room and then connect to Stripe. Can you help me with this?
Thanks so much!
Sky
Hi @skyinwv ,
You can make the buttons in the code I sent to redirect to your Studio’s pricing page. In the snippet you copied, the only part you need to change is the button element itself. For example, replace:
<button>Get Gold</button>
with:
<a href="YOUR_STUDIO_URL/pricing" class="btn-link">
<button>Get Gold</button>
</a>
Important note: the HTML/CSS snippet only changes the layout and styling of what visitors see. It does not create products, connect to Stripe, or add items to checkout by itself. To make checkout work, you will want to create the corresponding products in your Studio under the Access tab (same name and price as what you show in the custom cards). Those products are what will appear on your Studio’s pricing page, and that is what will handle the Stripe-connected checkout flow.