Configuración del tema
La configuración del tema es global. Se aplica a todas las páginas de tu tienda. Esta página explica cada grupo de Configuración del tema, en el orden en que aparecen en el editor de temas.
Para abrir la configuración del tema:
- Ve a Tienda online → Temas.
- En la tarjeta del tema Tenora, selecciona Personalizar.
- En el editor de temas, selecciona Configuración del tema (el ícono del engranaje).
Los valores recomendados que verás a continuación son los predeterminados del ajuste preestablecido Tenora, salvo que el texto indique otra cosa.
Logo y favicon
| Configuración | Qué hace | Valor recomendado |
|---|---|---|
| Logo | La imagen del logo en el encabezado y en la página de contraseña. Sin logo, el encabezado muestra el nombre de tu tienda como texto. | Un archivo .png o .svg transparente |
| Ancho del logo | El ancho del logo, de 40 a 300px. | 120px |
| Imagen del favicon | El ícono pequeño de la pestaña del navegador. | Un archivo .png de 32 x 32px |
Consejos
- En el encabezado, el logo nunca supera los 56px de alto. Un logo alto se mantiene compacto, así que un logo ancho suele verse mejor.
- El logo usa el texto alternativo de la imagen. Si la imagen no tiene texto alternativo, se usa el nombre de la tienda. Agrega texto alternativo al logo en Contenido → Archivos.
- Los nombres de tienda sin logo de más de 18 caracteres se muestran con un tamaño de texto menor. Si el nombre de tu tienda es largo, te recomendamos subir un logo.
- Para usar una versión clara de tu logo sobre el banner con imagen, usa la opción Logo del encabezado transparente en la sección Encabezado.
Colores
Esquemas de colores
Un esquema de colores es un conjunto de colores que aplicas a una sección. Tenora tiene 5 esquemas de colores. La mayoría de las secciones tienen la opción Esquema de colores, así que puedes elegir un esquema distinto para cada sección.
Cada esquema de colores tiene estos colores:
| Color | Dónde se usa |
|---|---|
| Fondo | El fondo de la sección |
| Texto | Títulos, texto del cuerpo e íconos |
| Acento | Enlaces, estados activos y los detalles de las líneas de medidas |
| Fondo del botón | El fondo de los botones sólidos |
| Texto del botón | El texto de los botones sólidos |
| Texto del botón con contorno | El texto y el borde de los botones con contorno |
Para editar un esquema de colores:
- Ve a Configuración del tema → Colores.
- Selecciona el esquema de colores que quieres cambiar.
- Cambia los colores. La vista previa se actualiza al instante.
- Selecciona Guardar.
Recomendaciones
- Mantén una relación de contraste de al menos 4.5:1 entre Texto y Fondo, y entre Texto del botón y Fondo del botón. Todos los pares de colores de los tres ajustes preestablecidos cumplen este nivel (WCAG AA).
- Usa un esquema claro para la mayoría de las páginas y un esquema oscuro para el pie de página, como en los ajustes preestablecidos.
- Los mensajes de error y de confirmación usan el color de texto del esquema con un ícono de color, así que se leen bien en cualquier esquema.
Superficies
| Configuración | Qué hace | Valor recomendado |
|---|---|---|
| Mostrar textura granulada | Agrega una sutil textura de papel a los fondos. | Activada para estilos claros y naturales (Tenora, Terrace). Desactivada para estilos oscuros (Lantern). |
Tipografía
Títulos
| Configuración | Qué hace | Valor recomendado |
|---|---|---|
| Fuente | La fuente de los títulos. Elígela en la biblioteca de fuentes de Shopify. | Cormorant (Tenora), Fraunces (Terrace), Bodoni Moda (Lantern) |
| Escala de tamaños de título | Controla cuánto más grande es cada nivel de título respecto al texto del cuerpo. Opciones: Compacta, Equilibrada, Expresiva. | Equilibrada |
| Mayúsculas | Predeterminado mantiene el texto tal como lo escribiste. Mayúsculas muestra los títulos en letras mayúsculas. | Predeterminado |
Texto del cuerpo
| Configuración | Qué hace | Valor recomendado |
|---|---|---|
| Fuente | La fuente del texto del cuerpo, los botones y las etiquetas. | Instrument Sans (Tenora), Work Sans (Terrace), Manrope (Lantern) |
| Tamaño de fuente | El tamaño base del texto, de 14 a 20px. | 16px |
Consejo: Elige fuentes que incluyan los caracteres de todos los idiomas de tu tienda. Algunas fuentes no admiten todos los alfabetos. Si falta un carácter, el navegador lo muestra con una fuente alternativa.
Diseño
| Configuración | Qué hace | Valor recomendado |
|---|---|---|
| Ancho de la página | El ancho máximo del contenido. Opciones: Estrecho (1200px), Estándar (1440px), Ancho (1680px). | Estándar |
| Margen de la página | El espacio a la izquierda y a la derecha de la página, de 16 a 80px. Se reduce automáticamente en pantallas pequeñas. | 48px |
| Espaciado entre secciones | Ajusta el relleno superior e inferior de todas las secciones. Opciones: Compacto, Estándar, Amplio. | Estándar |
| Espaciado de la cuadrícula | El espacio entre los elementos de las cuadrículas, como las tarjetas de producto, de 8 a 48px. | 24px |
Botones
| Configuración | Qué hace | Valor recomendado |
|---|---|---|
| Radio de las esquinas | Redondea las esquinas de los botones, de 0 a 40px. Con 0, las esquinas son rectas. | 0px (Tenora, Lantern), 24px (Terrace) |
| Grosor del borde | El ancho del borde de los botones con contorno, de 1 a 3px. | 1px |
| Mayúsculas | Texto de los botones en Predeterminado o en Mayúsculas. | Mayúsculas (Tenora, Lantern), Predeterminado (Terrace) |
Los botones de pago de marca, como Shop Pay, mantienen sus propios colores y estilo. El tema no los cambia.
Campos de entrada
Esta configuración se aplica a los campos de formulario, como el selector de cantidad, el campo de suscripción por correo electrónico, los campos de "¿Cabe?" y los campos del formulario de contacto.
| Configuración | Qué hace | Valor recomendado |
|---|---|---|
| Radio de las esquinas | Redondea las esquinas de los campos, de 0 a 24px. | Combínalo con el estilo de tus botones: 0px con botones rectos, unos 8px con botones redondeados |
| Grosor del borde | El ancho del borde de los campos, de 1 a 3px. | 1px |
Tarjetas de producto y colección
| Configuración | Qué hace | Valor recomendado |
|---|---|---|
| Estilo | El aspecto de las tarjetas de producto. Estándar muestra solo la imagen y el texto. Con marco coloca la tarjeta sobre una superficie clara con relleno. Muestra agrega una pestaña de muestra de material a la imagen de la tarjeta. | Muestra (Tenora), Estándar (Terrace), Con marco (Lantern) |
| Relación de aspecto de la imagen | La forma de las imágenes de las tarjetas. Opciones: Adaptar a la imagen, Vertical, Cuadrada, Horizontal. | Vertical para fotos de muebles, Cuadrada para iluminación y artículos pequeños |
| Radio de las esquinas | Redondea las esquinas de las tarjetas, de 0 a 24px. | 0px, u 8px con botones redondeados |
Consejo: Con Adaptar a la imagen, cada tarjeta usa la forma de su propia imagen de producto. Úsala solo si todas tus imágenes de producto tienen la misma forma. Si no, la cuadrícula se ve desigual.
Formato de moneda
| Configuración | Qué hace | Valor recomendado |
|---|---|---|
| Mostrar códigos de moneda | Muestra los precios con el código de moneda, por ejemplo "$12.00 USD" en lugar de "$12.00", en las páginas de producto, las tarjetas de producto, el carrito y el cajón del carrito. | Activada si vendes en varias monedas que comparten símbolo, como USD, CAD y AUD. Si no, desactivada. |
El total estimado del carrito siempre muestra el código de moneda. Para obtener más información, consulta Vender a nivel internacional.
Carrito
| Configuración | Qué hace | Valor recomendado |
|---|---|---|
| Tipo de carrito | Cajón abre el carrito como un panel lateral cuando un cliente agrega un producto o selecciona el ícono del carrito. Página lleva al cliente a la página del carrito. | Cajón |
| Mostrar nota del pedido | Muestra el campo "Agregar una nota al pedido" en el cajón del carrito y en la página del carrito. Los clientes pueden usarlo para dar instrucciones de entrega. | Activada |
El cajón del carrito tiene su propia configuración. Para editarla, abre el editor de temas, selecciona la sección Cajón del carrito y cambia Esquema de colores o Mostrar botones de pago dinámico.
Búsqueda
| Configuración | Qué hace | Valor recomendado |
|---|---|---|
| Habilitar búsqueda predictiva | Muestra productos, sugerencias, colecciones, páginas y artículos mientras el cliente escribe en el panel de búsqueda. Cuando está desactivada, el panel de búsqueda sigue funcionando y abre la página de resultados de búsqueda. | Activada |
| Mostrar precio del producto | Muestra el precio junto a los productos en la búsqueda predictiva. Esta opción solo es visible cuando la búsqueda predictiva está activada. | Activada |
Redes sociales
Introduce la dirección completa de cada cuenta de redes sociales, por ejemplo https://www.instagram.com/yourstore. Deja un campo vacío para ocultar ese ícono.
Las cuentas disponibles son: Facebook, Instagram, Pinterest, TikTok, X (Twitter), YouTube, Vimeo, Tumblr y Snapchat.
Los íconos aparecen en:
- el bloque Íconos de redes sociales de la sección Pie de página
- el cajón del menú en teléfonos y tabletas
Si no completas ninguna cuenta, no se muestra ningún ícono.