Comment Créer une Sticky Bar de réseaux sociaux sur Shopify

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.5 sur 2 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. Paul

    11 Sep 2021 Répondre

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

    1. Dgeo Dev

      12 Sep 2021 Répondre

      Hello et merci pour le com c’est sympa 😉

  2. DAVID FERNANDES

    28 Nov 2021 Répondre

    Bonjour Dgego, pourquoi ça marche pas avec tiktok?

  3. Régis

    24 Déc 2022 Répondre

    Bonjour,

    Super tuto,
    Hic le logo de tiktok ne s’affiche pas sur ma boutique …

  4. Antony

    15 Mar 2023 Répondre

    Bonjour, chez moi elle entre en conflit avec le chat comment faire ? Sinon super tuto merci !

    1. Dgeo Dev

      16 Mar 2023 Répondre

      Hello, essayer de modifier le z-index: pour mettre une valeur plus haute pour passer dessus ou alors placer le chat ailleurs ?

  5. Rahim

    11 Juin 2023 Répondre

    Bonjour, super tuto, je suis full débutant et j’essaie de faire un truc quali grace à vous.
    Une question, comment je fais si je ne veux que 3 icones, genre FB, Insta et Pint..

    j’ai essayé un peut de trouver de manière logique mais j’ai plutot foiré la bar plutot que de reduire le nombre d icone.

  6. Rahim

    11 Juin 2023 Répondre

    C’est bon j’ai trouvé entre temps, ma première idée était la bonne, j ai du foiré un espace ou une guillemet en retirant les lignes 😉

    1. Dgeo Dev

      12 Juin 2023 Répondre

      Hello, ok super et bravo !!!

Laisser un commentaire

Fermer le menu
×
×

Panier