La identidad visual es uno de los pilares más importantes para transmitir profesionalismo y fortalecer la presencia de tu marca. El diseño Ipanema ofrece un conjunto de configuraciones globales de identidad de marca que permiten personalizar colores, tipografía y botones, garantizando consistencia visual en todas las páginas de tu tienda.
¡Vamos a los pasos!
1. Ingresar al administrador de tu Tiendanube.
2. Acceder a "Tienda online > Diseño" y hacer clic en "Editar diseño".
3. Hacer clic en el ícono del engranaje en el menú superior (al lado de “Editar diseño”) para acceder a los ajustes globales.
4. En el menú lateral vas a ver la sección "Identidad de marca". Desde ahí podés configurar los colores, tipo de letra y los botones de la tienda.
Colores
Colores principales
- Color de fondo: define el color de fondo principal de la tienda, aplicado a las páginas y secciones del diseño.
- Color de los textos: define el color predeterminado de los textos que se muestran en toda la tienda.
- Color de acento: define el color utilizado en información estratégica que merece mayor visibilidad, como textos de descuento, envío gratis y cuotas sin intereses.
Etiquetas de promoción
- Color de fondo: define el color de fondo de las etiquetas de promoción que se muestran en los productos.
- Color de los textos: define el color del texto que aparece dentro de las etiquetas de promoción.
Etiqueta de envío gratis
- Color de fondo: define el color de fondo de las etiquetas de envío gratis que se muestran en los productos elegibles.
- Color de los textos: define el color del texto que aparece dentro de las etiquetas de envío gratis.
Tipo de letra
Títulos
- Fuente: define la fuente (familia tipográfica) utilizada en los títulos de la tienda.
- Tamaño: ajusta el tamaño de los títulos, en píxeles (px).
- Negrita: cuando está activado, aplica el estilo negrita a todos los títulos de la tienda.
Helpjuice Warning Callout Title
Esta configuración general puede modificarse mediante ajustes específicos en cada sección.
Textos
- Fuente: define la fuente (familia tipográfica) utilizada en los textos generales de la tienda.
- Tamaño: ajusta el tamaño predeterminado de los textos, en píxeles (px).
Párrafo
- Tamaño: ajusta el tamaño de los textos en formato de párrafo, en píxeles (px). Esta configuración se aplica a descripciones de productos, banners y mensajes que se muestran en diferentes secciones de la tienda.
Botones
El diseño Ipanema tiene tres tipos de botones: principal, secundario y terciario.
- Botón principal: se usa en las acciones más importantes, como botones en Banners, "Agregar al carrito" o “Iniciar compra”.
- Botón secundario: se usa en acciones complementarias que apoyan a las principales sin competir visualmente.
- Botón terciario: se usa en acciones de menor destaque, generalmente como enlaces o opciones auxiliares.
Cada uno se usa en contextos diferentes, pero las configuraciones disponibles son las mismas para los tres:
- Color de fondo: define el color de fondo del botón.
- Color de línea y texto: define el color del contorno y del texto que aparece dentro del botón.
- Estilo: define el estilo visual. Elegí entre "Relleno" (fondo sólido), "Contorno" (botón con borde)..
- Redondeado: ajusta el nivel de redondeado de las esquinas, en píxeles (px), permitiendo desde esquinas rectas hasta esquinas completamente redondeadas.
Etiquetas
En esta sección podés personalizar el diseño de los carteles que destacan información clave de los productos. Hay dos tipos:
- Etiqueta principal: se usa para las promociones (por ejemplo, "2x1").
- Etiqueta secundaria: se usa para destacar el envío gratis.
Cada una se usa en contextos distintos, pero las configuraciones disponibles son iguales para ambas:
- Color de fondo: define el color base de la etiqueta.
- Color de textos (o Color de línea y texto): define el color de las palabras y del contorno, en caso de elegir ese estilo.
- Estilo: elegí entre "Relleno" (fondo sólido) o "Contorno" (solo el borde).
- Redondeado: ajusta la curvatura de las esquinas deslizando el selector o ingresando el valor en píxeles (px).
Ancho de página
Esta configuración permite elegir el tamaño máximo que tendrán las secciones de tu tienda al visualizarse en computadoras.
- Ancho en computadoras: define el tamaño máximo de las secciones deslizando el selector o ingresando el valor exacto en píxeles (px).
5. Hacer clic en "Guardar" para publicar los cambios.
¡Listo!
Ahora ya sabés cómo usar las configuraciones globales para personalizar la identidad de marca de tu tienda.