Practica el cambio de interfaz con la ayuda de IA (7)
En esta sección, usaremos IA para crear un diseño sencillo para la interfaz de la página de inicio. Si dominas estos pasos básicos, podrás crear bloques de contenido especiales, como ofertas flash, juegos, etc., mediante IA.
Practica el cambio de interfaz con la ayuda de IA (7)
Practicando cambios de interfaz con la ayuda de la IA
Necesitas revisar y preparar:
- Cómo configurar el idioma y la moneda.
- Cómo usar Khang Scraper para recopilar datos de productos.
- Una cuenta de IA activada (ChatGPT, Gemini...).
Elegiré Amazon como el sitio para recopilar datos porque tiene muchos idiomas para elegir. Por lo tanto, debes cambiar el idioma de Amazon para que coincida con la configuración de tu sitio web. Si no puedes encontrar el idioma deseado, elige temporalmente el inglés para practicar. Practicaremos con la categoría de moda femenina.
Consejo: Sé paciente y continúa hasta el final, incluso si esta no es la categoría de producto que deseas.
Preparación
1. Crea 3 categorías como: Abrigos, Suéteres, Pantalones
Cómo hacerlo:
- Accede a: /admin/catalog/categories/create.
- En la página Add New Category, completa toda la información requerida (marcada con *).
- Nota: marca Parent Category - Root (la categoría creada será una categoría principal).
2. Recopila productos e impórtalos a la categoría correcta
- Elige una plantilla para recopilar productos en Amazon y obtener datos sin procesar.
- Revisa el artículo: Guía básica de usuario de Khang Scraper.
- Y detente en el paso 3 de este artículo: a continuación, te guiaré sobre cómo importar productos a la categoría que deseas.
- Accede a /admin/scraper/import-setting con el propósito de:
- Seleccionar la categoría de producto a importar;
- Configurar metaetiquetas según una estructura común para cada producto.
- Accede a la página de datos sin procesar: admin/scraper.
- Selecciona productos de la misma categoría e impórtalos.
3. Imágenes de banner
- Prepara 3 imágenes de banner de antemano, tamaño 1920px x 700px (.jpeg, .webp) adecuadas para la categoría de producto.
4. Crear logo y favicon
- Accede a /admin/settings/channels/edit/1 para subir el logo (192px x 50px) y el favicon (16px x 16px).
Trabajando con la configuración del tema
Paso 1: Crearemos un nuevo tema, así que ocultemos temporalmente todos los bloques de contenido actuales
- Haz clic en check all y luego selecciona “Select Action > Change status > Inactive”.
- Ahora selecciona Filter/ Status/Active -> Apply Filters: para mostrar solo los bloques activos.
- Luego, haz clic en Admin/ Clear Cache para borrar los datos antiguos.
Paso 2: Crear un diseño para la página de inicio:
Si quieres que la IA te ayude a diseñar, introduce esta instrucción:
Con esta instrucción, aquí está el resultado de Gemini AI (2.5 flash):
Aquí está el diseño de la página de inicio en español para la categoría "Moda femenina" en los Temas de Bagisto, manteniendo el esquema de color blanco-rosa y las restricciones establecidas.
| Sort Order | Name (Nombre del Bloque) | Type (selecciona uno de la lista) | Contenido de visualización (no uses código a menos que el Tipo sea = static_content) | Efecto (SOLO para static_content) | Estado |
|---|---|---|---|---|---|
| 1 | NUEVA COLECCIÓN | image_carousel | Diapositiva 1: Título "Nueva Colección - Elegancia sin Esfuerzo", imagen de una modelo con un vestido rosa pastel. Diapositiva 2: Título "20% de Descuento en Novedades", imagen de accesorios como bolsos y tacones. Diapositiva 3: Título "Encuentra Tu Estilo Único", imagen de una modelo alegre y segura de sí misma. Reproducción automática: Sí |
Active | |
| 2 | BIENVENIDA A NUESTRO MUNDO | static_content |
|
Efecto de fundido de entrada para todo el bloque. | Active |
| 3 | ÚLTIMOS PRODUCTOS | product_carousel | Muestra productos de la colección "Nuevos Productos". | Active | |
| 4 | CATEGORÍAS POPULARES | category_carousel | Vestidos; Blusas; Faldas; Culottes; Chaquetas | Active | |
| 5 | OFERTA ESPECIAL | static_content |
|
Efecto sutil de zoom al pasar el ratón. | Active |
| 6 | LOS MÁS VENDIDOS | product_carousel | Muestra productos "Más vendidos". | Active | |
| 7 | FRASE DEL DÍA | static_content |
|
Active | |
| 8 | NUESTROS COMPROMISOS | services_content | Envío exprés; Devoluciones gratuitas en 7 días; Soporte en línea 24/7; Opciones de pago flexibles | Active | |
| 9 | INFORMACIÓN Y SOPORTE | footer_links | Sobre nosotros; Política de devoluciones; Cómo hacer un pedido; Contáctanos | Active | |
| 10 | SÍGUENOS | static_content |
|
Cambio de color sutil al pasar el ratón sobre los iconos sociales. | Active |
| 11 | INFORMACIÓN LEGAL DEL PIE DE PÁGINA | footer_links | Términos de servicio; Política de privacidad; Derechos de autor | Active | |
| 12 | INFORMACIÓN DE CONTACTO | services_content | Dirección: 123 Fashion St., Ciudad Ho Chi Minh; Línea directa: 0123.456.789; Correo electrónico: contact@fashionista.vn | Active |
Paso 3: Crear nuevos bloques de datos:
Como se mencionó en la parte anterior, en la configuración/tema tenemos 6 tipos diferentes. Así que te guiaré para que introduzcas los 6 bloques de contenido correspondientes a estos 6 tipos. Puedes hacer lo mismo con el resto de los bloques.
Pasos para crear bloques de contenido
Bloque 1 - NUEVA COLECCIÓN
Tipo: Carrusel de imágenes
Objetivo: Mostrar un carrusel de productos y promociones.
Haz clic en Create Theme, completa la información y pulsa Save.
El sistema cambiará a Edit Theme. Introduce el contenido para las 3 imágenes en orden y establece el Status como Active.
Después de añadir todos los bloques de contenido, recuerda "borrar la caché" (Clear Cache) como se indica arriba. Y luego comprueba los resultados.
Nota: En caso de un error de diseño (los bloques de contenido no se muestran por completo), cambia la posición de la Tipo: Enlaces de pie de página a la última posición.
Deja un comentario