🟢Texte rotatif

L'application qui vous permet de faire tourner un texte court autour d'un icône SVG ou d'une image.

Depuis la version 1.7

AVANT DE COMMENCER : Assurez-vous d'avoir une licence active installée sur votre boutique Shopify®. Si ce n'est pas le cas, commandez une licence SHOPIWEB PREMIUM en passant par ce lien.

Pour utiliser cette application, vous devez configurer des données personnalisées, appelées champs méta, au niveau de vos produits.

Voici les étapes à suivre :

• Assurez-vous de la version du thème : Cette fonctionnalité est une nouveauté de la version 1.7 du thème SHOPIWEB PREMIUM. Vous devez avoir au minimum cette version, ou une version ultérieure, installée. Si ce n'est pas le cas, vous devez mettre à jour votre thème via l'application SHOPIWEB MANAGER > Premiers pas > Mettre à jour le thème > Voir le tuto vidéo.

• Accédez aux Données personnalisées dans Shopify :

  • Depuis votre tableau de bord Shopify, cliquez sur Paramètres.

  • Cliquez ensuite sur Données personnalisées.

  • Étant donné que cette fonctionnalité s'applique à la page produit, cliquez sur Produit.

Créez les définitions de champs méta nécessaires

Vous devez ajouter plusieurs définitions de champs méta spécifiques pour activer et configurer le texte rotatif. Cliquez sur "Ajouter une définition". Vous devrez répéter cette étape pour chacun des champs méta listés ci-dessous :

Champ méta pour l'Icône Rotative

Définitions	Résultats
Nom	Icône Rotative Galerie Produit
Espace de nom et clé	custom.spinning_icon
Description	Icône SVG rotative dans la galerie produit si aucune image n'est sélectionnée, avec texte rotatif.
Types	Texte sur plusieurs lignes.

Champ méta pour le Texte Rotatif

Définitions	Résultats
Nom	Texte Rotatif Galerie Produit
Espace de nom et clé	custom.spinning_text
Description	Texte affiché autour du cercle rotatif dans la galerie photo de la page produit.
Types	Texte sur une seule ligne, avec une valeur.

Champ méta pour l'Image Rotative

Définitions	Résultats
Nom	Image Rotative Galerie Produit
Espace de nom et clé	custom.spinning_image
Description	Image utilisée pour l'effet de cercle tournant sur la page produit.
Types	Fichier, avec un seul fichier.

Enregistrez les définitions

Après avoir renseigné les informations pour chaque champ méta (Nom, Espace de nom et clé, Description, Type), cliquez sur le bouton enregistrer.

Ajoutez le contenu sur les pages produit

Une fois les définitions créées, vous pouvez aller sur la page d'un produit spécifique pour lequel vous souhaitez utiliser le texte rotatif. Sur la page de modification du produit, faites défiler vers le bas pour trouver la section des champs méta que vous venez de créer.

Renseignez les champs méta pour le produit

Vous devez obligatoirement renseigner le champ méta "Texte Rotatif Galerie Produit". Le texte est la "constante". L'application ne fonctionnera pas si vous n'ajoutez que l'icône ou l'image sans texte.

• Vous pouvez ajouter le code SVG de votre icône dans le champ "Icône Rotative Galerie Produit" (texte sur plusieurs lignes).

  • Retrouvez une collection gratuite de SVG à copier sur la bibliothèque Bootstrap®.

• Vous pouvez également ajouter un fichier image dans le champ "Image Rotative Galerie Produit" (type Fichier). Si vous ajoutez à la fois une image et une icône SVG, l'image sera prioritaire sur l'icône.

Enregistrez le produit

N'oubliez pas de cliquer sur le bouton enregistrer sur la page du produit après avoir ajouté le contenu des champs méta.

Vérifiez sur la boutique

Rafraîchissez la page produit sur votre boutique en ligne pour visualiser le texte rotatif. Si vous ne voyez pas immédiatement la modification sur votre boutique, merci de patienter 20 à 30 secondes. Il arrive qu'un délai soit nécessaire pour que le script se propage dans le code du thème.

Félicitations ! Vous savez maintenant comment utiliser correctement l'application "Texte rotatif" sur votre boutique Shopify® grâce au thème SHOPIWEB PREMIUM.