Personalizar el tema de la tienda
En este artículo te mostraremos cómo cambiar en un solo lugar los colores, las fuentes y las formas de toda tu tienda basada en bloques.
💡 Para conocer cómo funciona la tienda basada en bloques, consulta Tienda basada en bloques.
QUÉ CONTROLA EL TEMA
El tema define el aspecto de toda la tienda a la vez. Un solo cambio llega al Inicio, a las páginas personalizadas y al resto de las páginas. Tiene tres secciones:
| Sección | Qué controla |
|---|---|
| Colores | Cuatro colores que pintan toda la tienda. |
| Tipografía | Las fuentes, la escala de tamaño del texto y el tamaño y el peso de cada tipo de texto. |
| Forma | Esquinas, bordes, sombras, espaciado y estilo de los botones. |
ABRIR EL EDITOR DEL TEMA
1. Ve a Panel de Control > Ajustes > Interfaz > Apariencia.
2. Haz clic en Tema.
Se abrirá el editor del tema. A medida que cambias cualquier opción, la vista previa de la tienda se actualiza para que veas el resultado al instante.
💡 También puedes llegar desde Panel de Control > Ajustes > Tienda, en la pestaña Diseño. En la fila Tema ("Los colores y la tipografía de tu tienda") haz clic en Editar. En una tienda basada en bloques, esta fila reemplaza a los selectores de color anteriores.
⚠️ El editor del tema necesita que la tienda basada en bloques ya esté activada.
APLICAR UN TEMA PREDEFINIDO
Si no quieres empezar de cero, puedes partir de uno de los temas listos para usar. Aplicar un tema predefinido cambia a la vez los colores, la tipografía y la forma, y después puedes ajustar lo que quieras.
1. En el editor del tema, abre la sección Temas predefinidos.
2. Elige el que más te guste:
| Tema | Qué establece |
|---|---|
| Default | Los colores actuales de tu tienda, con la tipografía y la forma estándar. |
| Modern | Montserrat para los títulos, esquinas redondeadas, sombra media, espaciado amplio y botones rellenos. |
| Editorial | Cormorant Garamond para los títulos y Raleway para el texto, borde fino, sombra sutil y botones con contorno. |
| Nocturne | Una paleta de colores oscura, Roboto Condensed para los títulos, sombra fuerte y esquinas suaves. |
3. Revisa la vista previa y ajusta los colores, las fuentes o la forma si lo necesitas.
💡 Un tema predefinido aparece resaltado solo mientras tu configuración coincide exactamente con él. Apenas cambies cualquier detalle, la tarjeta pasa a llamarse Personalizado.
CAMBIAR LOS COLORES
Cada color tiene un selector con un campo para escribir el código hexadecimal y una paleta de colores predefinidos. Si tienes el código exacto del color de tu marca, pégalo en el campo, por ejemplo #ff66ff.
| Color | Qué pinta |
|---|---|
| Encabezado y pie | La barra de navegación, el footer y las bandas de color. |
| Botones y links | Todo lo que un lector puede tocar o hacer clic. |
| Fondo | El fondo de las páginas. |
| Texto | Los títulos y el cuerpo de los textos. |
Ten en cuenta lo siguiente:
- Los tonos neutros (como el fondo de las tarjetas y el texto atenuado) se calculan solos a partir de Fondo y Texto. No tienes que editarlos.
- Un color que cambiaste desde la última publicación muestra una etiqueta Sin publicar y un enlace para Revertir al color publicado.
- Si el contraste entre el texto y el fondo es bajo, el editor te avisa que el texto casi no se ve sobre el fondo. El aviso no impide publicar, pero conviene corregirlo para que se pueda leer bien.
CAMBIAR LAS FUENTES Y EL TAMAÑO DEL TEXTO
En la sección Tipografía puedes elegir las fuentes y el tamaño del texto.
Fuentes
Puedes elegir entre siete fuentes: Noto Sans, Montserrat, Raleway, Roboto, Cormorant Garamond, Roboto Condensed y Antonio.
| Fuente | Se usa en |
|---|---|
| Títulos | Todos los títulos de la tienda. |
| Texto | Párrafos, descripciones y detalles. |
Si activas La misma fuente que los títulos, el texto usará la fuente de los títulos. Roboto Condensed y Antonio muestran la etiqueta "Ideal para títulos" cuando eliges la fuente del texto.
⚠️ No es posible usar una fuente que no esté en la lista.
Tamaño del texto
La escala Tamaño del texto cambia el tamaño de todos los textos juntos y mantiene la proporción entre ellos.
| Opción | Efecto |
|---|---|
| Compacto | Texto cerca de un 10% más pequeño. |
| Normal | Los tamaños estándar. |
| Grande | Texto cerca de un 10% más grande. |
Ajuste fino de cada tipo de texto
En Ajuste fino de cada tipo de texto puedes configurar por separado cinco niveles: Título de página, Título de sección, Título de publicación, Texto y Detalles. Cada nivel tiene tres opciones:
| Opción | Valores |
|---|---|
| Fuente | Títulos o Texto (una de las dos fuentes de arriba). |
| Tamaño | Pequeño, Mediano o Grande. |
| Peso | Regular, Medio, Seminegrita o Negrita. |
💡 Cambiar la fuente de los títulos puede hacerlos más anchos o más angostos. Si la diferencia es notable, el editor muestra el aviso Cambia el ancho de los títulos. Revisa la vista previa, porque los títulos largos pueden ocupar más líneas. El enlace Revertir a la tipografía publicada deshace los cambios de esta sección.
CAMBIAR LA FORMA DE TARJETAS Y BOTONES
En la sección Forma eliges cómo se dibujan las tarjetas, las imágenes y los botones.
| Opción | Qué controla | Valores | Valor inicial |
|---|---|---|---|
| Redondeo | Tarjetas, botones, imágenes y barra de búsqueda. | Cuadrado, Sutil, Suave, Redondo | Sutil |
| Borde | La línea alrededor de las tarjetas. | Ninguno, Fino (1px), Grueso (2px) | Ninguno |
| Sombra | Cuánto se despegan las tarjetas del fondo. | Ninguna, Sutil, Media, Fuerte | Ninguna |
| Espaciado | El espacio entre bloques, debajo de los títulos y alrededor de las tarjetas. | Compacto, Cómodo, Amplio | Cómodo |
| Botones | Cómo se dibujan todos los botones de la tienda. | Rellenos, Con contorno, Solo texto | Rellenos |
⚠️ Con botones Con contorno o Solo texto, el editor te avisa que el botón casi no se ve sobre el fondo cuando el contraste entre el color del botón y el del fondo es bajo. El enlace Revertir a la forma publicada deshace los cambios de esta sección.
PUBLICAR EL TEMA
El tema tiene su propio borrador y su propio paso de publicación. Publicar el Inicio no publica el tema.
1. Haz los cambios que quieras en el editor del tema. Se guardan automáticamente en un borrador del tema y los visitantes no los ven.
2. Haz clic en Publicar tema.
3. En la ventana ¿Publicar el tema? verás la lista de cambios por sección (Colores, Tipografía y Forma), con el valor anterior y el nuevo de cada uno. Los colores se muestran como muestras.
4. Confirma. El nuevo tema se publica para todos los visitantes.
Ten en cuenta lo siguiente:
- Mientras no publiques el tema, los visitantes siguen viendo los colores actuales de tu tienda con la tipografía y la forma estándar. Esto también ocurre cuando publicas por primera vez el Inicio para que la tienda basada en bloques salga en vivo.
- El editor muestra Cambios sin publicar cuando el borrador es distinto del tema publicado.
- Para descartar los cambios sin publicar, haz clic en Descartar los N cambios (el botón muestra la cantidad real). El borrador vuelve al tema publicado.
- El enlace "Ver borrador" de una página muestra el tema en borrador, así que puedes revisar el resultado antes de publicar.
💡 Para publicar páginas, consulta Editar y publicar una página en Apariencia.
Colores de los correos y otras superficies
Al publicar el tema también se actualizan los colores principal y secundario de tu tienda. Los correos transaccionales y otras partes de la plataforma usan esos colores, por eso siguen al tema publicado.
⚠️ Cuando la tienda ya está en vivo con bloques, el tema es el único lugar para cambiar los colores principal y secundario de la tienda. Los cambios que se hagan en otro lugar, por ejemplo mediante la API, se ignoran.
PREGUNTAS FRECUENTES
Cambié los colores, pero los visitantes siguen viendo los anteriores. El borrador del tema no está publicado. Ve a Panel de Control > Ajustes > Interfaz > Apariencia > Tema y haz clic en Publicar tema. Hasta entonces, el editor muestra Cambios sin publicar.
Publiqué el Inicio, pero la tienda sigue con las fuentes y los colores anteriores. Publicar el Inicio no publica el tema. Publícalo desde su propio editor.
El editor me avisa de un problema de contraste. ¿Puedo publicar igual? Sí, los avisos no impiden publicar. Un contraste bajo puede dificultar la lectura, así que te recomendamos corregirlo.
¿Por qué cambiaron los colores de nuestros correos? Porque al publicar el tema se actualizan los colores principal y secundario de la tienda, y los correos los usan.
¿Dónde quedaron los selectores de color de la pestaña Diseño? En una tienda basada en bloques, los reemplaza la fila Tema, que abre el editor del tema.
ARTÍCULOS RELACIONADOS
- Tienda basada en bloques
- Editar y publicar una página en Apariencia
- Configurar la barra de navegación y el footer
- Agregar estanterías y HTML embebido
- Crear páginas personalizadas y configurar su SEO
- Agregar un pop-up y un aviso en la página de producto
Esperamos que este tutorial te haya resultado sencillo. Si tienes consultas escríbenos a [email protected].