Comment Créer une Galerie Photos sur Shopify

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 Extraits (Snippets) et cliquez dessus. Cliquez maintenant sur « Créer un nouveau extrait » 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 vôtres, 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: 4.7 sur 3 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

Laisser un commentaire

Fermer le menu
×
×

Panier