# Texte rotatif

{% hint style="info" %}
Depuis la version 1.7
{% endhint %}

{% hint style="success" %}
**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](https://www.shopiweb.fr/).
{% endhint %}

{% embed url="<https://youtu.be/iWxRv_yNpxM>" %}

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 :

* &#x20;**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 :&#x20;

#### **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**&#x20;

| 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**

{% hint style="warning" %}
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.
{% endhint %}

* 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®](https://icons.getbootstrap.com/).
* 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. <mark style="color:red;">**Si vous ne voyez pas immédiatement la modification sur votre boutique, merci de patienter 20 à 30 secondes**</mark>. 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.***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.docs.shopiweb.fr/theme-premium/documentation/metafields/texte-rotatif.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
