---
title: "How To Add Pricing Table to Carrd.co"
description: "Add a responsive pricing table with monthly/yearly toggle to your Carrd site. Covers paid and free plugin options with step-by-step setup."
date: 2026-07-13
categories: ["web-development"]
tags: ["carrd"]
---

import Button from "../../components/widgets/Button.astro";
import YouTubeEmbed from "../../components/widgets/YouTubeEmbed.astro";

Carrd doesn't include a pricing table element out of the box. If you want to display subscription plans with a monthly/yearly toggle, you need to embed custom code or use a third-party widget.

This tutorial covers the CarrdMe pricing table plugin ($5), which gives you a responsive three-column pricing table with a billing cycle toggle. I'll also mention two free alternatives at the end if you want to compare options.

You'll need a **Pro Standard plan** ($19/year) or higher. That's the lowest Carrd plan that supports the Embed element for custom code.

## What is Carrd.co?

[Carrd.co](https://try.carrd.co/bitdoze) is a platform for building single-page, responsive websites. It's popular for personal profiles, landing pages, and simple business sites because of its low cost and ease of use. Plans start free; the Pro Standard plan at $19/year unlocks custom domains, forms, and code embeds.

**More Carrd tutorials:**

- [Add a sticky header to Carrd](https://www.bitdoze.com/add-stickey-header-carrd/)
- [Add Carrd cookie notice](https://www.bitdoze.com/add-cookie-notice-carrd/)
- [Carrd.co review](https://www.bitdoze.com/carrd-review/)
- [How to add accordion FAQs to Carrd.co](https://www.bitdoze.com/add-accordion-carrd/)
- [How to add a custom domain to Carrd.co](https://www.bitdoze.com/carrd-add-domain/)
- [Carrd.co mobile responsive navbar](https://www.bitdoze.com/carrd-mobile-navbar/)
- [Back to top button on Carrd](https://www.bitdoze.com/carrd-back-to-top-button/)

> The complete list of Carrd plugins, themes, and tutorials is on [carrdme.com](https://carrdme.com/).

## How to add the pricing table to Carrd

<YouTubeEmbed
  url="https://www.youtube.com/embed/Q3UpuDDs0AY"
  label="How To Add Pricing Table to Carrd.co"
/>

<Button link="https://carrdme.com/" text="Carrd Plugins and Themes" />

### 1. Download the pricing table code

Go to [CarrdMe pricing table](https://carrdme.com/) and download the plugin. It costs $5 and includes a single HTML/CSS/JS code block. You can use it on unlimited Carrd sites.

### 2. Customize colors

The code uses CSS custom properties for the main accent color. Look for this block near the top of the `<style>` section:

```css
:root {
  --priceb-col-gr: linear-gradient(
    135deg,
    rgba(163, 168, 240, 1) 0%,
    rgba(105, 111, 221, 1) 100%
  );
}
```

This gradient applies to the buttons, the active toggle state, and the featured card highlight. Replace the color values to match your brand. You can use a tool like [CSS Gradient](https://cssgradient.io/) to generate a new gradient.

### 3. Customize the font

The default font inherits from the page. To use a specific font, change this line in the `<style>` section:

```css
font-family: inherit;
```

Replace `inherit` with your preferred font stack, e.g. `'Inter', sans-serif`.

### 4. Edit plan names and prices

You need to update two places: the HTML display and the JavaScript toggle logic.

**HTML, the visible price values:**

```html
<li id="basic" class="price bottom-bar">&dollar;19.99</li>
```

This shows the default (monthly) price. The JavaScript below swaps these values when the visitor toggles between monthly and yearly.

**JavaScript, the price data object:**

```js
const prices = {
  basic: { monthly: "$19.99", annual: "$199.99" },
  professional: { monthly: "$24.99", annual: "$249.99" },
  master: { monthly: "$39.99", annual: "$399.99" },
};
```

Change the plan names (if you rename them) and set your actual prices. The keys (`basic`, `professional`, `master`) must match the `id` attributes on the corresponding `<li>` elements in the HTML.

### 5. Edit feature lists

Each plan card has a list of features. Replace the `<li>` items with your own:

```html
<li class="bottom-bar">1 TB Storage</li>
<li class="bottom-bar">5 Users Allowed</li>
<li class="bottom-bar">Send up to 10 GB</li>
<li class="bottom-bar">Unlimited</li>
```

Add or remove items as needed. The `bottom-bar` class adds a border between rows, so keep it on each item for consistent styling.

### 6. Update the call-to-action buttons

Each card has a button linking to your checkout or signup page. Replace the URL and label text:

```html
<li>
  <a href="https://your-checkout-url.com"><div class="btn">Get Started</div></a>
</li>
```

### 7. Add the embed to Carrd

In the Carrd editor:

1. Add a **Container** element in the section where you want the pricing table.
2. Inside that container, add an **Embed** element.
3. Set **Type** to **Code**.
4. Paste the full code (HTML, CSS, and JavaScript) into the Code field.
5. Set the container alignment and spacing as needed.

### 8. Publish and test

Save your Carrd site and publish. The pricing table only renders on the live site. Carrd's editor doesn't execute embedded JavaScript.

Check these things:

- Does the monthly/yearly toggle switch prices correctly?
- Do all three columns display at the right width?
- On mobile, does the table stack vertically and remain readable?
- Do the buttons link to the right URLs?

<Button link="https://try.carrd.co/bitdoze" text="Carrd.co" />

## Troubleshooting

**Pricing table doesn't appear:** Make sure you're on Pro Standard or higher. The free and Pro Lite plans don't support the Embed element. Also confirm the Embed's Style is set to Hidden. If it's set to something else, the container might block the table from rendering.

**Toggle doesn't switch prices:** Check that the JavaScript object keys (`basic`, `professional`, `master`) exactly match the `id` attributes on the HTML `<li>` elements. A typo in either place will break the toggle.

**Table looks broken on mobile:** The default code is responsive, but if your Carrd container is too narrow, the columns may overlap. Try widening the container or adding a media query override for smaller screens.

**Colors don't update:** Make sure you're editing the CSS variables in `:root`, not somewhere else in the style block. Browser DevTools (F12) can help you verify which styles are actually being applied.

## Free alternatives

If the $5 CarrdMe plugin isn't what you need, there are two free options:

**Jason's Plugins for Carrd:** [plugins.carrd.co](https://plugins.carrd.co/) offers a free pricing table with hover effects. Download it as a template, open it in Carrd, and copy the Embed element's code into your own site. Requires Pro Standard.

**Common Ninja:** [commoninja.com/widgets/pricing-tables/carrd](https://www.commoninja.com/widgets/pricing-tables/carrd) gives you a visual editor to build a pricing table, then generates an embed code you paste into Carrd. The free tier includes Common Ninja branding; paid plans start at a few dollars per month to remove it. This option works well if you want a drag-and-drop editor instead of editing code.

The CarrdMe plugin used in this tutorial is a good middle ground: it's cheap ($5, one-time), has no branding, gives you full code access, and the monthly/yearly toggle is built in.

<Button link="https://carrdme.com/" text="Carrd Plugins and Themes" />