✓ Dans cet article, nous allons voir les étapes pour intégrer une création à votre modèle de page depuis l’éditeur de thème Shopify.
Après avoir apporté les modifications nécessaires à votre création dans Kehio Editor, dirigez-vous vers l'éditeur de thème de votre boutique Shopify pour intégrer la création à la page souhaitée.
Assurez-vous que les paramètres de la section intégration de Kehio Editor ont été correctement configurées, car elles établissent la connexion entre l'application Kehio Editor et votre thème Shopify. Une configuration adéquate garantit que la création s'affichera correctement sur votre site.
📖 En savoir plus sur la section intégration dans cet article.
Ajouter une section
Étape 1 : Ajouter une section dans votre thème
Accédez à l'éditeur de thème de votre boutique Shopify, cliquez sur "Ajouter une section", sélectionnez "Application", puis choisissez Kehio Editor.
Étape 2 : Connecter la création
Sélectionnez le numéro de la création que vous avez défini précédemment. Assurez-vous que le numéro correspond à la création que vous souhaitez afficher.
ℹ️ Notes importantes :
Utiliser toujours le bloc 1 pour une section pleine page : Si votre création occupe toute la largeur de la page, utilisez le bloc 1.
Blocs multiples pour sections composées : Utilisez les blocs uniquement lorsque vous avez deux créations différentes pour composer une section (une création à gauche et une création à droite). Le bloc 1 sera toujours à gauche et le bloc 2 à droite.
Ajouter deux créations dans une même section
Dans le bloc 1, sélectionnez votre première création.
Répétez l’opération pour le bloc 2 avec votre seconde création.
Vous pouvez gérer le pourcentage d’espace que chaque bloc occupe dans la section. En général, les blocs occupent chacun 50 % de l’espace.
ℹ️ Note : Note : Les marges, le padding et les gaps des blocs sont toujours gérés depuis Kehio Editor.
Ajouter une création dans le bloc information produit
Étape 1 : Bloc d'information produit
Allez à la section du bloc d'information de votre produit, cliquez sur "Ajouter un bloc" puis sélectionnez l'application "Creation Widget".
Étape 2 : Connecter la création
De la même manière que pour l'ajout de section, choisissez le numéro de la création que vous souhaitez faire apparaître pour ce produit.
Ajouter une couleur d’arrière-plan
Lorsque vous importez une création, si celle-ci possède une couleur d’arrière-plan, elle apparaîtra dans l'aperçu de Kehio Editor à titre indicatif. L'aperçu de la couleur d’arrière-plan dans Kehio Editor vous permet de visualiser la couleur pour faciliter le travail sur votre création en direct. Cependant, si vous souhaitez ajouter ou modifier la couleur d’arrière-plan de votre création, ces modifications devront être effectuées directement depuis l'éditeur de thème de votre boutique Shopify.
Voici comment procéder :
1- Copier la couleur : Si vous souhaitez conserver la même couleur d’arrière-plan que la création importée depuis nos boutiques démo:
Cliquez sur la couleur d’arrière-plan et copiez la valeur hexadécimale de la couleur.
2- Accéder à l’éditeur de thème Shopify :
Rendez-vous dans l’éditeur de thème de votre boutique Shopify.
3- Appliquer la couleur dans l’éditeur de thème :
Sélectionnez la section de votre création dans l'éditeur de thème.
Collez la couleur dans le champ prévu à cet effet.
Depuis l’éditeur, vous avez également la possibilité de créer un dégradé de couleurs pour l’arrière-plan.
Ajouter et modifier une bordure SVG
Avec Kehio Editor, vous avez la possibilité d’ajouter une bordure sur chaque section de votre thème, soit en haut, soit en bas de la section.
Ajouter une bordure sur le haut d’une section
Pour une section créée avec Kehio Editor :
Visualisez votre création dans votre thème, cliquez sur "Ajouter un bloc" et sélectionnez "SVG Border Top".
Pour une section par défaut de votre thème :
Cliquez sur "Ajouter une section" et sélectionnez l’extension d’application "SVG Border Top".Déplacez cette section au-dessus ou en dessous de votre section existante et utilisez la fonction "Crop" pour que la bordure s'insère correctement dans votre section.
Ajouter une bordure sur le bas d’une section
Pour une section créée avec Kehio Editor :
Visualisez votre création dans votre thème, cliquez sur "Ajouter un bloc" et sélectionnez "SVG Border Bottom".
Pour une section par défaut de votre thème :
Cliquez sur "Ajouter une section" et sélectionnez l’extension d’application "SVG Border Bottom".
Déplacez cette section au-dessus ou en dessous de votre section existante et utilisez la fonction "Crop" pour que la bordure s'insère correctement dans votre section.
ℹ️ Note :
Section créée avec Kehio Editor : Vous pouvez directement ajouter un bloc pour ajouter la bordure SVG dans la section de votre création.
Section par défaut de votre thème : Vous devez créer une nouvelle section et ajouter l'extension de la bordure, puis la placer au-dessus ou en dessous de votre section existante et utiliser si nécessaire la fonction "Crop" pour que la bordure s'intègre parfaitement dans votre section.
Modifier votre bordure SVG
Que ce soit pour l’ajout d’une bordure en haut ou en bas de section, les options de personnalisation sont identiques dans les deux extensions d’application :
Sélectionner un template par défaut ou importer une bordure personnalisée :
Vous pouvez choisir parmi les templates par défaut ou importer une bordure personnalisée proposée dans nos boutiques de démonstration ou réalisée par vos soins.
Si vous choisissez une bordure par défaut, vous pouvez modifier sa couleur pour la faire correspondre à la couleur de l’arrière-plan de votre section.
L'option de couleur d’arrière-plan de la bordure est nécessaire uniquement lorsque vous intégrez la bordure comme une section et non comme un bloc. Cette option vous permet d’adapter parfaitement la bordure à votre section dans certains cas.
Régler la largeur de la bordure :
Ajustez la largeur de la bordure pour une adaptation visuelle parfaite sur ordinateur, mobile et tablette. Par défaut, votre bordure est à 100% pour prendre la largeur totale de votre section. Vous ne pouvez pas réduire cette valeur en dessous de 100%, mais vous pouvez l’augmenter au-delà de 100% pour étirer votre bordure.
Ajuster la hauteur de la bordure :
Modifiez la hauteur de la bordure pour qu’elle s’adapte correctement sur ordinateur, mobile et tablette.
Adapter la position de votre bordure :
Modifiez la position de votre bordure sur ordinateur, mobile ou tablette. Cette option est utile lorsque vous avez une largeur de bordure supérieure à 100% et que vous souhaitez mettre en avant une zone spécifique de votre bordure. Vous pouvez ainsi adapter sa position sur le layout.
Adapter la bordure à l'intérieur de votre section :
Choisissez si votre bordure doit couper l’intérieur de votre section pour une meilleure adaptation. Cette option est particulièrement utilisée lorsque vous voulez ajouter une bordure à une section par défaut, comme la bannière de votre thème.
Animer votre bordure :
Activez l’animation de votre bordure et ajustez la vitesse de cette animation selon vos préférences.
Si vous avez besoin d'aide supplémentaire pour comprendre comment la parie intégration d'une création dans votre éditeur de thème , n'hésitez pas à nous contacter par e-mail ou par chat en direct.