Personalizando el diseño de tu tienda, vas a transmitir la identidad de tu marca y mejorar la experiencia de compra de tus clientes. Por eso, es un aspecto fundamental de la configuración de tu Tiendanube.
En este índice, encontrás los principales tutoriales y secciones sobre la personalización de tu diseño. En Tiendanube tenés tres formas de hacerlo cuya disponibilidad varía según el diseño y plan elegido:
- Configuración nativa: desde el "Editor de diseño" (no requiere conocimientos técnicos).
- Ajustes visuales con códigos CSS: para cambios de estilo (disponible en todos los planes).
- Edición estructural (FTP): acceso al código fuente (disponible desde el Plan Impulso).
Helpjuice Success Callout Title
Diseño Patagonia: Es una plantilla optimizada para velocidad. Por este motivo, no permite el acceso al código (FTP) ni cuenta con algunas funciones dinámicas. Conocé más en este tutorial.
Matriz de Personalización: Editor vs. Código
Esta tabla te muestra qué podés modificar vos mismo y qué requiere un ajuste más avanzado con conocimientos técnicos. Las opciones pueden variar según la plantilla de diseño.
Ver tabla
| Sección del diseño | Personalizar en el Editor | Edición con Código (CSS/FTP) |
|---|---|---|
| Imagen de marca (Colores y Letras) |
• Colores: Principal, secundario, de acento y fondos del sitio. • Tipografía: Elegir fuentes, cambiar el tamaño y poner textos en negrita. • Identidad: Cargar tu logo e imagen de pestaña (favicon). |
• Cargar tipos de letra externos (Google Fonts) que no estén en la lista.
• Efectos de color complejos. |
| Encabezado (Parte superior) |
• Logo: Ubicación, tamaño de columna y color de fondo. • Visibilidad: Que el buscador o la cuenta de usuario estén siempre visibles. Que el encabezado sea transparente sobre las fotos o quede fijo al bajar. • Extras: Barra de anuncios, botón de WhatsApp, banner dentro del menú e información de compra. |
• Cambiar el orden de los elementos del menú que no permita el editor.
• Efectos visuales en el buscador. |
| Página de Inicio |
• Banners y Fotos: Carruseles, videos, banners de categorías (hasta 4) y banners promocionales ilimitados. • Textos: Mensaje de bienvenida, títulos para productos destacados (nuevos, ofertas, más vendidos) y testimonios. • Secciones: Agregar marcas, horarios comerciales, carrusel de productos y suscripción a noticias (Newsletter). • Orden: Podés mover todas estas secciones de lugar. |
• Crear secciones nuevas con formas o diseños que no existan en la plantilla original. |
| Listado de Productos |
• Organización: Cantidad de productos por fila y por página. Mostrar filtros y categorías. • Efectos: Botón de "Compra rápida", ver la segunda foto al pasar el mouse (rollover) y botón de "cargar más productos". • Diseño: Variantes de color y mostrar descuentos combinados. |
• Cambiar la forma en que se ven las etiquetas de "Oferta" o "Sin stock". |
| Detalle del Producto |
• Información: Mostrar SKU, stock disponible, calculador de envío, guía de talles y comentarios de Facebook. • Variantes: Elegir si se ven como botones, lista desplegable o con fotos. • Precios: Mostrar leyendas de cuotas, envío gratis y descuento por transferencia. |
• Reubicar elementos (ej: poner el precio arriba del título).
• Cambiar el diseño del botón "Agregar al carrito". |
| Carrito y Contacto |
• Carrito: Monto mínimo de compra, barra de envío gratis y recomendaciones de productos. • Contacto: Imagen para la página y mapa de Google Maps. |
• Personalizar el diseño del carrito que se desliza por el costado. |
| Pie de Página (Footer) |
• Contenido: Redes sociales (Instagram, Facebook), datos de contacto, medios de pago y envío. • Diseño: Menús secundarios, sellos personalizados, texto final y color de fondo. |
• Ajustes visuales de tipografía o colores específicos. |
Elegir el diseño
En Tiendanube ofrecemos diferentes plantillas de diseño personalizables, para que puedas elegir la que mejor se adapte a la imagen y necesidades de tu negocio. Conocé todas las opciones, sus características y tiendas de ejemplo para cada una en la página:
El primer paso para construir la identidad de tu marca es seleccionar la plantilla que servirá como base para tu tienda online.
Aunque todas nuestras plantillas de diseño son 100% adaptables y personalizables a cualquier tipo de negocio mediante el uso de banners, tipografías y colores, sabemos que ver ejemplos de tu rubro puede ayudarte a decidirte más rápido. En nuestra Tienda de Diseños podés usar el filtro de "Segmentos" para previsualizar cómo se adaptan nuestras plantillas de diseño a rubros específicos como:
- Indumentaria y Accesorios
- Salud y Belleza
- Hogar y Deco
- Comida y Bebida
- Tecnología
- Niños y Bebés
- Deportes
- Libros, Arte y Música
- Regalos y Mascotas
Helpjuice Info Callout Title
Si te gusta la estructura de un diseño que aparece en algún segmento pero tenés una tienda de otro rubro, podés elegirlo igual. La flexibilidad de nuestro editor te permite personalizarlo para que se adapte perfectamente a la identidad de tu marca, sin importar el rubro original del ejemplo.
Si todavía no sabés cuál diseño elegir, te recomendamos consultar nuestro tutorial:
¿Qué diseño elegir para mi tienda? :
Para cambiar un diseño en tu tienda, te recomendamos ver ¿Cómo cambiar mi plantilla de diseño y qué implica?.
Success
En el plan Inicial de Argentina o el plan gratis de México, podés probar en modo borrador todas las plantillas de diseño. Sin embargo, para publicar un diseño que no sea la plantilla Morelia, que viene por defecto, es necesario tener uno de nuestros planes pagos.
Personalizar el diseño
Luego de elegir el diseño, el siguiente paso es personalizarlo para reflejar tu identidad visual.
Ver detalles
En la sección "Tienda Online > Diseño" de tu administrador, encontrás las principales opciones de personalización.
Haciendo clic en "Editar el diseño", ingresás al panel para configurar los elementos del diseño. Ahí mismo, se muestra la previsualización de tu tienda. Una vez tengas elementos configurados, podés pasar por encima y hacer clic en "Editar" para que te dirija a la sección de ese elemento.
Conocé todas las opciones en los tutoriales de nuestra sección:
Personalizar elementos del diseño
Además, podés ver las opciones de personalización por diseño, ya que estas varían en cada uno, en los tutoriales específicos para cada plantilla:
Personalización avanzada del diseño
También podés personalizar tu diseño a través de los códigos CSS y HTML. Para esto, es necesario tener conocimientos de estos lenguajes de programación.
Si manejás esos lenguajes y querés modificar algún elemento del diseño, podés hacerlo con estas opciones:
Edición avanzada de CSS
En el campo de Edición avanzada de CSS en tu administrador, podés insertar códigos CSS para hacer algunas modificaciones simples sobre tu plantilla de diseño, como ocultar un elemento, cambiar su tamaño, etc.
Conocé más sobre esta herramienta, como los elementos que podés modificar, cómo insertar códigos y más, en nuestra sección:
Edición del código fuente (FTP)
Podés editar el diseño de tu tienda desde el código fuente (FTP), para hacer modificaciones más complejas o tener un diseño a medida.
Para esto, es necesario tener conocimientos avanzados de CSS y HTML, ya que cualquier cambio erróneo, puede afectar el acceso y navegación en tu tienda.
Si querés conocer los aspectos que se pueden modificar accediendo al código fuente, cómo hacerlo y más, te recomendamos los tutoriales de nuestra sección:
Warning
Esta opción no está disponible en todos los planes. Conocé más en nuestra página de planes y precios.
Info
Si querés hacer este tipo de cambios, pero no tenés conocimiento, podés contratar a alguien que sepa de desarrollo web, como las opciones que encontrás en Tiendanube Especialistas.
Otras herramientas
En la sección "Tienda Online" de tu administrador, podés configurar otros aspectos del diseño de tu tienda.
Menúes
Los menúes facilitan la navegación en tu tienda, permitiendo ir a sus diferentes secciones y páginas.
Para saber cómo funcionan, te recomendamos ver nuestra:
▶️ Guía interactiva - sobre los Menúes
Además, conocé cómo modificar los menúes en la sección:
Páginas de contenido
En las páginas de contenido podés agregar información adicional de tu negocio, como las políticas de privacidad, de cambios y devoluciones, página de "quiénes somos", etc. Además, podés incluir imágenes, videos y otros recursos.
Podés ver todos los tutoriales sobre este tema en la sección:
Información de contacto
Para transmitir confianza en tu negocio y que tus potenciales clientes puedan comunicarse con vos, es muy importante mostrar los datos de contacto de tu negocio.
Conocé los pasos en nuestro tutorial:
Página en construcción
En caso de que quieras que tus clientes no ingresen a tu tienda mientras trabajás en el diseño, o que prefieras dejarla en pausa, por ejemplo, por vacaciones, podés usar la opción de "Página en construcción".
Para eso, podés seguir los pasos en:
¿Cómo activar el modo "página en construcción" en mi tienda?