Élément de code personnalisé

À propos de l'élément de code personnalisé

L'élément de code personnalisé dans GemPages Editor V7 vous donne la flexibilité d'ajouter le vôtre HTML, CSS, JavaScript et Liquid Intégrez du code directement à votre page. C'est un élément puissant qui vous permet de :

• Personnalisez en toute simplicité : Ajoutez des éléments de conception uniques ou des fonctionnalités interactives que les éléments GemPages classiques ne prennent pas en charge.
• Entretien intégrer des applications tierces: Intégrez des applications externes, des widgets, des codes de suivi ou des scripts dans votre boutique Shopify sans codage compliqué.
• Améliorez les fonctionnalités du magasin : Ajoutez des comportements et des interactions personnalisés pour améliorer l'apparence et le fonctionnement de votre boutique pour vos clients.

Ajoutez un élément de code personnalisé à votre page

Suivez ces étapes simples pour insérer l’élément de code personnalisé :

Étape 1 : Consultez la Tableau de bord GemPages, puis sélectionnez votre page cible pour ouvrir l'éditeur.

Étape 2: Faites glisser et déposez le Code personnalisé élément de la barre latérale gauche, sous le Avancé section, à la zone souhaitée.

Cliquez sur l'élément pour révéler la configuration, y compris le Paramètres languette et Avancé languette. 

Configurer l'onglet Paramètres

Ses pommes de douche filtrantes intègrent une technologie de filtration avancée permettant d'éliminer le chlore, les métaux lourds et autres impuretés de l'eau. Cet engagement en faveur de la pureté de l'eau a fait de Hansgrohe la marque préférée des consommateurs en quête d'une expérience de douche plus saine. Paramètres Cet onglet vous permet de configurer le comportement et l'apparence de votre élément de code personnalisé sur la page. Voici le fonctionnement de chaque section :

Code

Insérez votre propre code personnalisé en cliquant sur le bouton «+ Ajouter…". Une boîte de dialogue Éditeur de code s'affichera où vous pourrez saisir HTML/Liquide, CSS, ou JavaScript extrait de code.

Une fois terminé, appuyez sur le Enregistrer .

Remarque : Dans l'onglet HTML, vous pouvez également insérer le Code d'installation tiers pour afficher le contenu.

Présentation

Dans l' Présentation section, vous avez la possibilité de modifier l'apparence visuelle en sélectionnant une couleur dans la palette fournie ou en insérant une image d'arrière-plan. 

Couleur

Choisissez une couleur unie ou dégradée comme arrière-plan de l'élément. Vous pouvez :

• Saisissez manuellement un code HEX (par exemple, #E2E2E2)
• Choisissez parmi les couleurs récentes ou suggérées
• Ajustez l'opacité à l'aide du curseur de pourcentage

Image(s) 

Utilisez cette option pour ajouter une image d'arrière-plan si nécessaire.

Cliquez à nouveau sur « + Ajouter… » dans la section Image pour télécharger ou sélectionner une image d'arrière-plan.

Une fois une image ajoutée, vous disposerez d'options de configuration avancées :

• Source: Affiche l'URL de l'image ou vous permet de sélectionner dans la galerie multimédia.
• Scale: Choisissez la manière dont l'image est mise à l'échelle dans le bloc (par exemple, Couvrir, Contenir, Auto).
• Poste: Définissez le point focal (centre, en haut à gauche, en bas à droite, etc.).
• Répéter: Définissez si et comment l'image se répète (Pas de répétition, Répéter, Répéter-X/Y).
• L'attachement:Définir le comportement de défilement de l'image (Défilement ou Fixe).
• Optimiser LCP (Largest Contentful Paint): Rrecommande au navigateur de donner la priorité à cette image pour les performances, sélectionnez Précharge = Oui isi cet élément se charge au-dessus du pli.

Nom

Renommez votre élément pour une identification facile dans l'éditeur, particulièrement utile pour les mises en page complexes ou les pages à plusieurs sections.

Aligner

Ce paramètre vous permet de déterminer la manière dont l'élément est positionné sur votre page. Vous avez le choix entre trois options : aligné à gauche, centré et aligné à droite.

Configurer l'onglet Avancé

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

Étape 1 : Recherchez l'élément GemPages auquel vous souhaitez appliquer le code personnalisé, puis cliquez avec le bouton droit de la souris et sélectionnez « Code personnalisé ».

Étape 2 : Localisez l’onglet approprié pour CSS et scénario, et insérez l'extrait de code dans la boîte de dialogue. Appuyez sur « Enregistrer" quand tu auras fini.

Comment supprimer un code personnalisé ou un liquide personnalisé

Si vous n'avez plus besoin du code personnalisé que vous avez ajouté, vous pouvez le supprimer de deux manières :

1. Supprimer un élément de code personnalisé

Étape 1 : Dans l’éditeur, cliquez sur l’élément de code personnalisé que vous souhaitez supprimer.

Étape 2 : Appuyez sur l'icône de la corbeille (Supprimer) dans la barre supérieure ou faites un clic droit sur l'élément et sélectionnez Supprimer .

2. Supprimer le liquide personnalisé/code personnalisé à l'intérieur d'un élément existant

Étape 1 : Cliquez avec le bouton droit sur l'élément où le code personnalisé a été ajouté → sélectionnez Code personnalisé

Étape 2 : Supprimez le code à l'intérieur du champ CSS, Script.

Étape 3 : Cliquez à nouveau sur Enregistrer.