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

Installation du code

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 Extraits (Snippets) et cliquez sur « Créer un nouveau extrait ».

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 Mise ne page (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 fichier 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 Ressources (Assets) et ouvrez-le ! vous allez essayer de trouver un fichier .css généralement theme.css ou style.css ou base.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

Ce tutoriel existe aussi en vidéo

Bon tuto à toutes & tous 🙂

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

  2. Bonjour Dgego, pourquoi ça marche pas avec tiktok?

Laisser un commentaire

Fermer le menu