Entraînez-vous à changer l'interface à l'aide de l'IA (7)

Dans cette section, nous utiliserons l'IA pour créer une mise en page simple pour l'interface de la page d'accueil. Si vous maîtrisez ces étapes de base, vous pourrez créer des blocs de contenu spécifiques tels que des ventes flash, des jeux, etc. grâce à l'IA.

Par: Minh Nguyen Aug 22, 2025 Guide d'utilisation de Khang Affiliate Suite 0 Comments

Entraînez-vous à changer l'interface à l'aide de l'IA (7)

Partie précédente

Partie suivante

Pratiquer les modifications d'interface avec l'aide de l'IA

Vous devez revoir et préparer :

Comment configurer la langue et la devise.
Comment utiliser Khang Scraper pour collecter des données de produits.
Compte IA activé (ChatGPT, Gemini…).

Je vais choisir Amazon comme site pour collecter des données car il propose de nombreuses langues. Par conséquent, vous devez changer la langue d'Amazon pour qu'elle corresponde aux paramètres de votre site web. Si vous ne trouvez pas la langue souhaitée, choisissez temporairement l'anglais pour la pratique. Nous allons nous entraîner avec le secteur de la mode féminine.

Conseil : Soyez patient et suivez les étapes jusqu'au bout, même si ce n'est pas le secteur d'activité que vous souhaitez.

Préparation

1. Créez 3 catégories telles que : Coats, Sweaters, Pants

Voici comment procéder :

Accédez à : /admin/catalog/categories/create.
Sur la page Add New Category, remplissez toutes les informations obligatoires (marquées d'une *).
Remarque : cochez Parent Category - Root (la catégorie créée sera une catégorie parente).

2. Scraper des produits et les importer dans la bonne catégorie

Choisissez un modèle de scraper pour les produits sur Amazon afin d'obtenir des données brutes.
Révisez l'article : Guide d'utilisation de base de Khang Scraper.
Et arrêtez-vous à l'étape 3 de cet article : Je vais vous guider plus loin sur la façon d'importer les produits dans la catégorie que vous souhaitez.
Accédez à /admin/scraper/import-setting dans le but de :
- Sélectionner la catégorie de produits à importer ;
- Configurer les balises méta selon une structure commune pour chaque produit.

Interface de la page de paramètres du scraper

Accédez à la page des données brutes : admin/scraper.
Sélectionnez les produits de la même catégorie et importez-les.

3. Images de bannière

Préparez 3 images de bannière à l'avance, taille 1920px x 700px (.jpeg, .webp) adaptées au secteur d'activité.

4. Créer un logo et un favicon

Accédez à /admin/settings/channels/edit/1 pour télécharger le logo (192px x 50px) et le favicon (16px x 16px).

Travailler avec les paramètres de thème

Étape 1 : Nous allons créer un nouveau thème, alors masquons temporairement tous les blocs de contenu actuels

Cliquez sur tout cocher, puis sélectionnez “Select Action > Change status > Inactive”.

Sélectionnez les produits de la même catégorie

Maintenant, vous sélectionnez Filter/ Status/Active -> Apply Filters : pour afficher uniquement les blocs actifs.

Ensuite, cliquez sur Admin/ Clear Cache pour effacer les anciennes données.

Page de données avec option d'importation

Étape 2 : Créer une mise en page pour la page d'accueil :

Si vous voulez que l'IA vous aide à concevoir, remplissez cette invite :

Copiez le contenu à l'intérieur :

                    Tâche :  
                    Concevoir la mise en page de la page d'accueil pour la catégorie "Mode féminine" sur Bagisto – section Thèmes. La palette de couleurs principale est blanc – rose.
                    Organiser et configurer uniquement les blocs disponibles dans les thèmes ; ne pas écrire de code d'interface sauf si c'est dans static_content.

                    CONTRAINTES IMPORTANTES (lire attentivement) :
                    1. Utiliser uniquement les Types suivants (écrire le nom exact) :
                    - product_carousel – Carrousel de produits horizontal.
                    - category_carousel – Carrousel de catégories horizontal.
                    - static_content – Contenu statique ; seul ce bloc est autorisé à contenir du HTML/CSS/JavaScript et des effets.
                    - image_carousel – Carrousel d'images, peut se lire automatiquement.
                    - footer_links – Groupe de liens de pied de page.
                    - services_content – Services/engagements dans le pied de page.
                    2. Ne PAS insérer ou décrire de HTML/CSS/JS pour tout Type autre que static_content.
                    3. Ne pas créer de nouveaux Types, ne pas supposer de fonctionnalités non disponibles dans les thèmes Bagisto.
                    4. Un ordre de tri (Sort Order) séquentiel de 1 à n est requis, et le Statut (Status) doit être Actif pour les blocs affichés.
                    5. Pour product_carousel/category_carousel : ne décrire que le groupe de produits/catégories à afficher (ex. : "Nouveautés", "Meilleures ventes", "Robes, Chemises, Pantalons..."), ne pas insérer de code.
                    6. Pour image_carousel : décrire le nombre de diapositives, le message pour chaque diapositive, et si elle se lit automatiquement.
                    7. Pour footer_links & services_content : lister le groupe de liens/services.
                    8. Chaque bloc doit avoir un nom d'affichage (Name) et un contenu détaillé adaptés au ton féminin blanc – rose.

                    SORTIE REQUISE – ÉCRIRE SELON LE TABLEAU SUIVANT (NE PAS AJOUTER DE NOUVELLES COLONNES) :

                    | Sort Order | Name (Nom du bloc) | Type (sélectionner un de la liste) | Contenu affiché (ne pas utiliser de code sauf si Type = static_content) | Effet (UNIQUEMENT pour static_content) | Status |
                    |---|---|---|---|---|---|

                    - Dans la colonne Contenu affiché :
                    - image_carousel : décrire les diapositives 1..n (message/image souhaité, lecture automatique : oui/non).
                    - category_carousel : lister les catégories à afficher.
                    - product_carousel : indiquer la collection/les critères de filtre (Nouveautés/Meilleures ventes/Soldes...).
                    - footer_links : lister le groupe de liens.
                    - services_content : lister 3–4 engagements/services.
                    - static_content : est autorisé à présenter du HTML/CSS/JS (décrire brièvement l'idée et l'effet dans la colonne "Effet").
                    - Dans la colonne Effet : ne remplir que si le Type = static_content (ex. : fondu en entrée, zoom au survol, texte dactylographié). Ne pas décrire d'effets pour les autres Types.

                    EXIGENCES DE STYLE :
                    - Ton blanc – rose doux, moderne, féminin ; privilégier les images claires, la typographie douce.
                    - Messages de vente concis et clairs : "Nouvelle collection", "Jusqu'à 40 % de réduction", "Livraison gratuite à partir de 500K+", etc.

                    RÉSULTAT :
                    Retourner un seul tableau listant de 8 à 12 blocs conformément au modèle et aux contraintes ci-dessus. Ne pas inclure de code source en dehors du contenu de static_content.

Avec une telle invite, voici le résultat renvoyé par Gemini AI (2.5 flash) :

Voici la mise en page de la page d'accueil en anglais pour le secteur "Mode féminine" sur les thèmes Bagisto, en conservant le schéma de couleurs blanc-rose et les contraintes énoncées.

Sort Order	Name (Block Name)	Type (select one from the list)	Display Content (do not use code unless Type = static_content)	Effect (ONLY for static_content)	Status
1	NEW COLLECTION	image_carousel	Slide 1: Title "New Collection - Effortless Elegance", image of a model in a pastel pink dress. Slide 2: Title "20% Off on New Arrivals", image of accessories like handbags and heels. Slide 3: Title "Find Your Unique Style", image of a joyful, confident model. Auto-play: Yes		Active
2	WELCOME TO OUR WORLD	static_content	`<div style="text-align:center; padding: 20px 0; background-color: #FFF0F5; color: #333;"><h2 style="font-family: 'Playfair Display', serif; font-weight: 700; color: #FF69B4; margin-bottom: 10px;">HELLO GORGEOUS!</h2><p style="font-size: 16px; line-height: 1.6;">Welcome to our world of femininity and charm. Let us help you refresh your wardrobe with our latest designs.</p></div>`	Fade-in effect for the entire block.	Active
3	LATEST PRODUCTS	product_carousel	Displays products from the "New Arrivals" collection.		Active
4	POPULAR CATEGORIES	category_carousel	Dresses; Blouses; Skirts; Culottes; Jackets		Active
5	SPECIAL OFFER	static_content	`<div style="text-align:center; padding: 40px 0; background-color: #F8F8FF; color: #333;"><h3 style="font-family: 'Playfair Display', serif; color: #FF69B4;">SALE UP TO 50% OFF</h3><p style="font-size: 18px; font-weight: 600; text-transform: uppercase;">Selected Items - End of Season Sale.</p></div>`	Subtle zoom-on-hover effect.	Active
6	BEST SELLERS	product_carousel	Displays "Best Seller" products.		Active
7	QUOTE OF THE DAY	static_content	`<div style="text-align:center; padding: 30px 0; background-color: #FFF0F5; color: #333;"><p style="font-style: italic; font-size: 16px; font-weight: 400;">"Fashion is what you buy. Style is what you do with it."</p><span style="color: #FF69B4; font-weight: 600;">- Unkown -</span></div>`		Active
8	OUR COMMITMENTS	services_content	Express Delivery; 7-Day Free Returns; 24/7 Online Support; Flexible Payment Options		Active
9	INFORMATION & SUPPORT	footer_links	About Us; Return Policy; How to Order; Contact Us		Active
10	FOLLOW US	static_content	`<div style="text-align: center; padding: 20px 0; background-color: #F8F8FF;"><p style="font-size: 14px; margin-bottom: 10px;">Connect with us on social media</p><div style="font-size: 24px; color: #FF69B4;"><a href="#" style="margin: 0 10px; color: inherit;">🌸</a><a href="#" style="margin: 0 10px; color: inherit;">🎀</a><a href="#" style="margin: 0 10px; color: inherit;">💖</a></div></div>`	Subtle color change on hover for social icons.	Active
11	FOOTER LEGAL	footer_links	Terms of Service; Privacy Policy; Copyrights		Active
12	CONTACT INFO	services_content	Address: 123 Fashion St., Ho Chi Minh City; Hotline: 0123.456.789; Email: contact@fashionista.vn		Active

Étape 3 : Créer de nouveaux blocs de données :

Comme mentionné dans la partie précédente, dans les paramètres/thème, nous avons 6 types différents. Je vais donc vous guider pour saisir les 6 blocs de contenu correspondants dans ces 6 types. Vous pouvez faire de même pour les blocs restants.

Étapes pour créer des blocs de contenu

Bloc 1

Bloc 2

Bloc 3

Bloc 4

Bloc 5

Bloc 6

Bloc 1 - NEW COLLECTION

Type: Image Carousel

Objectif : Afficher un carrousel d'images de produits et de promotions.

Cliquez sur Create Theme, remplissez les informations et appuyez sur Save.

Le système passera à Edit Theme. Saisissez successivement le contenu des 3 images et sélectionnez Status comme Active.

Après avoir ajouté tous les blocs de contenu, n'oubliez pas de "Clear Cache" comme indiqué ci-dessus. Et ensuite, regardez le résultat.

Remarque : En cas d'erreur d'interface - les blocs de contenu ne s'affichent pas complètement, veuillez changer la position du Type : Footer Links à la dernière position.

Partager le lien:

Tags:

Entraînez-vous à changer l'interface à l'aide de l'IA (7)

Entraînez-vous à changer l'interface à l'aide de l'IA (7)