Hoe maak je een responsieve Squarespace prijstabel zonder aangepaste CSS

Een prijstabel maakt het voor je klanten gemakkelijk om te zien wat ze voor hun geld krijgen. Dat is belangrijk, of je nu SaaS-abonnementen, bureaupackages, lidmaatschappen of abonnementen verkoopt. Sterker nog, in een onderzoek van Zuora en Harris Poll uit 2024 gaf 80 procent van de Amerikaanse volwassenen aan dat flexibiliteit in hoe ze terugkerende producten kopen en betalen “belangrijk”, “zeer belangrijk” of “absoluut essentieel” is.

Squarespace bevat echter geen standaardblok voor een conventionele tabel met rijen en kolommen. Je kunt er zelf een maken met tekst, knoppen en Fluid Engine, maar dan moet je dit apart doen voor desktop- en mobiele lay-outs. 

Of, als het handmatig op hun plek schuiven van drie prijskaarten op twee verschillende schermformaten niet is hoe je je middag wilt besteden, laat me je een minder pijnlijke manier tonen.

Optie 1: Een tabel maken met de standaard lay-outblokken van Squarespace

Squarespace heeft al een Pricing Plan-blok, dus afhankelijk van wat je verkoopt, hoef je misschien geen tarieventabel helemaal zelf op te bouwen. Het blok werkt met prijsplannen voor lidmaatschappen en afgeschermde content, waaronder Member Sites, cursussen, video’s en blogs achter een betaalmuur. 

Je kunt gratis, eenmalige, termijn- of doorlopende toegang aanbieden en meerdere planblokken naast elkaar plaatsen om abonnementen te vergelijken.

Als dit overeenkomt met wat je verkoopt, is dit de opzet:

1. Maak je prijsplan aan: Ga naar Products, maak de content of het lidmaatschap aan dat je wilt verkopen en stel vervolgens de prijs en toegangsregels in. Je kunt ook plannen maken die in aanmerking komende content bundelen.
2. Voeg een Pricing Plan-blok toe: Bewerk je pagina, klik op Blok toevoegen (+), kies Pricing Plan en selecteer het plan dat je hebt aangemaakt.
3. Stijl het plan: Kies onder Design of je de titel, beschrijving, prijs, voordelen en knop wilt weergeven. Voeg meer blokken toe als je meerdere plannen naast elkaar wilt tonen.

Het nadeel is echter dat het Pricing Plan-blok van Squarespace gekoppeld is aan lidmaatschappen en afgeschermde content. Dit werkt niet voor een prijstabel waarin je SaaS-abonnementen, bureaupackages, freelance retainers of andere diensten wilt vergelijken.

Daarvoor is de standaard workaround Fluid Engine, waarbij je elke tier opbouwt uit afzonderlijke tekst- en knopblokken en ze vervolgens in kolommen uitlijnt. Desktop en mobiel moeten echter apart worden ingedeeld. 

De eigen documentatie van Squarespace vermeldt dat het blok bedoeld is om toegang tot afgeschermde content te verkopen, en niet om een algemene vergelijkingstabel te bouwen voor plannen, packages of diensten.

Je kunt ook Squarespace-specifieke prijstabel-plug-ins kopen van onafhankelijke ontwikkelaars. Will Myers verkoopt er bijvoorbeeld een voor $25 per site met drie vooraf ingestelde stijlen en ondersteuning voor Squarespace 7.1. Ik zou het echter niet aanraden, omdat het geen onderdeel is van de officiële Extensions-marktplaats van Squarespace en ook geen officiële Squarespace-integratie is.

Optie 2: Voeg een gratis, aanpasbare prijstabel-widget toe

Gebruik de Prijstabel-widget van Jotform als je liever een vergelijkingstabel hebt in plaats van meerdere kaarten naast elkaar.

Met de visuele builder kun je maandelijkse en jaarlijkse tabellen toevoegen, plannen en functies bewerken, elke call-to-action (CTA) koppelen aan de juiste bestemming, en kiezen uit kaart-, carrousel- of volledige vergelijkingslay-outs. 

Je kunt ook een aanbevolen tier markeren met een Populair-label, kortingen toevoegen en oude prijzen tonen, en kleuren, typografie, knoppen, kolombreedtes en mobiel gedrag aanpassen. 

Ga snel en pijnloos aan de slag: 

1. Bouw je prijstabel: Voeg je plannen, prijzen, functies, beschrijvingen en CTA-links toe. Je kunt meerdere tabellen maken (bijvoorbeeld maandelijkse en jaarlijkse prijzen) en bezoekers ertussen laten schakelen.
2. Kies een lay-out en pas de stijl aan: Kies een preset zoals Modern Grid, Compact Columns, Classic Comparison of Card Carousel en pas het ontwerp aan zodat het past bij je Squarespace-site. 
3. Embed het in Squarespace: Klik op Try It on Your Website for Free, kopieer de gegenereerde embedcode, open vervolgens je Squarespace-pagina en voeg een Code-blok toe. Plak de code als HTML, zorg dat Display Source is uitgeschakeld, sla op en bekijk een voorbeeld van de pagina.

Jotform verwerkt de prijstabel als één embed, dus Squarespace hoeft deze alleen maar weer te geven. En voorlopig is er geen terugkerende widgetfactuur: Jotform Website Widgets zijn gratis tot 2027.

Terwijl je toch in de widgetbibliotheek bent …

Stop niet bij prijstabellen. Je kunt nog meer functies toevoegen met Jotform Website Widgets, waaronder

• De FAQ-widget voor vragen over prijzen, facturering, opzegging, functies en onboarding
• De Google Reviews-widget om social proof direct naast de beslissing te plaatsen in plaats van bezoekers naar Google te sturen om die zelf te zoeken
• De Popup-widget voor nieuwsbriefaanmeldingen, kortingen, demo’s, lanceringsaankondigingen of exit-aanbiedingen

En nadat de prijstabel zijn werk heeft gedaan, kan de Squarespace-integratie van Jotform de volgende stap overnemen met ingesloten registratie- of betaalformulieren.