Practice changing the interface with the help of AI (7)

In this section, we will use AI to help create a simple layout for the homepage interface. If you master these basic steps, you can completely create special content blocks such as: Flash Sale, Game... through AI.

By: Minh Nguyen Aug 22, 2025 Khang Affiliate Suite User Guide 0 Comments

Practice changing the interface with the help of AI (7)

Previous part

Next part

Practicing interface changes with AI support

You need to review and prepare:

How to set up language and currency.
How to use Khang Scraper to collect product data.
An activated AI account (ChatGPT, Gemini…).

I will choose Amazon as the site to collect data because it has many languages to choose from. Therefore, you need to change the Amazon language to match your website's settings. If you can't find the desired language, temporarily choose English for practice. We will practice with the women's fashion category.

Advice: Be patient and follow through until completion, even if this is not the product category you want.

Preparation

1. Create 3 categories such as: Coats, Sweaters, Pants

How to do it:

Access: /admin/catalog/categories/create.
In the Add New Category page, fill in all required information (marked with *).
Note: check Parent Category - Root (the created category will be a parent category).

2. Scrape products and import them into the correct category

Choose a template to scrape products on Amazon to get raw data.
Review the article: Basic Khang Scraper user guide.
And stop at step 3 of this article: I will continue to guide you on how to import products into the category you want.
Access /admin/scraper/import-setting for the purpose of:
- Selecting the product category to import;
- Setting up meta tags according to a common structure for each product.

Access the raw data page: admin/scraper.
Select products from the same category and import.

3. Banner images

Prepare 3 banner images in advance, size 1920px x 700px (.jpeg, .webp) suitable for the product category.

4. Create logo and favicon

Access /admin/settings/channels/edit/1 to upload the logo (192px x 50px) and favicon (16px x 16px).

Working with Theme Settings

Step 1: We will create a new theme, so let's temporarily hide all current content blocks

Click check all, then select “Select Action > Change status > Inactive”.

Now you select Filter/ Status/Active -> Apply Filters : to show only active blocks.

Then, click Admin/ Clear Cache to clear old data.

Step 2: Create a homepage layout:

If you want AI to help you design, fill in this prompt:

Copy the content inside:

                    Task:  
                    Design the layout of the homepage for the “Women's fashion” category on Bagisto – Themes section. Main color scheme white – pink.  
                    Only arrange and configure available blocks in Themes, do not write interface code unless it's within static_content.

                    IMPORTANT CONSTRAINTS (read carefully):
                    1. Only use the following Types (write the exact name):
                    - product_carousel – Horizontal product slider.
                    - category_carousel – Horizontal category slider.
                    - static_content – Static content; only this block is allowed to have HTML/CSS/JavaScript and effects.
                    - image_carousel – Image slider, can auto-play.
                    - footer_links – Footer link group.
                    - services_content – Services/commitments in the footer.
                    2. Absolutely DO NOT insert or describe HTML/CSS/JS for any Type other than static_content.
                    3. Do not create new Types, do not assume functionality not available in Bagisto Themes.
                    4. A sequential Sort Order from 1 -> n is required, and Status = Active for displayed blocks.
                    5. For product_carousel/category_carousel: only describe the product/category group to be displayed (e.g., “New Arrivals”, “Best Seller”, “Dresses, Shirts, Pants...”), do not insert code.
                    6. For image_carousel: describe the number of slides, the message for each slide, and whether it auto-plays.
                    7. For footer_links & services_content: list the link/service group.
                    8. Each block must have a display name (Name) and detailed content suitable for the feminine white – pink tone.

                    REQUIRED OUTPUT – WRITE ACCORDING TO THE FOLLOWING TABLE (DO NOT ADD NEW COLUMNS):

                    | 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 |
                    |---|---|---|---|---|---|

                    - In the Display Content column:
                    - image_carousel: describe slides 1..n (desired message/image, auto-play: yes/no).  
                    - category_carousel: list categories to display.  
                    - product_carousel: state the collection/filter criteria (New Arrivals/Best Seller/Sale…).  
                    - footer_links: list link group.  
                    - services_content: list 3–4 commitments/services.  
                    - static_content: is allowed to present HTML/CSS/JS (briefly describe the idea & effect in the “Effect” column).
                    - In the Effect column: only fill in when Type = static_content (e.g., fade-in, zoom on hover, typing text). Do not describe effects for other Types.

                    STYLE REQUIREMENT:
                    - Gentle, modern, feminine white – pink tone; prioritize light images, soft typography.
                    - Concise, clear sales messages: “New Collection”, “Sale up to 40%”, “Free shipping 500K+”, etc.

                    RESULT:  
                    Return a single table listing 8–12 blocks according to the template and constraints above. Do not include source code other than the content of static_content.

With such a prompt, here is the result from Gemini AI (2.5 flash):

Here is the English homepage layout for the "Women's Fashion" category on Bagisto Themes, maintaining the white-pink color scheme and the stated constraints.

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

Step 3: Create new data blocks:

As mentioned in the previous part, in settings/theme we have 6 different types. So I will guide you to enter the corresponding 6 content blocks into these 6 types. You can do the same for the remaining blocks.

Steps to create content blocks

Block 1

Block 2

Block 3

Block 4

Block 5

Block 6

Block 1 - NEW COLLECTION

Type: Image Carousel

Objective: Display a slider for products and promotions.

Click Create Theme, fill in the information, and press Save.

The system will switch to Edit Theme. Enter content for the 3 images in order and select Status as Active.

After adding all the content blocks, remember to "Clear Cache" as instructed above. And then see the results.

Note: In case of a layout error - incomplete content blocks are displayed, please change the position of the Type: Footer Links to the last position.

Share Link:

Tags:

Practice changing the interface with the help of AI (7)

Practice changing the interface with the help of AI (7)