Comment Créer un Zoom sur Image sur Shopify

Dans ce nouveau tutoriel shopify nous allons voir comment faire un effet de zoom original sur les images d’une boutique Shopify !

Vous pouvez voir le résultat ici: https://dgeodev.myshopify.com/

Une version plus avancée est disponible ici: Zoom images version 2

Comment installer le code ?

Rendez-vous dans Boutique ne ligne – Actions – Modifier le code et ouvrez le dossier Ressources (Assets) ! A ce stade vous devez trouver votre fichier base.css, theme.css, style.css ou autre fichier .css que votre thème utilise.

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

.cont-scale img {      
  transition: transform 1s;      
}
.cont-scale:hover img {     
  transform: scale(1.1) rotate(0deg) ;
  transition: transform 3s;    
}

Comment modifier les options ?

Vous pouvez modifier les valeurs en degré ou unité pour les paramètres suivants:

  • Rotate: degré de rotation (mettre 0 pour ne pas en avoir)
  • Scale: intensité du zoom,
  • Transform: temps de l’exécution de l’effet

Ou activer l’effet ?

Alors la c’est assez compliqué et je vous invite donc à visionner la vidéo ci-dessous 😉

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

Cet article a 7 commentaires

  1. nicolas

    22 Déc 2020 Répondre

    Bonjour,
    Un grand merci pour tous les tutos bravo à vous!

    Petit problème avec celui ci, bizarrement l’effet de loupe se fait une fois que je suis descendu tout en bas de la page? cela marche mais en remontant lol merci!

    1. Dgeo Dev

      23 Déc 2020 Répondre

      La classe conteneur ne doit pas être mise au bon endroit 🙂 essayez de la mettre sur un parent plus proche de l’image

  2. nicolas

    22 Déc 2020 Répondre

    C’est bon ca marche!

    Bravo encore a vous! et merci

  3. nicolas

    24 Déc 2020 Répondre

    Bonjour juste pour savoir du coup sur mobile cela ne peut pas fonctionner?

    Merci!

    1. Dgeo Dev

      24 Déc 2020 Répondre

      Hello, exactement car le survol souris n’existe pas sur mobile 😉

  4. Annie

    21 Fév 2023 Répondre

    Allo ! Si je veux mettre l’effet sur le produit, je fais comment ?

    1. Dgeo Dev

      8 Mar 2023 Répondre

      Navré ce n’est pas possible avec ce code 🙁

Laisser un commentaire

Fermer le menu
×
×

Panier