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 1 votes]

Cet article a 7 commentaires

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

  2. 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. Hello, c’est possible en modifiant le quantity:1, quantity:2, quantity:3 de chaque url 😉

      1. 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. A ça un simple tuto ne suffira pas c’est très complexe 😉 au besoin le thème Speedfly le propose nativement 😉

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

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine