Nous allons voir dans ce tutoriel comment ajouter une zone sous le formulaire d’achat d’une fiche produit sur Shopify. Cet encart est idéal pour l’effet de rassurance avec des icônes  et textes adaptées comme par exemple le service client, la garantie, les paiements sécurisés…

Comment placer cet encart d’infos complémentaires ?

Rendez-vous dans Boutique en ligne – Actions – Modifier le code – Trouver le dossier Sections et trouvez le fichier product-template.liquid !

Vous n’avez pas de product-template dans le dossier section ? dans ce cas rendez-vous dans Templates – product.liquid

Vous allez essayer de rechercher en cliquant sur la touche « ctrl + F » de votre clavier l’occurence suivante : « {% enform ou </form » ! Une fois cette portion de code trouvée copiez/collez le code suivant juste en dessous de cette ligne !

Je n’ai pas de « {% enform ou </form » … Dans ce cas rendez-vous dans le dossier Snippets et essayez de trouver un fichier nommait généralement product-form.liquid… Sur Speedfly c’est product-form-1.liquid.

<div class="xtraInfos"> 
  <div class="xtraInfos__item">
    <img class="xtraInfos__img" src="https://cdn.shopify.com/s/files/1/0532/9974/0849/files/icon-delivery95x95.png?v=1611189038" width="36">
    <div class="xtraInfos__title">Livraison Gratuite</div>
  </div>
  <div class="xtraInfos__item">
   <img class="xtraInfos__img" src="https://cdn.shopify.com/s/files/1/0532/9974/0849/files/icon-client.png?v=1611189038" width="36">
    <div class="xtraInfos__title">Satisfaction Garantie</div>
  </div>
  
  <div class="xtraInfos__item">
    <img class="xtraInfos__img" src="https://cdn.shopify.com/s/files/1/0532/9974/0849/files/icon-sav95x95.png?v=1611189038" width="36">
    <div class="xtraInfos__title">Service Client</div>
  </div>
  
  <div class="xtraInfos__item">
   <img class="xtraInfos__img" src="https://cdn.shopify.com/s/files/1/0532/9974/0849/files/icon-secure.png?v=1611189038" width="36">
    <div class="xtraInfos__title">Paiements Sécurisés</div>
  </div>
</div>

Ouvrez maintenant le dossier Assets et trouvez votre fichier .css.liquid ou .scss.liquid ou .css, .scss, généralement appelé theme ou style. Mettez-vous tout en bas et copiez/collez le code ci-dessous:

.xtraInfos * {
  box-sizing: border-box;
}
.xtraInfos {  
  display:flex;  
  justify-content:space-between;
  flex-wrap:wrap;
  width: 100%;
  margin: 1rem auto;
  background: #f1f1f1; 
  box-shadow: 0px 2px 4px 0px #f0cad2;
  font-size:14px;
  font-family:arial;
  color:#555;
} 
.xtraInfos__item {
  flex:1 0 25%;
  text-align:center;
  padding:1rem;
  border-right:1px solid #e6e6e6;  
} 
.xtraInfos__item:last-child {
  border-right:0; 
}
.xtraInfos__img {
  margin-bottom:7px;
}
@media screen and (max-width:600px) {
  .xtraInfos__item {    
    flex:1 0 50%;
    border:0.5px solid #e6e6e6;        
  }
}

Comment personnaliser les icônes, les textes et le design ?

Cette partie étant assez compliquée à expliquer par écrits, je vous invite à visionner la vidéo 😉

 

Bon tuto à toutes & tous !

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

🤗 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 4 commentaires

  1. Bonjour Dgeo ! Merci encore pour ce magnifique tutos !
    C’est top.

    Cependant j’ai un soucis avec les tutos, ils se mettent sur la page produit, et non sur la page d’accueil avec le produit en vedette (la livraison, le bouton acheté maintenant, les secu de paiements, le GIF d’offre et celui la aussi).

    Comment je pourrais faire?

    Merci

    1. Hello, il faut changer et ne pas aller dans product-template.liquid mais featured-product.lliquid

  2. hello c’est possible de change la couleur des icones aussi? merci

    1. Hello, non navré mais il suffit de les modifier sur photoshop et de remplacer par les urls d’images 🙂

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