Présentation générale

Le module zoom va vous permettre d'afficher les images de vos produits en grand lorsque que l'utilisateur survole un produit avec la souris. Ce module est idéal pour les boutiques contenant des produits dont l'apparence est importante (ex: boutique de vêtements, boutique de déco et design,...).
Notre module zoom par défaut s'intégre facilement sur toutes les boutiques (voir rubrique "intégration") mais si vous êtes à l'aise avec les langages de programmation internet (CSS, HTML,...) n'hésitez pas à customiser et/ou modifier les paramètres de votre zoom.

Zoom par défaut

Par défaut, notre zoom affichera la grande photo d'un produit survolé par la souris de l'utilisateur. Le zoom s'efface dès que la souris du visiteur quitte le produit.

Comment intégrer le module zoom sur votre boutique ?

Cliquez gauche sur les lignes de code suivantes, puis faites Ctrl+A pour sélectionner tout le code. Ensuite faites Ctrl+C pour copier le code. Connectez vous à votre interface d'administration, sélectionnez l'onglet "aspect" puis "En-tête & Pied de page (HTML)". Cliquez gauche sur la zone pied de page HTML pour faire apparaître le curseur. Finalement faites Ctrl+V pour coller les lignes de code. N'oubliez pas de "Sauver" vos modifications. Il ne reste plus qu'à aller sur votre boutique pour constater le resultat !!

Remarque : certaines lignes de code sont communes aux différents modules javascript yoja. Si vous avez déjà intégré un module yoja sur votre boutique, vérifiez de ne pas insérer deux fois les mêmes lignes (par exemple jquery-1.2.1.js et yoja.core.js)

Besoin d'aide ?

Si vous rencontrez des problèmes pour intégrer le module zoom sur votre boutique zlio, vous pouvez trouver de l'aide sur le forum. Vous pouvez également contacter notre support technique.

Comment customiser le zoom par défaut?

Une fois votre zoom correctement inséré dans votre page vous pouvez évidemment le customiser pour qu'il corresponde au mieux au design de votre boutique zlio. Pour cela, il faut premièrement supprimer le style par défaut en supprimant la première de code de la rubrique "intégration" (ligne où l'on charge le style zoom.css). Ensuite, connectez-vous à votre interface d'administation, sélectionnez l'onglet "aspect" puis "Style CSS". Ajoutez à vos styles le code exemple suivant que vous adapterez en fonction de vos besoins : (remarque : les styles display:none; position:absolute; z-index:3000; sont à conserver)