Nous allons voir dans ce tutoriel shopify comment créer une barre fixée de partage sur les réseaux sociaux !

Installation du Snippet

Cette barre sera fixée au scroll sur la gauche pour les grand écran et en bas sur les versions mobiles. En effet sur mobile cacher une partie de l’écran à gauche n’est pas vraiment idéal avouez-le :p

Rendez-vous dans Boutique en ligne – Actions – Modifier le code – Ouvrez le dossier Snippets et cliquez sur Créer un nouveau Snippet.

Nommez-le « fixed-social-bar » et copiez/collez le code ci-dessous:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="dg-icon-bar">
  <a href="#" class="social-icon facebook "><i class="fa fa-facebook"></i></a>
  <a href="#" class="social-icon twitter"><i class="fa fa-twitter"></i></a>
  <a href="#" class="social-icon google"><i class="fa fa-google"></i></a>
  <a href="#" class="social-icon linkedin"><i class="fa fa-linkedin"></i></a>
  <a href="#" class="social-icon youtube"><i class="fa fa-youtube"></i></a>
</div>

Les réseaux proposés sont limités mais je montrerai dans la vidéo comment en rajouter facilement 😉

Par contre il faudra renseigner dans les attributs href des lien vos urls de vos réseaux sociaux en remplacement les #

Appel du système

Rendez-vous cette fois dans le dossier Layout et ouvrez votre theme.liquid et mettez-vous tout en bas jusqu’à repérer la fermeture de la balise body comme ceci : </body> et copiez/collez le code suivant juste AVANT !

{%- include 'fixed-social-bar' -%}

Côté performance…

Vous avez déjà fontawesome d’installé ? alors supprimez la 1ère ligne du snippet qui est l’appel du css ! cela vous évitera de le charger 2 fois 😉

Mise en forme

Maintenant dans le système est en place vous aimeriez sans doute savoir comment modifier la mise en forme, le placement et les couleurs ! Et c’est bien normal alors je vais essayer de vous l’expliquer mais idéalement il serait opportun d’avoir quelques connaissances CC au préalable ! N’hésitez pas à regarder ma chaine pour plus d’infos la dessus.

Rendez-vous désormais dans le dossier Assets et ouvrez-le ! vous allez essayer de trouver un fichier .css généralement theme.css ou style.css ou app.css. Il peut arriver que vous ayez après le .css un .liquid mais ca marche aussi 🙂

Mettez-vous tout en bas du fichier et copiez/collez le code suivant:

.dg-icon-bar {
    position: fixed;
    z-index:2;

  }
  .dg-icon-bar .social-icon {
    display: block;
    text-align: center;
    transition: all 0.3s ease;
    color: white;
    font-size: 20px;
  }
  .dg-icon-bar .social-icon > *, .dg-icon-bar .social-icon :hover {
    color: white;
   
  }
  .dg-icon-bar .social-icon:hover {
     background: #000; 
  }

  .dg-icon-bar .facebook {
    background: #3B5998;  
  }

  .dg-icon-bar .twitter {
    background: #55ACEE;
  }

  .dg-icon-bar .google {
    background: #dd4b39; 
  }

  .dg-icon-bar .linkedin {
    background: #007bb5;  
  }

  .dg-icon-bar .youtube {
    background: #bb0000;
  }
  
  @media screen and (max-width: 749px) {
     body { padding-bottom:60px; }
    .dg-icon-bar {
      width:100%;
      bottom: 0;
      display:flex;    
    }
    
    .dg-icon-bar .social-icon {
      flex:1;
      padding: 10px;
    }
  }
  
  @media screen and  (min-width: 750px) {
    .dg-icon-bar {
      top: 50%;
      bottom:auto;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }
    .dg-icon-bar .social-icon {     
      padding: 16px;
    }
  }

La je vous conseille de modifier uniquement pour la grosseur des icônes les attributs padding ensuite pour les couleurs les attributs color et background ! Cherchez sur google « hexadecimal color » et vous tomberez sur des générateurs de couleurs ! bref amusez-vous à tester mais surtout faire une sauvegarde avant de faire n’importe quoi :p

La vidéo arrive bientôt ! Bon tuto à toutes & tous 🙂

Merci de me laisser une petite note 😉
[Note moyenne de: 0 sur 0 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 2 commentaires

  1. Bonjour, je suis vos tutos depuis très longtemps et je vous en remercie infiniment !

    1. Hello et merci pour le com c’est sympa 😉

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