Élément de prix du produit

À propos de l'élément Prix du produit

In Éditeur GemPages 7.0, l'élément Prix du produit combine deux éléments distincts : Tarif Comparer les prixL’ Élément de prix indique le prix régulier d'un produit, tandis que le Comparer l'élément de prix Affiche le prix réduit ou le prix d'origine en cas de promotion. Afficher les deux prix simultanément rend votre offre plus attrayante et constitue une méthode éprouvée pour augmenter les conversions.

Comment ajouter un élément de prix de produit ?

Extrait du Tableau de bord GemPages, ouvrez votre modèle préféré pour accéder à l'éditeur. Vous pouvez rapidement trouver ces deux éléments dans la barre latérale gauche, sous la Produit .

En tant qu'élément enfant, l'élément Prix et Comparer les prix doit être situé dans un Module produit pour fonctionner correctement. 

GemPages vous permet de modifier le format d'affichage des prix afin d'afficher le suffixe de la devise. Pour utiliser ce format, rendez-vous sur Tableau de bord GemPages → Préférences et activer Afficher le prix en devise.

Après l'avoir activé, vous devez forcer la publication Les pages contenant l'élément Prix ou Comparer les prix doivent appliquer le format mis à jour aux pages en ligne.

Comment afficher le prix de comparaison à côté du prix normal

Généralement, le prix de comparaison est placé à côté du prix normal pour mettre en avant les réductions et encourager les achats. Suivez ces étapes pour le configurer :

Étape 1 : Définir le prix de vente et comparer les prix dans Shopify

Avant d'afficher le prix de comparaison dans GemPages, assurez-vous d'avoir configuré le prix normal et le prix soldé de votre produit dans Shopify. Vous pouvez suivre Directives de Shopify pour les régler correctement.

Étape 2 : ajouter un élément de ligne

Dans l'éditeur GemPages, faites glisser et déposez le Élément de ligne à l'emplacement de votre page où vous souhaitez que les prix apparaissent. Sélectionnez un Disposition à 2 colonnes Et définir Largeur de colonne à Adapté au contenuCela permet aux colonnes de s'adapter automatiquement au contenu à l'intérieur.

Étape 3 : Insérer les éléments de prix dans les colonnes

Placez le Élément de prix dans une colonne et le Comparer l'élément de prix dans l'autre colonne. Ajustez l'alignement, l'espacement ou le style selon vos besoins pour correspondre à votre design préféré.

Configurer l'onglet Paramètres

Les éléments Prix et Comparer les prix partagent des options de configuration presque identiques, à l'exception du paramètre de ligne directe qui s'applique au Comparer les prix.

Origine du produit

Ce paramètre détermine le produit pour lequel l'élément affiche les informations tarifaires. Par défaut, il utilise le produit attribué dans le module Produit. Vous pouvez modifier le produit en ouvrant le Sélecteur de produits dans les paramètres du module produit.

Styles de texte

À ce stade, vous avez la possibilité d'affiner la typographie du texte. Voici les options disponibles :

1. Modèles:Sélectionnez votre style souhaité parmi les options prédéfinies, qui incluent 6 styles de titre et 3 styles de paragraphe.

2. Police: Choisissez la police que vous souhaitez utiliser pour le texte dans ce bloc de texte. Si vous souhaitez utiliser une police qui n'est pas répertoriée, vous pouvez vous référer aux instructions fournies sur comment ajouter une police personnalisée dans Editor v7.

3. Taille: Ajustez la taille de la police en spécifiant une valeur en pixels.

4. Couleur: Choisissez une couleur pour le texte.

5. Aligner: Déterminez la position du texte sur votre page. Vous avez le choix entre quatre options : alignement à gauche, centré, aligné à droite et justifié.

Cliquez sur le Afficher plus bouton pour révéler plus d'options de personnalisation. 

6. Poids de la police : Choisissez le poids de police souhaité dans le menu déroulant fourni.

7. Hauteur de ligne: Ajustez la hauteur du texte en spécifiant une valeur de pourcentage.

8. Espacement des lettres:Modifiez l'espacement entre les lettres en saisissant une valeur en pixels.

9. Transformer: Transformez le texte de l’une des manières suivantes : 

• Aucune transformation appliquée.
• Majuscule: Convertir tout le texte en majuscules.
• Minuscule: Convertir tout le texte en minuscules.
• Capitaliser:Mettez en majuscule la première lettre de chaque mot.

10. Ombre :

Vous pouvez ajouter des ombres de texte pour plus de profondeur visuelle :

• Direction: Spécifiez l'angle de l'ombre.
• Couleur : Choisissez la couleur de l'ombre.
• Distance: Définissez la distance à laquelle l'ombre apparaît par rapport au texte.
• Brouiller: Ajustez la douceur des bords de l'ombre.

Ligne à travers

Ce paramètre est exclusif à la comparaison de prix. Activez-le pour activer la ligne de prix. 

• Couleur: Choisissez votre couleur de ligne préférée dans la palette ou entrez le code couleur hexadécimal.
• Grosor: Ajustez l'épaisseur à l'aide du curseur ou en saisissant un numéro spécifique dans la case. 

Configurer l'onglet Avancé

Pour une personnalisation plus avancée, veuillez accéder au Onglet Avancé et suivez les instructions dans cet article.

Dépannage : le prix s'affiche de manière incorrecte

1. Assurez-vous du bon placement de l'élément de prix

• Ouvrez votre page dans l'éditeur GemPages.
• Assurez-vous que l'élément de prix est placé à l'intérieur d'un module de produit.
• Si ce n'est pas le cas, faites glisser un module de produit sur la page et imbriquez-y l'élément de prix.

2. Vérifier l'affectation du produit dans le module Produit

• Sélectionnez le module Produit dans l’éditeur GemPages.
• Dans le panneau des paramètres, assurez-vous que le bon produit est attribué.
• Vous pouvez choisir d'afficher par produit attribué ou de sélectionner un produit spécifique manuellement.

3. Confirmer le statut et la disponibilité du produit dans Shopify

• Accédez à votre administrateur Shopify > Produits.
• Sélectionnez le produit en question.
• Assurez-vous que le statut du produit est défini sur « Actif ».
• Sous « Canaux de vente et applications », confirmez que « Boutique en ligne » est sélectionné.

4. Mettre à jour le prix du produit et le format de la devise dans Shopify