Mettez en évidence les spécifications des produits clés avec la section Détails du produit

La capacité à présenter efficacement les informations sur les produits est l’élément vital du commerce électronique. Pourtant, trop souvent, les commerçants sont confrontés à un paradoxe frustrant : l’abondance se transforme en surcharge . Les mises en page rigides, les présentations sèches et les avalanches d'informations étouffent la voix de votre produit, laissant les clients perplexes et désengagés.

Pour surmonter ces obstacles, le thème Concept fournit la section Détails du produit , un outil puissant conçu pour rationaliser et optimiser la communication sur les produits. Cette section permet aux commerçants d'élaborer une description claire et concise du produit, en se concentrant sur leurs spécifications.

Ce tutoriel vous montre comment configurer la section Détails du produit étape par étape :

A. Où se trouve cette fonctionnalité

    1. Sur votre page Produit via l' éditeur de thème , créez la section Détails du produit sous le groupe de sections Modèle .

    2. Cette section de configuration offre une gamme d'options de personnalisation, organisées de manière pratique en trois blocs distincts pour une navigation facile : Description , Ligne pliable et Blocs de spécifications .

B. Configuration des détails du produit

  1. Les paramètres de la rubrique
  2. Les paramètres des blocs

1. Les paramètres de la rubrique

Les paramètres de la section Détails du produit
Paramètres des sections Description
Détails du produit
Ouvrir la première rangée pliable

Activez pour ouvrir la première ligne réductible.

Titre de spécification

Saisit le texte

Titre
Titre

Le titre de la section.

Taille du titre La taille du titre peut être définie sur l'une des options suivantes : Small , Medium , Large ou Extra large .
Alignement du cap Le titre peut être aligné à gauche , au centre ou à droite .
Balise de titre Sélectionne la balise de titre pour structurer et organiser votre contenu pour le référencement.
Sous-titre Le sous-titre du titre est placé au-dessus du titre.
Description Le texte de description du titre est placé sous le titre.
Texte surligné

Texte surligné Choisissez parmi l'une des 6 options suivantes pour formater votre texte :
  • Couleur du texte
  • Couleur d’arrière-plan du texte
  • Soulignement fantaisie
  • Soulignement régulier
  • Texte au pochoir
  • Griffonnage dessiné à la main
Griffonnage surligné

Exiger que le style de texte en surbrillance soit défini sur Griffonnage dessiné à la main.

Ce paramètre propose 5 façons de surligner du texte :
  • Cercle
  • Soulignement de base
  • Soulignement de l'esquisse
  • Soulignement en gribouillis
  • Gribouillis souligné 2
Couleur

Vous pouvez éventuellement personnaliser les couleurs de la section, notamment les suivantes :
  • Texte
  • Arrière-plan
  • Dégradé de fond
  • Souligner
  • Dégradé de surbrillance
  • Texte du bouton
  • Arrière-plan du bouton
  • Dégradé de fond de bouton
Section
Vous pouvez ajuster le remplissage supérieur et le remplissage inférieur de 0 px à 120 px par incréments de 4 px.
Afficher le séparateur de section Affiche un séparateur de ligne au-dessus de cette section.
Faire une section pleine largeur Rend le conteneur sur toute la largeur.
Rendre la section arrondie Applique un bord arrondi aux deux coins supérieurs.

2. Les paramètres du bloc

2.1. Description

Ce bloc est censé exploiter des descriptions informatives et engageantes pour présenter de manière optimale les détails du produit et améliorer l'expérience client.

Titre : le titre du bloc. (Par exemple, Description .)

Le bloc Description est renseigné avec le contenu du champ Description du produit , tel que trouvé dans le tableau de bord d'administration > Produits > Flow Harmony ( Flow Harmony est l'exemple de produit dans cet article). Pour référence, veuillez consulter les deux images ci-dessous.

Bloc de description Le produit Flow Harmony
2.2. Rangée pliable

Utilisez des onglets pliables pour présenter facilement des informations supplémentaires qui permettent aux clients de prendre des décisions d'achat éclairées.

  • Titre - Le titre du bloc
  • Contenu de la ligne – Saisit ou choisit un champ méta (icône métafiel) qui fournit des détails améliorant la compréhension des clients et facilitant des décisions d'achat en toute confiance.

    L'icône métafiel :

  • Métachamps : saisit l'espace de noms et la clé du métachamp contenant la valeur. Chaque champ méta doit être sur sa propre ligne.

Par exemple:

Dans cet exemple de produit Flow Harmony , la valeur du contenu de la ligne est déterminée en récupérant par programme le champ méta Sound , garantissant ainsi la cohérence des données et un affichage précis.

Le contenu de la ligne Le produit Flow Harmony

Pour améliorer davantage les informations sur le produit, des informations sur la batterie ont été ajoutées en saisissant exactement l' espace de noms du champ méta de la batterie et la clé dans les métachamps : tech_specs.battery .

2.3. spécification

Le processus de configuration du bloc Spécifications propose deux approches :


2.3.1. Ajout manuel de spécifications

Visualisons la première méthode en action. Pour afficher 5 spécifications du produit Flow Harmony, nous suivrons ces étapes :

  1. Ajouter 5 blocs de spécifications
  2. Personnalisez chaque bloc avec une icône et un texte pertinents

Pour offrir un support visuel, les deux images ci-dessous fournissent un contexte supplémentaire.


2.3.2. Intégration métaobjet et métachamp

La deuxième méthode exploite la puissance combinée de Metaobject et Metafield . Ici, Metaobject sert de référentiel centralisé pour toutes les spécifications du produit , tandis que les Metafields individuels affichent dynamiquement ces spécifications pour chaque produit spécifique .

Le processus comprend trois étapes principales :

  1. Création de métaobjet
  2. Création de métachamp
  3. Configuration du bloc de spécifications

1. Création de métaobjet

  • Accédez aux paramètres via le tableau de bord d'administration .

    Dans Paramètres , cliquez sur l'onglet Données personnalisées > Ajouter une définition .

    Après avoir cliqué sur Ajouter une définition , cette fenêtre apparaîtra :

  • À titre de référence, veuillez vous assurer que la disposition de vos données correspond à l'exemple présenté dans les images ci-dessous :

    • Nom - entre Tech spec

    • Champs – Choisit le texte du fichier et du texte sur une seule ligne

      • Fichier - Entre Icon dans Nom et choisit Un fichier .

      • Texte sur une seule ligne : saisit Label dans Name et choisit One file .

    À la fin de cette étape, la configuration du métaobjet reflétera la représentation visuelle dans l'image ci-dessous :

  • Après la création du métaobjet, remplissez-le avec les spécifications complètes du produit (par exemple, casque , câble USB-C, 1,25 m , haut-parleurs , etc.). Réalisez cela en :

    • En cliquant sur Ajouter une entrée

    • Sélection d'une icône représentative et saisie du texte dans Étiquette .

      Par exemple , nous ajoutons ici une entrée « Câble USB-C, 1,25 m » :

    • Répétez le processus pour les valeurs « Entrée » restantes.

Une fois cette étape terminée, votre spécification technique Metaobject hébergera de manière exhaustive toutes les entrées de produit ( dans cet exemple, nous avons 8 entrées ), agissant comme un référentiel central pour les informations sur les spécifications.

2. Création de métachamp

Cette étape consiste à établir un nouveau métachamp nommé « Tech specs » conçu pour contenir des valeurs uniques spécifiques à chaque produit .

  • Pour créer un nouveau champ méta, accédez à Paramètres via le tableau de bord d'administration > Données personnalisées > Produits > Ajouter une définition .

  • Nom – entre Tech specs

    Espace de noms et clé - entre custom.tech_specs

    Dans le type de sélection : sélectionne le métaobjet

    Dans référence - choisit Tech spec , puis sélectionne le type de liste d'entrées .

  • Cliquez sur Enregistrer pour terminer cette étape.

  • Une fois cette étape finalisée, le métachamp nouvellement créé sera automatiquement renseigné sur tous vos produits. Vous pouvez désormais attribuer des valeurs spécifiques à des produits individuels, comme vous le souhaitez.

    Par exemple, dans le produit Flow Harmony > Spécifications techniques > Sélectionner les entrées > choisit les entrées pour ce produit dans la liste .

3. Configuration du bloc de spécifications

  • Revenez au bloc Spécifications sous la section Détails du produit .

  • Cette étape nécessite simplement de sélectionner le champ méta Spécifications techniques en cliquant sur l' icône du champ méta située en haut à droite.

  • Les spécifications du produit désigné seront automatiquement renseignées.

Nous espérons que cet article vous a été utile. Si vous avez des questions ou des préoccupations concernant cette fonctionnalité, n'hésitez pas à contacter notre équipe pour obtenir de l'aide.