Website kits
Mobile app pricing page
App pricing page with its own top bar, Free and Premium plans with monthly and yearly prices, a feature comparison, a family plan band and billing FAQ.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The page for visitors who already like the idea and now want to know what it costs and how hard it is to stop paying. It keeps the landing page’s slim top bar, so nobody drifts into a blog or careers page halfway through the decision. Two plan cards come first with the monthly price large and the yearly price and its monthly equivalent directly underneath, because app subscribers compare those two numbers before anything else. The comparison lists the same eight features in the same order for Free and Premium, so the difference reads at a glance on a phone. The family plan gets its own band because it has a different buyer: the person paying for a whole household. Billing questions close the page, written around how store subscriptions really work — trials, canceling in phone settings, refunds through Apple or Google. Copy the prices exactly from App Store Connect and the Google Play Console; a page that disagrees with the store sheet invites refund requests.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 24
- Container (grid, 2 columns) × 2
- Container (grid) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 19
- Button × 6
- Heading × 9
- Icon List × 5
- Image × 1
- Accordion × 1
Things worth knowing
- The comparison is built from Icon Lists, not a table: two Icon List widgets with eight rows each, using check and times icons, so every row stays editable in the panel and no HTML widget is needed.
- Each Icon List has a single icon and text color, so the unavailable rows in the Free column arrive in the same green and dark text as the included ones; restyle them per item in Elementor if you want them dimmed.
- The plan cards, the family band and the closing band produce Heading, Text Editor, Icon List and Button widgets; the price and its “/ month” suffix stay together in one Text Editor. The six billing questions become one Accordion widget.
- Set the page to Elementor Canvas so only the built-in top bar and legal row show. Below 780px the plan cards, comparison columns and family band stack to one column, with the family photo above its text.
The HTML
This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.
Show the HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simmerly pricing — Free, Premium and Family</title>
<style>
body{margin:0;font-family:'Nunito Sans',Helvetica,Arial,sans-serif;color:#2a1736;background:#ffffff}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
section{padding:80px 0}
h1,h2,h3{font-family:'Outfit',Helvetica,Arial,sans-serif;color:#2a1736;font-weight:700}
h1{font-size:56px;line-height:1.06;letter-spacing:-.03em;margin:0 0 18px}
h2{font-size:40px;line-height:1.12;letter-spacing:-.02em;margin:0 0 14px}
h3{font-size:24px;line-height:1.3;margin:0 0 6px}
p{font-size:17px;line-height:1.7;color:#6d5f75;margin:0 0 18px}
.eyebrow{font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#2e8b57;margin:0 0 14px}
.top{background:#fff3d6}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;padding-bottom:18px}
.logo{margin:0;font-family:'Outfit',Helvetica,Arial,sans-serif;font-size:26px;font-weight:700;letter-spacing:-.02em;color:#2a1736}
.logo a{color:#2a1736;text-decoration:none}
.get{display:inline-block;padding:11px 20px;border-radius:12px;background:#ff6b35;color:#2a1736;text-decoration:none;font-weight:800;font-size:15px}
.intro{background:#fff3d6;padding:56px 0 64px;text-align:center}
.intro .lead{max-width:640px;margin:0 auto;font-size:19px}
.plans-sec{padding:64px 0 80px}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:940px;margin:0 auto}
.plan{border:2px solid #fff3d6;border-radius:28px;padding:36px;background:#ffffff}
.plan.dark{background:#2a1736;border-color:#2a1736}
.plan.dark h3,.plan.dark .price{color:#ffffff}
.plan.dark p{color:#fff3d6}
.plan.dark .ticks > div{color:#ffffff}
.plan.dark .tk{color:#ff6b35}
.who{font-size:15px;margin:0 0 20px}
.price{font-family:'Outfit',Helvetica,Arial,sans-serif;font-size:48px;font-weight:700;line-height:1;color:#2a1736;margin:0 0 10px}
.price span{font-size:17px;font-weight:600}
.yearly{font-size:15px;font-weight:700;color:#2e8b57;margin:0 0 22px}
.plan.dark .yearly{color:#ff6b35}
.ticks{display:flex;flex-direction:column;gap:12px;margin:0 0 28px}
.ticks > div{display:flex;gap:12px;align-items:center;font-size:16px;color:#2a1736}
.tk{color:#2e8b57;font-size:16px;font-weight:800}
.buy{display:inline-block;padding:15px 26px;border-radius:14px;background:#2a1736;color:#ffffff;text-decoration:none;font-weight:800;font-size:15px}
.buy-hot{display:inline-block;padding:15px 26px;border-radius:14px;background:#ff6b35;color:#2a1736;text-decoration:none;font-weight:800;font-size:15px}
.note{max-width:940px;margin:24px auto 0;text-align:center;font-size:15px}
.butter{background:#fff3d6}
.head{max-width:660px;margin:0 auto 40px;text-align:center}
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:940px;margin:0 auto}
.col{background:#ffffff;border-radius:24px;padding:32px}
.col h3{font-size:21px;margin:0 0 18px}
.col .ticks{margin:0}
.no{color:#6d5f75;font-size:16px;font-weight:800}
.off{color:#6d5f75}
.family{background:#2a1736}
.family .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.family h2{color:#ffffff}
.family p{color:#fff3d6}
.family .price{color:#ffffff}
.family .ticks > div{color:#ffffff}
.family .tk{color:#ff6b35}
.family-img{width:100%;height:440px;object-fit:cover;border-radius:32px;display:block;background:#fff3d6}
.faq{display:flex;flex-direction:column;gap:12px;max-width:820px;margin:0 auto}
details{background:#fff3d6;border-radius:18px;padding:20px 24px}
summary{font-family:'Outfit',Helvetica,Arial,sans-serif;font-size:19px;font-weight:600;color:#2a1736;cursor:pointer}
details p{margin:12px 0 0;font-size:16px}
.cta{background:#fff3d6;text-align:center}
.cta p{max-width:560px;margin:0 auto 26px}
.stores{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.store{display:inline-block;padding:16px 24px;border-radius:14px;background:#2a1736;color:#ffffff;text-decoration:none;font-weight:800;font-size:16px}
.store-alt{display:inline-block;padding:14px 22px;border-radius:14px;border:2px solid #2a1736;color:#2a1736;text-decoration:none;font-weight:800;font-size:16px}
.legal{background:#2a1736;padding:24px 0}
.legal .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.legal p{margin:0;font-size:14px;color:#fff3d6}
.legal a{color:#fff3d6}
@media(max-width:780px){
section{padding:56px 0}
.wrap{padding:0 16px}
.top .wrap{padding-top:14px;padding-bottom:14px}
.logo{font-size:22px}
.get{padding:9px 16px;font-size:14px}
.intro{padding:36px 0 44px}
.plans-sec{padding:44px 0 56px}
.plans,.compare,.family .wrap{grid-template-columns:minmax(0,1fr);gap:24px}
h1{font-size:38px}
h2{font-size:30px}
.intro .lead{font-size:17px}
.plan,.col{padding:28px 22px}
.price{font-size:42px}
.family-img{height:280px}
.legal .wrap{flex-direction:column;gap:6px}
}
</style>
</head>
<body>
<header class="top">
<div class="wrap">
<p class="logo"><a href="/">Simmerly</a></p>
<a class="get" href="#download">Get the app</a>
</div>
</header>
<section class="intro">
<div class="wrap">
<p class="eyebrow">Pricing</p>
<h1>Free for planning, Premium for busy weeks</h1>
<p class="lead">The free plan has no time limit. Premium and Family are subscriptions billed through the App Store or Google Play, so you manage and cancel them from your phone’s settings.</p>
</div>
</section>
<section class="plans-sec">
<div class="wrap">
<div class="plans">
<div class="plan">
<h3>Free</h3>
<p class="who">For one person or one household planning dinners.</p>
<p class="price">$0</p>
<p class="yearly">Free forever, no card needed</p>
<div class="ticks">
<div><span class="tk">✓</span><span>Seven-day dinner plan</span></div>
<div><span class="tk">✓</span><span>Grocery list sorted by aisle</span></div>
<div><span class="tk">✓</span><span>Cook mode with timers</span></div>
<div><span class="tk">✓</span><span>Twelve diet and allergy filters</span></div>
</div>
<a class="buy" href="#download">Download free</a>
</div>
<div class="plan dark">
<h3>Premium</h3>
<p class="who">For households that want less waste and a shared list.</p>
<p class="price">$4.99<span> / month</span></p>
<p class="yearly">or $39.99 a year — about $3.33 a month</p>
<div class="ticks">
<div><span class="tk">✓</span><span>Everything in Free</span></div>
<div><span class="tk">✓</span><span>Pantry tracking and use-it-up plans</span></div>
<div><span class="tk">✓</span><span>Shared list for two people</span></div>
<div><span class="tk">✓</span><span>Nutrition breakdown per meal</span></div>
</div>
<a class="buy-hot" href="#download">Try Premium free for 14 days</a>
</div>
</div>
<p class="note">Prices in US dollars. The App Store and Google Play show the price in your local currency, including any sales tax, before you confirm.</p>
</div>
</section>
<section class="butter">
<div class="wrap">
<div class="head">
<p class="eyebrow">Compare</p>
<h2>What changes when you upgrade</h2>
<p>The same eight features in the same order, so you can read across.</p>
</div>
<div class="compare">
<div class="col">
<h3>Free</h3>
<div class="ticks">
<div><span class="tk">✓</span><span>Weekly dinner plan</span></div>
<div><span class="tk">✓</span><span>Grocery list by aisle</span></div>
<div><span class="tk">✓</span><span>Cook mode and timers</span></div>
<div><span class="tk">✓</span><span>Diet and allergy filters</span></div>
<div><span class="no">✕</span><span class="off">Pantry tracking</span></div>
<div><span class="no">✕</span><span class="off">Shared household list</span></div>
<div><span class="no">✕</span><span class="off">Nutrition per meal</span></div>
<div><span class="no">✕</span><span class="off">Lunch and breakfast planning</span></div>
</div>
</div>
<div class="col">
<h3>Premium</h3>
<div class="ticks">
<div><span class="tk">✓</span><span>Weekly dinner plan</span></div>
<div><span class="tk">✓</span><span>Grocery list by aisle</span></div>
<div><span class="tk">✓</span><span>Cook mode and timers</span></div>
<div><span class="tk">✓</span><span>Diet and allergy filters</span></div>
<div><span class="tk">✓</span><span>Pantry tracking</span></div>
<div><span class="tk">✓</span><span>Shared household list</span></div>
<div><span class="tk">✓</span><span>Nutrition per meal</span></div>
<div><span class="tk">✓</span><span>Lunch and breakfast planning</span></div>
</div>
</div>
</div>
</div>
</section>
<section class="family">
<div class="wrap">
<img class="family-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/app/family-table.jpg" width="1600" height="1000" alt="Family of four sharing dinner around a wooden kitchen table in warm evening light">
<div>
<p class="eyebrow">Family plan</p>
<h2>One subscription for up to six people</h2>
<p class="price">$6.99<span> / month</span></p>
<p>Or $59.99 a year. Everyone gets Premium on their own phone, with one shared plan and list for the household.</p>
<div class="ticks">
<div><span class="tk">✓</span><span>Up to six members, each with their own login</span></div>
<div><span class="tk">✓</span><span>Separate diet filters for each person</span></div>
<div><span class="tk">✓</span><span>One organizer manages billing</span></div>
</div>
<a class="buy-hot" href="#download">Start the family plan</a>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="head">
<p class="eyebrow">Billing questions</p>
<h2>Subscriptions, trials and canceling</h2>
</div>
<div class="faq">
<details><summary>How does the 14-day free trial work?</summary><p>Start it from the Premium screen in the app. You are not charged during the trial, and the store reminds you before it ends. Cancel before day 14 and you pay nothing.</p></details>
<details><summary>How do I cancel?</summary><p>On iPhone, open Settings, tap your name, then Subscriptions. On Android, open Google Play, tap your profile, then Payments and subscriptions. Premium stays active until the end of the period you paid for.</p></details>
<details><summary>Can I get a refund?</summary><p>Purchases are made through Apple or Google, so refunds are requested from them under their policies. Write to us if something went wrong and we will help with the request.</p></details>
<details><summary>Can I switch between monthly and yearly?</summary><p>Yes, from the same subscription settings. The change takes effect at your next renewal date, so you never pay twice for the same days.</p></details>
<details><summary>What happens to my plans if I go back to Free?</summary><p>Your recipes, plans and lists stay. Pantry tracking and sharing pause until you upgrade again, and nothing is deleted.</p></details>
<details><summary>Who pays on the family plan?</summary><p>The organizer who starts the plan pays for everyone. Members join by invitation and can leave at any time; their own saved recipes go with them.</p></details>
</div>
</div>
</section>
<section class="cta" id="download">
<div class="wrap">
<h2>Start free on your phone</h2>
<p>Plan your first week on the free plan and decide about Premium once you have used it.</p>
<div class="stores">
<a class="store" href="#download">Download on iPhone</a>
<a class="store-alt" href="#download">Get it on Android</a>
</div>
</div>
</section>
<footer class="legal">
<div class="wrap">
<p>© 2026 Simmerly Labs, Inc. · 48 Quillon Lane, Brookhaven</p>
<p><a href="/privacy/">Privacy policy</a> · <a href="/terms/">Terms of use</a> · <a href="mailto:[email protected]">[email protected]</a></p>
</div>
</footer>
</body>
</html>
