Capítulo 6 de 11
SEO, idiomas y estilo
Que Google te encuentre, hablar varios idiomas y fijar los colores y las letras.
En esta página
- El título y la descripción que ve Google de cada página
- La nota de tu página y qué mejorar
- Los enlaces entre tus páginas
- Los datos estructurados para Google (y para las IA)
- Los valores de SEO por defecto de toda tu web
- El mapa del sitio
- Recomendaciones de la IA para el aspecto de tu web
- Los colores de tu web
- Las letras de tu web
- Los idiomas de tu web
- Añadir un idioma nuevo, paso a paso
- Traducir una página
- Medir visitas con Google Tag Manager
- Tus campañas de Google Ads
- Las visitas de tu web
- Elegir qué parte de tu tienda estás diseñando
- Las pantallas de tu tienda que puedes diseñar
Esta parte del panel es donde consigues que tu web se encuentre en Google (y en los buscadores que usan inteligencia artificial), que se pueda leer en varios idiomas, y donde decides de un solo golpe qué colores y letras usa toda tu web.
Casi todas las pantallas de esta área viven dentro del modo Avanzado. Verás un interruptor "Fácil / Avanzado" arriba del editor: si no lo tienes en Avanzado, no vas a encontrar la mayoría de lo que se explica aquí — es la causa número uno de "no lo encuentro". Las dos excepciones son el diseño de tu tienda (pantallas 16 y 17 de esta guía), a las que también se llega en modo Fácil desde el menú de la tienda.
Una nota sobre "GEO" o el posicionamiento en buscadores con inteligencia artificial: no hay un botón que diga "GEO" en el panel. Lo que hoy existe con ese objetivo son dos herramientas que ya tienes en el icono de SEO: la puntuación y el análisis de cada página, y los "datos estructurados" (más abajo, pantalla 4). Cuanto mejor puntúen tus páginas y más datos estructurados tengan, más fácil se lo pones a ChatGPT, Gemini o al propio Google a la hora de entender tu negocio y citarte cuando alguien pregunta por algo relacionado. Es una de las banderas del producto: no solo se trata de aparecer en una lista de enlaces azules, sino de que una IA pueda leer tu web, entenderla y recomendarte.
El título y la descripción que ve Google de cada página
Para qué sirve. Cada página de tu web tiene un título y una descripción que son lo primero que lee alguien en los resultados de Google (o en una respuesta de una IA). Aquí es donde los escribes.
Cómo llegar. Entra en el editor de tu proyecto, activa el modo Avanzado arriba, y pulsa el icono de la lupa (SEO) en la barra de la izquierda. Se abre la pestaña Metadatos.
Qué hay en pantalla. El título y la descripción tienen un contador de caracteres al lado (por ejemplo "49/60"): ese número no es decorativo, es la longitud que Google suele mostrar entera; pasarte hace que te lo corte con puntos suspensivos. También hay un botón Regenerar SEO con IA que te propone título y descripción solo, un campo de "Palabras clave", y una zona avanzada con el tipo de "Twitter Card", la imagen que se ve al compartir el enlace (Imagen OG) y la URL canónica.


Un ejemplo, paso a paso. Quieres que tu página de Contacto salga mejor en Google. Entras en Avanzado → icono SEO → pestaña Metadatos con la página de Contacto seleccionada. En Título escribes algo como "Contacto | [Nombre de tu negocio]" y en Descripción, dos frases con lo que la gente necesita saber para llamarte o escribirte (horario, ciudad, qué resuelves). Miras el contador: si está en rojo, acórtalo. Guarda. Ya está — no hace falta publicar para verlo reflejado en el análisis de la siguiente pantalla.
Cuidado con… El botón "Regenerar SEO con IA" sobrescribe lo que tengas escrito en esa página. Si ya lo habías afinado a mano, guarda una copia del texto en otro sitio antes de pulsarlo.
La nota de tu página y qué mejorar
Para qué sirve. Te pone una nota del 0 al 100 a cada página y te dice, punto por punto, qué le falta para subirla. Es el sitio al que vuelves después de tocar el título o la descripción para comprobar si has mejorado algo.
Cómo llegar. Con el panel de SEO abierto (modo Avanzado), pulsa la pestaña Análisis.
Qué hay en pantalla. Un círculo grande con la puntuación SEO (por ejemplo, 56). Debajo, la legibilidad de tu texto con una fórmula pensada para español (Fernández-Huerta) — cuanto más alta, más fácil se lee. Y una lista desplegable "Estructura SEO" con puntos de colores: verde es que está bien, rojo que falta, y cada línea se puede abrir para ver el detalle. El campo "Palabra clave principal" es el que más cambia el resultado: si lo dejas vacío, el análisis solo mira lo básico (título, descripción, encabezados); si escribes la palabra por la que quieres que te encuentren, el análisis añade comprobaciones específicas sobre esa palabra.


Un ejemplo, paso a paso. Sigues en la página de Inicio y quieres subir la nota. Abres Análisis, escribes en "Palabra clave principal" lo que de verdad busca tu cliente (por ejemplo "pan de masa madre en Madrid"). Miras la lista de Estructura SEO: si "Meta descripción" está en rojo, vuelves a la pestaña Metadatos, la completas y regresas a mirar si el punto se ha puesto verde.
Cuidado con… La puntuación no es un examen que apruebas una vez y ya está: cambia cada vez que tocas el contenido de la página. No te obsesiones con llegar a 100; una nota alta en legibilidad y sin puntos en rojo en la estructura ya es una página bien trabajada.
Los enlaces entre tus páginas
Para qué sirve. Te enseña qué páginas de tu web enlazan entre sí y, sobre todo, cuáles se han quedado sin ningún enlace que lleve hasta ellas — esas páginas "huérfanas" a las que solo se llega escribiendo la dirección a mano, y que a Google le cuesta mucho más encontrar.
Cómo llegar. Panel de SEO (Avanzado) → pestaña Enlaces.
Qué hay en pantalla. Dos vistas con pestañas propias: Página actual (los enlaces solo de la página que tienes abierta) y Vista global (todo el sitio de un vistazo). En la vista global verás tres números — páginas, enlaces y un promedio — y, lo más útil, la lista de Páginas huérfanas con un aviso en amarillo.


Un ejemplo, paso a paso. Ves en la Vista global que "Nuestros panes" aparece como huérfana. Vas a tu página de Inicio (o al menú), añades una frase con un enlace de texto hacia "Nuestros panes" ("descubre nuestra selección de panes artesanos"), guardas, y vuelves a la pestaña Enlaces para comprobar que ha desaparecido de la lista de huérfanas.
Cuidado con… Esta pantalla no crea enlaces por ti, solo te avisa de que faltan; tienes que añadirlos a mano desde el contenido de la página (un botón, un menú, un enlace de texto).
Los datos estructurados para Google (y para las IA)
Para qué sirve. Es la herramienta más directamente ligada a que los buscadores con inteligencia artificial entiendan tu negocio, no solo tu texto: aquí le dices de forma explícita a Google (y a herramientas como ChatGPT o Gemini cuando rastrean tu web) qué es tu página — un negocio local con horario y dirección, una ficha de producto con su precio, una lista de preguntas frecuentes — en un formato que las máquinas leen sin ambigüedad. Es lo más parecido que tiene hoy el panel a un "SEO para IA".
Cómo llegar. Panel de SEO (Avanzado) → pestaña Schema.
Qué hay en pantalla. Si la página no tiene nada configurado, verás "No se encontraron datos estructurados en esta página". El botón Agregar Schema abre un desplegable con los tipos disponibles: FAQPage (preguntas frecuentes), Organization, LocalBusiness (negocio con dirección y horario), BreadcrumbList, Product, Service, Article, WebSite. Puedes rellenarlo a mano (pestaña "Manual (JSON)") o dejar que la IA lo genere describiéndole la página.


Un ejemplo, paso a paso. Tu negocio tiene dirección física y horario, y quieres que aparezca bien en Google Maps y que una IA sepa dónde estás y cuándo abres. En la pestaña Schema pulsas "Agregar Schema", eliges LocalBusiness en el desplegable, escribes en "Instrucciones adicionales" algo como "panadería en Calle del Horno 12, Madrid, abierta de 7:00 a 20:30" y pulsas Generar con IA. Revisa el resultado antes de guardar: la IA propone los campos, pero los datos (dirección, teléfono) tienen que ser exactos.
Cuidado con… Un dato estructurado mal puesto (una dirección o un horario que no coincide con la realidad) puede confundir más que ayudar — Google y las IA se lo toman como un dato fiable, así que revísalo con la misma atención que el texto de la propia página.
Los valores de SEO por defecto de toda tu web
Para qué sirve. En vez de repetir lo mismo en cada página, aquí defines lo que se aplica automáticamente a todas las que no tengan su propio valor: el sufijo que se añade al final de cada título, el nombre del sitio que aparece al compartir un enlace, y el tipo de tarjeta que se ve en Twitter/X.
Cómo llegar. Panel de SEO (Avanzado) → pestaña Valores (la última, puede quedar oculta a la derecha si la ventana es estrecha — desplázate con las flechas de las pestañas).
Qué hay en pantalla. Un aviso morado te recuerda que "estos valores se aplican a todas las páginas si no se sobrescriben a nivel de página" — es decir, lo que pongas aquí es el respaldo, no lo que manda si una página concreta ya tiene su propio título. Los campos son: Sufijo del título, Tipo Open Graph, Nombre del sitio (OG) y Twitter Card por defecto.


Un ejemplo, paso a paso. Quieres que todas tus páginas terminen con el nombre de tu negocio en el título, sin tener que escribirlo cien veces. En Sufijo del título escribes "| Panadería La Espiga" y guardas. A partir de ahí, cualquier página nueva que no lleve su propio sufijo lo heredará de aquí.
Cuidado con… Si una página ya tiene un título completo escrito a mano en la pestaña Metadatos (pantalla 1), el sufijo de aquí no se le añade encima — los valores por defecto solo rellenan huecos, no se suman a lo que ya existe.
El mapa del sitio
Para qué sirve. El mapa del sitio (o "sitemap") es un listado técnico de todas tus páginas que le entregas a Google para que las rastree más rápido y no se le olvide ninguna. Aquí lo generas y lo revisas sin tener que tocar nada a mano.
Cómo llegar. Panel de SEO (Avanzado) → pestaña Sitemap.
Qué hay en pantalla. Tres botones arriba: Guardar, Regenerar y Ver XML. Debajo, tres pestañas: Entradas (lo que se ha generado automáticamente), URLs personalizadas (para añadir direcciones que quieras incluir a mano, por ejemplo si tienes contenido fuera del propio editor) y Excluidas (páginas que no quieres que aparezcan en el mapa, como un borrador).


Un ejemplo, paso a paso. Has añadido páginas nuevas a tu web y quieres asegurarte de que Google se entera. Abres la pestaña Sitemap y pulsas Regenerar: esto reconstruye la lista de entradas con las páginas actuales de tu sitio. Con Ver XML puedes comprobar el resultado tal cual lo vería Google.
Cuidado con… Al abrir esta pestaña puede aparecerte el aviso en rojo "Error al cargar el sitemap" nada más entrar. Es un fallo conocido que estamos revisando; el resto de la pantalla — Guardar, Regenerar, Ver XML — sigue funcionando con normalidad, solo falla la lista de "Entradas" al cargar sola.
Recomendaciones de la IA para el aspecto de tu web
Para qué sirve. Es el punto de partida de la guía de estilos: le describes tu negocio a la inteligencia artificial y ella te propone colores y letras que encajan, en vez de tener que elegirlos tú desde cero.
Cómo llegar. En el editor, modo Avanzado, pulsa el icono de la paleta (Estilos) en la barra de la izquierda. Se abre en la pestaña IA.
Qué hay en pantalla. Arriba, un resumen de tus Estilos Actuales: los cinco colores y las dos fuentes (títulos y texto) que usa hoy tu web. El botón Aplicar guía de estilos a esta página vuelca esos estilos sobre la página que tienes abierta — con una casilla aparte "Aplicar también a otros idiomas" si tu web tiene más de uno. Más abajo, el cuadro Describe tu negocio o sitio web, unos chips de "Inspiraciones rápidas" (Cafetería artesanal, Startup tecnológica…) que rellenan el cuadro por ti, y el botón Generar con IA.


Un ejemplo, paso a paso. Quieres un aspecto que transmita "panadería de barrio, cálida y artesanal". Escribes en el cuadro algo como "Panadería de barrio con ambiente cálido y artesanal, colores tierra y tipografía con carácter" y pulsas Generar con IA. La IA te propone una paleta y unas fuentes; si te convencen, las aplicas desde las pestañas Colores y Tipografía (pantallas 8 y 9) o con el botón "Aplicar guía de estilos a esta página".
Cuidado con… Generar con IA gasta créditos de tu plan cada vez que lo pulsas — piensa bien la descripción antes de lanzarlo en vez de ir probando por prueba y error.
Los colores de tu web
Para qué sirve. Cambia de una sola vez los colores de toda tu web: el color principal de los botones, el secundario, y las variantes clara y oscura que se usan en fondos y textos.
Cómo llegar. Panel de Estilos (Avanzado) → pestaña Colores.
Qué hay en pantalla. Un recuadro para Extraer colores de imagen: subes tu logo (o cualquier imagen de tu marca) y la plataforma saca de ahí una paleta lista para aplicar. Debajo, los campos Primario, Secundario, Claro y Oscuro, cada uno con su cuadradito de color y su valor en hexadecimal (el código de seis letras y números, como #B5651D).



Un ejemplo, paso a paso. Tienes tu logo en un archivo y quieres que los colores de tu web combinen con él. En la pestaña Colores, arrastras el logo al recuadro "Extraer colores de imagen". La plataforma te propone una paleta a partir de la imagen: revisa que el resultado tenga contraste suficiente (si tu logo es muy claro o muy plano de color, la paleta extraída puede salir igual de plana, como ves en la segunda captura) y ajusta a mano el color que no te convenza pulsando su cuadradito.
Cuidado con… Aquí se mezcla con una de las tres trampas conocidas de esta área: hay un archivo interno que decide, en último lugar, qué colores se ven de verdad en tu web publicada. Si cambias un color aquí y no ves el cambio reflejado en algún sitio muy concreto de tu web, no es cosa tuya — lo explicamos con detalle al final de esta sección, en el aviso general de "Cuidado con la guía de estilos".
Las letras de tu web
Para qué sirve. Igual que los colores, pero con la tipografía: qué letra usan los títulos, cuál el texto normal, de qué tamaño parte todo, y te permite subir tu propia fuente si tu marca tiene una.
Cómo llegar. Panel de Estilos (Avanzado) → pestaña Tipografía.
Qué hay en pantalla. Dos desplegables, Fuente para Títulos y Fuente para Texto, con las fuentes de Google disponibles (marcadas como "System" o "Google" según si son del sistema o hay que descargarlas). Un selector Tamaño Base — el tamaño de partida del texto normal, del que escalan proporcionalmente el resto de tamaños de tu web. Debajo, una Vista previa en vivo con un título y un párrafo de ejemplo. Y, más abajo, Fuentes Personalizadas, donde puedes subir tu propio archivo de letra (formato .woff2 o .ttf) si tu marca tiene una tipografía propia que no está en el catálogo de Google.




Un ejemplo, paso a paso. Tu marca tiene un rótulo con una tipografía especial y quieres usarla en los títulos de tu web. Bajas hasta "Fuentes Personalizadas" y arrastras el archivo .woff2 al recuadro. El panel te propone un nombre a partir del nombre del archivo (puedes cambiarlo) y te pide el peso — normalmente "400 - Regular" si no sabes cuál es. Pulsas Subir Fuente. Cuando termina, esa fuente aparece ya disponible para elegirla en el desplegable "Fuente para Títulos".
Cuidado con… Esta es la pantalla donde más se nota la trampa más seria de las tres: si más tarde pulsas "Aplicar guía de estilos a esta página" desde la pestaña IA (pantalla 7), o regeneras la guía de estilos, tu fuente propia puede desaparecer de la lista sin previo aviso — y, si eso pasa, no hay botón para deshacerlo: ni siquiera restaurando una copia de tus ajustes anteriores vuelve a aparecer la fuente. La única forma de recuperarla es subir el archivo otra vez desde cero, aquí mismo. Si tienes una fuente de marca subida, evita aplicar recomendaciones de la IA o regenerar la guía sin pensarlo dos veces.
Los idiomas de tu web
Para qué sirve. Activa y gobierna las distintas versiones de idioma de tu web: cuántos idiomas tienes, cuál es el principal, y cómo se reflejan en la dirección (URL) de cada página.
Cómo llegar. En el editor, modo Avanzado, pulsa el icono de idiomas (una "A" con acento) en la barra de la izquierda.
Qué hay en pantalla. Un interruptor Multi-idioma arriba: si está apagado, tu web solo existe en un idioma y el resto de esta pantalla queda vacía. Con él encendido, verás la Estrategia de URLs — cómo se distinguen los idiomas en la dirección de tu web, con tres formas a elegir (lo explicamos en el ejemplo) — y la lista de Idiomas activos, cada uno con cuántas páginas tiene ya traducidas y cuál es el "Principal" (el idioma de partida, marcado con una estrella). Abajo, Acciones de IA: traducir páginas, añadir el selector de idioma visible en la web, y volver a detectar las etiquetas técnicas que ayudan a Google a distinguir cada versión.


Un ejemplo, paso a paso. Quieres saber por qué tu web en inglés está vacía aunque el idioma ya aparece en la lista. Entras en el icono de Idiomas: ves "English — 0 página(s)" con una barra de progreso en 0/7. Eso significa que el idioma está dado de alta pero ninguna página se ha traducido todavía — el siguiente paso es ir a "Traducir páginas con IA" (pantalla 12) para que empiecen a aparecer.
Cuidado con… Cambiar la Estrategia de URLs después de tener páginas publicadas cambia las direcciones de todas ellas de golpe. Si ya has compartido enlaces o los tienes indexados en Google, piénsalo antes de tocarlo — no es algo que se deshace con un clic.
Añadir un idioma nuevo, paso a paso
Para qué sirve. Es el asistente que te guía para dar de alta un idioma nuevo en tu web sin tener que configurar nada suelto por tu cuenta.
Cómo llegar. Panel de Idiomas (Avanzado) → pulsa el interruptor Multi-idioma (si lo estás activando por primera vez) o el botón de añadir idioma si ya tienes al menos uno.
Qué hay en pantalla. Un asistente de tres pasos, con puntos arriba a la derecha que marcan en cuál estás.



Un ejemplo, paso a paso. Quieres añadir francés a tu web. Pulsas para añadir un idioma nuevo: en el Paso 1 confirmas que tu web está hoy en español (o dejas que la IA lo detecte); en el Paso 2 confirmas que tus páginas actuales se etiquetan como español; en el Paso 3 eliges Français de la lista y pulsas Finalizar. A partir de ahí, francés aparece en la lista de idiomas (pantalla 10) con 0 páginas, listo para que empieces a traducir.
Cuidado con… Puedes saltarte el asistente con "Configurar después" si no tienes claro el idioma de destino todavía — no hace falta terminarlo del tirón.
Traducir una página
Para qué sirve. Traduce automáticamente el contenido de una página concreta al idioma que elijas, sin que tengas que copiar y pegar texto.
Cómo llegar. En la lista de Páginas, abre el menú de una página (los tres puntos o el icono de traducción junto a ella) y pulsa Traducir; también puedes lanzarlo desde el panel de Idiomas.
Qué hay en pantalla. Una ventana Traducir con IA que confirma qué página vas a traducir y te deja elegir el idioma de destino entre los que tengas configurados. Debajo, un resumen de lo que va a hacer la IA: extraer los textos de la página, traducirlos, crear los archivos de traducción necesarios y generar la página ya traducida.

Un ejemplo, paso a paso. Tienes la página "Contacto" en español y quieres su versión en inglés. Desde la lista de Páginas, abres el menú de "Contacto", pulsas Traducir, eliges English como idioma de destino y pulsas Traducir con IA. Cuando termina, la página traducida aparece en la lista con su propia dirección (por ejemplo, /en/contacto si tu web usa la estrategia de prefijo).
Cuidado con… La traducción automática es un buen punto de partida, no el texto final: revísala tú mismo antes de publicar, sobre todo nombres propios, precios y frases hechas que una traducción literal puede dejar raras.
Medir visitas con Google Tag Manager
Para qué sirve. Google Tag Manager es la herramienta de Google para gestionar todas las "etiquetas" de medición de tu web (anuncios, estadísticas, píxeles de redes sociales) desde un solo sitio. Aquí conectas tu cuenta para que el panel pueda gestionarlas por ti.
Cómo llegar. En el editor, modo Avanzado, pulsa el icono de la etiqueta (GTM) en la barra de la izquierda.
Qué hay en pantalla. Mientras no lo has configurado, verás GTM no configurado y un botón para Configurar Credenciales. Una vez dentro, hay varias pestañas: Estado, Credenciales, Recursos, IA y Configuración.


Un ejemplo, paso a paso. Ya tienes una cuenta de Google Tag Manager creada y quieres conectarla. Pulsas "Configurar Credenciales", vas a la pestaña Credenciales, y vas rellenando lo que Google Tag Manager te da en su propio panel: el archivo de cuenta de servicio, el "Account ID" y el "Container ID" (los encuentras en GTM, en Admin → Account Settings, como indica el propio texto de ayuda debajo de cada campo). Guardas.
Cuidado con… Necesitas tener ya una cuenta de Google Tag Manager creada fuera de Speaksite — esta pantalla conecta una cuenta existente, no crea una nueva por ti.
Tus campañas de Google Ads
Para qué sirve. Conecta tu cuenta de Google Ads para poder ver el rendimiento de tus campañas de anuncios sin salir del panel.
Cómo llegar. En el editor, modo Avanzado, pulsa el icono de tendencia (Google Ads) en la barra de la izquierda.
Qué hay en pantalla. Un campo para tu Customer ID de tu cuenta (el identificador que encuentras en Google Ads, en Configuración → ID de cliente) y un aviso importante en amarillo: tu cuenta tiene que estar vinculada a la cuenta MCC (la cuenta "maestra" de Speaksite) para que la conexión funcione por la vía automática.


Un ejemplo, paso a paso. Quieres ver tus campañas de Google Ads desde aquí. Copias tu Customer ID desde tu cuenta de Google Ads (tiene el formato 123-456-7890), lo pegas en el campo, y pulsas Conectar Google Ads. Si tu cuenta todavía no está vinculada a la cuenta MCC de Speaksite, tendrás que pedir esa vinculación antes de que la conexión termine de funcionar.
Cuidado con… El requisito de la cuenta MCC no es opcional ni algo que puedas saltarte desde aquí: sin la vinculación, escribir el Customer ID no basta para ver datos reales.
Las visitas de tu web
Para qué sirve. Activa y centraliza la analítica de tu web: cuánta gente la visita, de dónde viene, qué hace. Desde aquí enciendes Google Analytics, Microsoft Clarity, y consultas los mismos datos de Google Tag Manager de la pantalla 13.
Cómo llegar. En el editor, modo Avanzado, pulsa el icono de barras (Analítica) en la barra de la izquierda.
Qué hay en pantalla. Tres bloques desplegables: Google Analytics (GA4), Google Tag Manager y Microsoft Clarity, cada uno con su propio interruptor de encendido, y un bloque de Eventos. Tal cual la abres, los tres servicios están apagados.


Un ejemplo, paso a paso. Quieres empezar a medir las visitas con Google Analytics. Activas el interruptor de "Activar Google Analytics", y en "Measurement ID" escribes el identificador que te da Google Analytics — siempre empieza por "G-" seguido de letras y números, por ejemplo G-ABC1234XYZ. Si lo escribes mal (sin la "G-" delante, como en la segunda captura), el panel te avisa al momento y no te deja guardar hasta que lo arregles. Con el formato correcto, pulsas Guardar cambios.
Cuidado con… No confundas el "Measurement ID" de GA4 (empieza por G-) con el ID de Google Tag Manager (empieza por GTM-): son cosas distintas y cada campo pide el suyo.
Elegir qué parte de tu tienda estás diseñando
Para qué sirve. Cambia el aspecto visual de las distintas pantallas de tu tienda (la lista de una categoría, la ficha de un producto, el carrito, el pago) sin tocar código, para toda la tienda de una vez.
Cómo llegar. Esta pantalla, a diferencia de casi todas las demás de esta guía, no exige el modo Avanzado: se llega igual desde el menú de tu tienda pulsando Diseño, tanto en modo Fácil como en Avanzado.
Qué hay en pantalla. Un selector arriba, "Vista: [nombre]", para cambiar entre las distintas pantallas de la tienda que quieres diseñar (categoría, listado, producto, carrito, pago…). A la derecha, la vista previa en vivo de esa pantalla con datos reales de tu tienda. Debajo del selector, dos pestañas: Bloques (qué partes tiene esa pantalla y en qué orden) y Aspecto (colores, espaciados y cómo se ven las tarjetas). Hay también una zona de "Carrito de prueba" para probar cómo se comporta sin afectar a pedidos reales — el propio texto del panel lo avisa.



Un ejemplo, paso a paso. Quieres que en el móvil se vean 2 productos por fila en vez de 1 en las páginas de categoría. Vas a Diseño → seleccionas la vista "Categoría" → pestaña Aspecto → subes el número en "Columnas de la rejilla" → "Móvil". La vista previa a la derecha se actualiza al momento para que compruebes cómo queda antes de publicar.
Cuidado con… En el momento de esta revisión, la cabecera de la vista previa (el nombre de tu negocio y el menú de arriba) se veía sin su caja de fondo ni estilo, como texto suelto — es un fallo visual conocido de esta pantalla concreta; no afecta a cómo se ve tu tienda publicada de verdad, solo a esta vista previa del editor.
Las pantallas de tu tienda que puedes diseñar
Para qué sirve. Es el listado completo de todas las "superficies" (pantallas) de tu tienda que puedes personalizar con la herramienta de la pantalla anterior — un mapa para no perderte entre categoría, listado, producto, carrito y pago.
Cómo llegar. Tampoco exige modo Avanzado. Abre Páginas en un proyecto con la tienda activada: bajo la lista normal de páginas aparece un bloque aparte titulado TIENDA, con Categoría, Listado, Producto, Carrito y Checkout.
Qué hay en pantalla. Cada elemento del bloque Tienda te lleva directamente a la herramienta de diseño de esa superficie (pantalla 16) cuando lo pulsas.

Un ejemplo, paso a paso. No te acuerdas de dónde estaba la herramienta para cambiar el aspecto del carrito. Abres el icono de Páginas, bajas hasta el bloque TIENDA, y pulsas Carrito: te lleva directo a la pantalla de diseño de esa superficie, ya en la vista correcta.
Cuidado con… Este bloque solo aparece si tu proyecto tiene la tienda activada. Si no lo ves, es que tu proyecto todavía no tiene la tienda encendida, no que la función haya desaparecido.