Comment créer une section Plan de Tarification sur Shopify ?

Nous allons voir dans ce tutoriel comment créer une sorte de zone Pricing Plan sur la page d’accueil de votre boutique Shopify.

Ce tutoriel est assez spécifique et sera uniquement utile pour les personnes proposant des plans d’abonnements ou des prestations de services.

Vous pouvez voir le résultat ici : https://dgeodev.myshopify.com/

Comment installer le système ?

Rendez-vous dans la personnalisation de votre thème – Ajoutez une section, Contenu personnalisé, HTML personnalisé, Custom HTML ou Zone HTML en espérant que votre thème le propose sinon cela risque d’être compliqué…  A la limite mettez le dans le fichier theme.liquid avant la fermeture du Footer. A ce stade copiez/collez l’intégralité du code si dessous et voyons ensemble comment modifier tout cela:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<div class="pricing-wrapper">
<style>

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
.pricing-wrapper {    
   display: flex;
   flex-direction: column;
   justify-content: center;
}
.pricing-wrapper h3 {
   font-size:28px;
text-align:center;
 margin: 1rem 0 1rem 0;
}
.pricing-wrapper  p {
   text-align: center;
   margin-bottom: 4rem;
}
.pricing {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}
.pricing .plan {
   background-color: #fff;
   padding: 2rem;
   margin: 22px;
   border-radius: 5px;
   text-align: center;   
   transition: 0.3s;
   cursor: pointer;
   min-width:300px;
   box-shadow:0 0 5px rgba(000,000,000,0.2);
}
.pricing .plan:hover {
   box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
}
.pricing .plan h2 {
   font-size: 22px;
   margin-bottom: 12px;   
}
.pricing .plan .price {
   justify-content: center;
   margin-bottom: 1rem;
   font-size: 30px; 
}
.pricing .plan ul.features {
   list-style-type: none;
   text-align: left;
}
.pricing .plan ul.features li {
   margin: 8px;
}
.pricing .plan ul.features li:before { display:none; }
.pricing .plan ul.features li .fas {
   margin-right: 4px;
}
.pricing .plan ul.features li .fa-check-circle {
   color: #e8ae2e;
}
.pricing .plan ul.features li .fa-times-circle {
   color: #eb4d4b;
}
.pricing .plan .plan-btn {
   display:inherit;
   border: none;
   width: 100%;
   padding: 12px 35px;
   margin-top: 2rem;
   background-color: #e8ae2e;
   color: #fff;
   border-radius: 5px;
   cursor: pointer;
   font-size: 16px;
}
.pricing .plan.popular {
   border: 2px solid #e8ae2e;
   position: relative;
   transform: scale(1.08);
}
.pricing .plan.popular span {
   position: absolute;
   top: -15px;
   left: 50%;
   transform: translateX(-50%);
   background-color: #e8ae2e;
   color: #fff;
   padding: 4px 5px;
   font-size: 16px;
   border-radius: 5px;
}

</style>

<div class="pricing-wrapper">
  <div class="pricing">
    <div class="plan">
      <h3>Plan 1</h3>
      <div class="price">10€/mois</div>
      <ul class="features">
        <li><i class="fas fa-check-circle"></i> Une de vos de vos options  </li>
        <li><i class="fas fa-check-circle"></i> Une de vos de vos options </li>
            <li><i class="fas fa-check-circle"></i> Une de vos de vos options </li>
        <li><i class="fas fa-check-circle"></i> Une de vos de vos options </li>
            <li><i class="fas fa-check-circle"></i> Une de vos de vos options </li>
        <li><i class="fas fa-check-circle"></i> Une de vos de vos options </li>
      </ul>
      <a class="plan-btn" href="lien">Choisir ce plan</a>
    </div>
    <div class="plan popular">
      <span>Le plus populaire</span>
      <h3>Plan 2</h3>
      <div class="price">20€/mois</div>
      <ul class="features">
        <li><i class="fas fa-check-circle"></i> Une de vos de vos options </li>
        <li><i class="fas fa-check-circle"></i> Une de vos de vos options </li>
            <li><i class="fas fa-check-circle"></i> Une de vos de vos options </li>
        <li><i class="fas fa-check-circle"></i> Une de vos de vos options </li>
            <li><i class="fas fa-check-circle"></i> Une de vos de vos options </li>
        <li><i class="fas fa-check-circle"></i> Une de vos de vos options </li>
      </ul>
      <a class="plan-btn" href="lien">Choisir ce plan</a>
    </div>
    <div class="plan">
      <h3>Plan 3</h3>
      <div class="price">Sur devis</div>
      <ul class="features">
        <li><i class="fas fa-check-circle"></i> Une de vos de vos options </li>
        <li><i class="fas fa-check-circle"></i> Une de vos de vos options </li>
            <li><i class="fas fa-check-circle"></i> Une de vos de vos options </li>
        <li><i class="fas fa-check-circle"></i> Une de vos de vos options </li>
            <li><i class="fas fa-check-circle"></i> Une de vos de vos options </li>
        <li><i class="fas fa-check-circle"></i> Une de vos de vos options </li>
      </ul>
      <a class="plan-btn" href="lien">Contactez-nous</a>
    </div>
  </div>
</div>

Comment personnaliser la zone ?

Vous pouvez librement modifier les textes selon votre convenance ! En ce qui concerne les boutons c’est plus délicat… vous devez mettre le lien vers le produit désiré ou alors mettre des urls spécifiques comme l’ajout direct d’un produit au panier ou au checkout

Exemples de liens

Lien d’ajout au panier d’une variante d’un produit avec redirection au panier:

https://votreboutique.com/cart/add?id=identifiant-de-la-variante&quantity=1

Cela devrait ressembler à ça: https://speedfly-theme.myshopify.com/cart/add?id=10818365685802&quantity=1

Lien d’ajout d’un produit avec redirection vers le checkout:

https://votreboutique.com/cart/identifiant-de-la-variante:quantité

Cela devrait ressembler à ça: https://votreboutique.com/cart/identifiant-de-la-variante:1

J’ai un produit sans variante ! 

Bin la tu vas être emmerdé 😀 en gros faut trouver l’identifiant de la variante fictive qu’un produit unique crée… en gros il faut le trouver dans le code source de votre fiche produit mais la faut s’y connaitre un peu en code 🙂

Ou trouver l’identifiant de la variante du produit ?

Rendez-vous dans le produit désiré et éditez-le. Ensuite dans la zone des variante cliquez sur modifier sur la variante que vous voulez proposer sur un des liens de notre tuto. Et copiez/collez le à la place de « identifiant-de-la-variante ».

Il ne reste plus qu’à mettre le lien complet dans le:

href="lien"

d’une des balises suivantes:

<a class="plan-btn" href="lien">...</a>

Comment modifier le design ?

La je vous invite à regarder la vidéo car par écrit c’est assez compliqué à expliquer 😉

Ce tutoriel existe aussi en vidéo

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 3 votes]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 10 commentaires

  1. Max Harder'Z

    24 Oct 2020 Répondre

    Faut que je réfléchisse à quoi en faire mais j’adore l’idée comme d’habitude 😀 Merci bien 😉

  2. hatim

    1 Nov 2020 Répondre

    Bonjour,
    Merci pour cet article, j’ai une question, tu prévois de faire la meme chose mais pour des plans du meme produit mais avec des offres différentes style :
    Choisissez vos quantités :
    1 pour 14 euros
    2 pour 20 euros
    3 pour 30 euros
    au niveau du page produit avant ajouter au panier .

    Merci d’avance.

    1. Dgeo Dev

      2 Nov 2020 Répondre

      Hello, c’est possible en modifiant le quantity:1, quantity:2, quantity:3 de chaque url 😉

      1. hatim

        2 Nov 2020 Répondre

        Merci pour ta reponse, mais ma question était plus concernant des offres de quantités au niveau du de la fiche produit avec le RADIO PRICE BUTTON, j’ai cherché partout le code , j’ai pas trouvé, si tu peux me dire 🙂 🙂

        1. Dgeo Dev

          3 Nov 2020 Répondre

          A ça un simple tuto ne suffira pas c’est très complexe 😉 au besoin le thème Speedfly le propose nativement 😉

      2. hatim

        2 Nov 2020 Répondre

        et j’ai pas compris ta reponse 🙂 , désolé :), tu veux dire quoi par quantity ? c’est à quel niveau ?

  3. Cyril

    10 Jan 2021 Répondre

    Bonjour et merci pour ce tuto, est il possible d’ajouter une image de font pour personnaliser chaque plan ?
    Si oui ou ajouter le code ou le lien de l’image ?

    1. Dgeo Dev

      11 Jan 2021 Répondre

      Hello, pas pour le moment mais un tuto de ce type est prévu 😉

  4. david rob

    20 Mai 2021 Répondre

    Tuto au top comme d’habitude qui m’a bien aidé 🙂

Laisser un commentaire

Fermer le menu
×
×

Panier