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 5 commentaires

  1. 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. La classe conteneur ne doit pas être mise au bon endroit 🙂 essayez de la mettre sur un parent plus proche de l’image

  2. C’est bon ca marche!

    Bravo encore a vous! et merci

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

    Merci!

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

Laisser un commentaire

Fermer le menu

OFFRE SPÉCIALE -50% SUR LA FORMATION ECOMFLY

1 Bootcamp en vidéo sur le ECOM + 1 Formation Création de Boutique Brandée + 1 Formation SEO sur Shopify