Nous allons voir dans ce tutoriel comment faire une galerie d’images sur Shopify. Une telle page peut être intéressante pour présenter une sorte de portfolio de vos modèles ou même de vos produits.

Comment mettre le système en place ?

Rendez-vous dans Boutique en ligne – Actions – Modifier le code et trouvez le dossier Snippets et cliquez dessus. Cliquez maintenant sur « Créer un nouveau Snippet » et copiez/collez le code suivant:

<div class="dg-gallery__photos">  
  <div class="row">
    <div class="column">
      <img src="https://stevensegallery.com/900/900" alt="Nom du produit 1" data-url="/products/produit-1" onclick="dgShowPhoto(this);">
    </div>
    <div class="column">
      <img src="https://baconmockup.com/900/900" alt="Nom du produit 2" data-url="/products/produit-2" onclick="dgShowPhoto(this);">
    </div>
    <div class="column">
      <img src="https://www.placecage.com/900/900" alt="Nom du produit 3" data-url="" onclick="dgShowPhoto(this);">
    </div>
    <div class="column">
      <img src="https://placebear.com/900/900" alt="Nom du produit 4" data-url="/products/produit-4" onclick="dgShowPhoto(this);">
    </div>
  </div> 

  <div class="container">       
    <span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>       
    <img id="expandedImg">       
    <div id="imgtext"></div>    
  </div>

  <div class="row">
    <div class="column">
      <img src="https://stevensegallery.com/900/900" alt="Nom du produit 1" data-url="/products/produit-1" onclick="dgShowPhoto(this);">
    </div>
    <div class="column">
      <img src="https://baconmockup.com/900/900" alt="Nom du produit 2" data-url="/products/produit-2" onclick="dgShowPhoto(this);">
    </div>
    <div class="column">
      <img src="https://www.placecage.com/900/900" alt="Nom du produit 3" data-url="" onclick="dgShowPhoto(this);">
    </div>
    <div class="column">
      <img src="https://placebear.com/900/900" alt="Nom du produit 4" data-url="/products/produit-4" onclick="dgShowPhoto(this);">
    </div>
  </div>
</div>

<script defer>  
  function dgShowPhoto(elem) { 
    
    let expandImg = document.getElementById("expandedImg");
    let imgText = document.getElementById("imgtext");
    expandImg.src = elem.src;  
    let url = elem.getAttribute('data-url');
    if (url) {
      imgText.innerHTML = `<a href="${url}">${elem.alt}</a>`;   
    } else {
      imgText.innerHTML = `${elem.alt}`;
    }  
    expandImg.parentElement.style.display = "block";
  } 
</script> 
                    
<style>
  .dg-gallery__photos .column {
    float: left;
    width: 50%;
    padding: 3px 5px;
  }
  .dg-gallery__photos .row {
    margin:0 -5px;
  }
  @media only screen and (min-width:750px) {
    .dg-gallery__photos .column {
      float: left;
      width: 25%;   
      padding: 7px 10px;
    }
    .dg-gallery__photos .row {
      margin:0 -10px;
    }
  }

  .dg-gallery__photos .column img {
    opacity: 0.8;
    cursor: pointer;
  }

  .dg-gallery__photos .column img:hover {
    opacity: 1;
  }  
  .dg-gallery__photos .row:after {
    content: "";
    display: table;
    clear: both;
  }
  .dg-gallery__photos .container {
    position: relative;
    display: none;
  }
  .dg-gallery__photos #expandedImg {
    width:100%;
  }
  .dg-gallery__photos #imgtext {    
    font-size: 18px;  
    background:#000;
    padding:8px 10px; 
    color:#FFF;
  }  
  .dg-gallery__photos #imgtext a {
    color:#FFF;
  }  
  .dg-gallery__photos #imgtext a::after {
    content:"";
  	display:block;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:1;
  }
  .dg-gallery__photos .closebtn {
    position: absolute;
    top: 10px;
    right: 15px;
    color: white;
    font-size: 35px;
    cursor: pointer;
    z-index:2;
  }
</style>

Le placement

Plusieurs solution s’offre à nous…

  • Créer un template de page
  • Afficher le système dans une section
  • L’afficher dans un type de contenu comme une fiche produit

Pour en savoir plus sur le placement je vous invite à visionner la vidéo 😉

{%- render 'portfolio' -%}

Comment administrer tout ca ?

Si vous avez suivi ma formation sur les thèmes shopify vous pourrez adapter ce code pour qu’il soit directement administrable dans la personnalisation du thème.

Sinon on va devoir modifier ca dans le code :p Allons-y !

Vous allez repérer la balise img… et modifier les url pour mettre les votres, le alt pour le titre de l’image ou du produit, le data-url pour le lien de destination au clic sur l’image !

Vous avez en modèle 4 en haut et 4 en bas ! au clic une grande image d’affichera. Vous devez donc selon le nombre d’images que vous souhaitez dupliquer des portions de codes en gros les column comme ceci:

Cette zone…

…sera la zone ou s’affichera l’image zoomée ! vous pouvez mettre vos column avant ou après ou comme faire un mix des 2 avec 4 au dessus et 4 en dessous ! à vous de faire à votre idée 🙂

Si tout cela semble trop complexe pour vous je vous invite vivement à visionner la version vidéo.

Bon tuto à toutes et 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

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