Communik.io : Site & App builder
communik.io
Sections · Pricing

Pricing with Monthly/Yearly Toggle

A pricing table with a monthly/annual switch and a discount badge — the standard pattern for subscription businesses.

Use this block Add to an existing project

Free to start. No credit card.

Screenshot of Pricing with Toggle template

What this block contains

Pricing with Toggle is a section from the Pricing category made of 3 headings, 3 text paragraphs, 3 buttons, 6 icons and 2 links. On desktop its content is laid out in 2 columns, stacked on mobile. It includes a toggle switch. Its copy ships in 3 languages (German, Spanish and French).

  • 3 headings
  • 3 text paragraphs
  • 3 buttons
  • 6 icons
  • 2 links
  • 2-column grid
  • a toggle switch

Details

Category
Pricing
Type
Section (full width)
Editing
Visual editor, no code
Keywords
togglemonthlyyearlydiscountinteractive

Use it in three steps

  1. 1 Open your siteCreate a free Communik site, or open one you already have.
  2. 2 Insert itIt lands on your page with your fonts and brand colors applied.
  3. 3 Make it yoursEdit text, images and colors visually, then publish when ready.

More in Pricing

See all Pricing

Guide

If you sell subscriptions, the monthly/yearly toggle is practically mandatory: it lets price-sensitive visitors see the discounted annual rate while keeping the low-commitment monthly option one tap away. The discount badge (“2 months free”, “-20%”) does the persuasion for you.

The toggle is interactive out of the box and each state has its own editable prices. Adjust plans, features and buttons visually in the Communik builder.

Pair it with a FAQ section to answer billing questions on the spot, or browse the other pricing layouts.

Questions

Does the toggle work without custom code?

Yes. The monthly/annual switch is functional as delivered; you only edit the two sets of prices in the editor.

What discount should I show on annual plans?

Two months free (≈17%) is the most common and reads instantly. Larger discounts work if your churn is low and cash flow matters.

Can I default to annual pricing?

Yes — choose which state is active on load; showing annual first anchors the lower monthly-equivalent price.

Keep exploring

About Sections Browse about sections templates Blog Sections Browse blog sections templates Call to action Sections Browse call to action sections templates Blog Module Complete blog feature with multiple design variants About Page Templates Full page layouts in the about category Templates for Portfolio Templates designed for portfolio businesses Calendly Templates Templates with Calendly integration support

Your next site starts here.
Everything here is one click away.

Every section, component, page and module in this library is ready inside the Communik editor, styled with your brand.

Use this block Browse the library

Free to start. No credit card.