Comment faire une grille tarifaire responsive sur Squarespace sans CSS personnalisé

Une grille tarifaire permet à vos clients de voir en un coup d’œil ce qu’ils obtiennent pour leur argent. C’est essentiel, que vous vendiez des abonnements SaaS, des packs d’agence, des adhésions ou des formules récurrentes. D’après une étude Zuora/Harris Poll de 2024, 80 % des adultes américains estiment que la flexibilité dans la manière d’acheter et de payer des produits récurrents est « importante », « très importante » ou « absolument essentielle ».

Squarespace, cependant, ne propose pas de bloc natif pour créer un tableau classique en lignes et colonnes. Vous pouvez en concevoir un vous-même avec du texte, des boutons et le Fluid Engine, mais vous devrez le faire séparément pour les versions bureau et mobile. 

Si ajuster manuellement trois cartes de tarifs sur deux tailles d’écran différentes n’est pas la façon dont vous souhaitez passer votre après-midi, laissez-moi vous montrer une méthode bien moins fastidieuse.

Option 1 : Créer une grille tarifaire avec les blocs natifs de Squarespace

Squarespace dispose déjà d’un bloc Pricing Plan (plan tarifaire). Selon ce que vous vendez, vous n’aurez peut-être pas besoin d’assembler un tableau de prix de zéro. Ce bloc fonctionne avec les plans tarifaires pour les adhésions et le contenu réservé, notamment les sites membres, les cours, les vidéos et les blogs payants. 

Vous pouvez proposer un accès gratuit, ponctuel, en plusieurs fois ou récurrent, et placer plusieurs blocs de plans côte à côte pour faciliter la comparaison.

Si cela correspond à ce que vous vendez, voici comment procéder :

1. Créez votre plan tarifaire : Depuis Products, créez le contenu ou l’adhésion que vous souhaitez vendre, puis définissez le prix et les règles d’accès. Vous pouvez également créer des plans regroupant plusieurs contenus éligibles.
2. Ajoutez un bloc Pricing Plan : Modifiez votre page, cliquez sur Ajouter un bloc (+), choisissez Pricing Plan, puis sélectionnez le plan que vous avez créé.
3. Personnalisez le plan : Dans Design, choisissez d’afficher ou non le titre, la description, le prix, les avantages et le bouton. Ajoutez d’autres blocs si vous souhaitez placer plusieurs plans côte à côte.

Le problème, cependant, c’est que le bloc Pricing Plan de Squarespace est lié aux adhésions et au contenu réservé. Il ne convient pas pour créer une grille tarifaire comparant des offres SaaS, des packs d’agence, des forfaits freelance ou d’autres services.

Pour ces cas de figure, la solution native est le Fluid Engine, où vous construisez chaque niveau de tarification à partir de blocs de texte et de boutons distincts, puis les alignez en colonnes. Toutefois, les versions bureau et mobile doivent être configurées séparément. 

La propre documentation de Squarespace précise que ce bloc est conçu pour vendre l’accès à du contenu réservé, et non pour créer un tableau de prix comparatif généraliste pour des plans, des packs ou des services.

Vous pouvez également acheter des extensions de grille tarifaire spécifiques à Squarespace auprès de développeurs indépendants. Will Myers, par exemple, en propose une à 25 $ par site avec trois styles prédéfinis et la compatibilité Squarespace 7.1. Je ne la recommanderais pas, cependant, car elle ne fait partie ni du marketplace officiel des Extensions de Squarespace, ni des intégrations officielles de la plateforme.

Option 2 : Ajouter un widget de grille tarifaire gratuit et personnalisable

Utilisez le widget Grille tarifaire de Jotform si vous préférez un tableau comparatif plutôt que plusieurs cartes alignées.

L’éditeur visuel vous permet d’ajouter des grilles tarifaires mensuelles et annuelles, de modifier les plans et les fonctionnalités, de lier chaque appel à l’action (CTA) vers la destination souhaitée, et de choisir entre un affichage en cartes, en carrousel ou en tableau comparatif complet. 

Vous pouvez également mettre en avant une offre recommandée avec un badge Populaire, ajouter des réductions et des anciens prix, et personnaliser les couleurs, la typographie, les boutons, la largeur des colonnes et le comportement sur mobile. 

Lancez-vous rapidement et sans prise de tête : 

1. Créez votre grille tarifaire : Ajoutez vos plans, prix, fonctionnalités, descriptions et liens CTA. Vous pouvez créer plusieurs tableaux (par exemple, tarification mensuelle et annuelle) et permettre aux visiteurs de basculer entre eux.
2. Choisissez une mise en page et personnalisez-la : Sélectionnez un modèle prédéfini comme Modern Grid, Compact Columns, Classic Comparison ou Card Carousel, puis ajustez le design pour qu’il s’intègre à votre site Squarespace. 
3. Intégrez-la dans Squarespace : Cliquez sur Try It on Your Website for Free, copiez le code d’intégration généré, puis ouvrez votre page Squarespace et ajoutez un bloc Code. Collez le code en HTML, assurez-vous que Display Source est désactivé, puis enregistrez et prévisualisez la page.

Jotform gère la grille tarifaire sous forme d’un seul élément intégré, si bien que Squarespace n’a qu’à l’afficher. Et pour l’instant, pas de frais récurrents : les widgets de site Jotform sont gratuits jusqu’en 2027.

Tant que vous êtes dans la bibliothèque de widgets…

Ne vous arrêtez pas aux grilles tarifaires. Vous pouvez ajouter d’autres fonctionnalités grâce aux widgets de site Jotform, notamment

• Le widget FAQ pour les questions sur les tarifs, la facturation, les annulations, les fonctionnalités et l’onboarding
• Le widget Avis Google pour afficher la preuve sociale directement à côté de la décision d’achat, au lieu d’envoyer vos visiteurs chercher sur Google
• Le widget Popup pour les inscriptions à la newsletter, les réductions, les démos, les annonces de lancement ou les offres de dernière chance

Et une fois que la grille tarifaire a rempli son rôle, l’intégration Jotform pour Squarespace peut prendre le relais pour l’étape suivante avec des formulaires d’inscription ou de paiement intégrés.