Inicio Diseño y personalización visual
🎨

Diseño y personalización visual

Personalización del diseño visual de la tienda: gestión de diseños y estilos, cabecera, logo, pie de página, colores y efectos visuales.
Por Alejandro F. Agente
• 11 artículos

¿Cómo personalizar el menú de navegación de tu tienda online?

Las pestañas de navegación las puedes gestionar, crear o modificar, desde el apartado "Contenidos > Menú Superior" de la administración de tu tienda Palbin.com. Puedes mostrar en ellas tu catálogo de productos, las categorías/subcategorías que quieres destacar, las páginas de contenido que muestran información relevante para el cliente, etc. Hay mucha flexibilidad para que puedas presentar la información como te interese. Si no consigues configurar lo que deseas, no dudes en preguntarnos y te asesoraremos. Paso 1 - Accede a tu administración En Contenidos > Menú Superior, para crear una nueva pestaña, completa su nombre en la columna izquierda titulada "Añadir nuevo elemento al menú" y elige el nombre que quieres que aparezca en tu nueva pestaña del menú superior. Imagen de administración de Palbin.com Paso 2 - Añade nuevo elemento al menú ¿Qué suele aparecer en el menú superior de una tienda online? Por ejemplo, "Quiénes Somos", "Zona Outlet", "Rebajas", "Blog", "Contacto", etc. Algunos ejemplos de las pestañas del menú superior: Ejemplo de menú superior 1 Ejemplo de menú superior 2 Ejemplo de menú superior 3 Paso 3 - Indica el tipo de elemento Las pestañas del menú superior de tu tienda online pueden estar vinculadas a distintos partes de tu tienda. Por ejemplo, las novedades, los productos más vendidos, una categoría concreta de productos, con el listado completo de tus productos, una [página de contenido]({% kb_article_url 182 %}) o incluso a un blog o web externa. Como siempre, dejamos que tú mismo decidas el aspecto que tendrá tu tienda online, por lo que la organización de las pestañas del menú superior es totalmente flexible y personalizable. Imagen de configuración de tipo de elemento en Palbin.com Paso 4 - Elige el tipo de elemento A pesar de que elijas categorías de productos, marcas de productos o listado de páginas de contenido, podrás seleccionar si quieres mostrar un listado completo de todas ellas o alguna en concreto. Imagen de selección de tipo de elemento en Palbin.com Si lo que deseas es incluir un elemento con las novedades, productos más vendidos o una página de contacto básica deberás seleccionar el tipo de elemento "Páginas predefinidas". Paso 5 - Ordena las pestañas Una vez creadas tantas pestañas como necesites, desde la columna de la derecha "Orden del Menú de Navegación", puedes editar, mover o reordenar las pestañas del menú superior de tu tienda online. Solo debes hacer click en el icono de las flechas "↕" y arrastrarlo hasta que quede en la posición que prefieras. Imagen de ordenación de pestañas en Palbin.com Paso 6 - Editar o eliminar una pestaña Si quieres modificar el nombre de la pestaña o el tipo de elemento al que dirige puedes hacerlo pulsando el botón "Editar". De igual forma, si lo que quieres es eliminar una pestaña puedes hacerlo desde el botón "Borrar". Paso 7 - Guardar Por último, recuerda hacer clic en "Guardar ordenación" para aplicar los cambios definitivos a tu tienda online.

Última actualización el Aug 21, 2025

¿Por qué la imagen de mis productos se ve mal?

Formatos compatibles Los formatos que acepta el sistema son JPG, JPEG y PNG. Si trabajas con imágenes demasiado pesadas, recibirás el aviso de que estás subiendo una foto demasiado grande. Puedes reducir las imágenes con cualquier programa de edición de fotografías o hacerlo directamente online. Si utilizas imágenes en formato HEIC, el nuevo formato de Iphone, debes convertir las imágenes a uno de los formatos permitidos. Puedes usar un conversor de imágenes online, o exportar las imágenes desde tu dispositivo y cambiar a formato jpg. ¿Qué tamaño deben tener las imágenes de mis productos? Para asegurar que las imágenes de tus productos se visualizan correctamente desde cualquier dispositivo, intenta que cada imagen sea aproximadamente de entre 1024px y 1600px, ya sea en horizontal para imágenes cuadradas u horizontales, o en vertical para imágenes verticales. Lo importante es que a la hora de subir tus imágenes de producto especifiques para todas ellas la misma proporción de recorte. La propia plataforma Palbin.com se encarga posteriormente de hacer las adaptaciones necesarias. ¿Te has fijado en cómo aparece la previsualización de tus imágenes en la portada o al acceder a una categoría? Es especialmente importante que te fijes en cómo aparecen estas miniaturas en tu tienda si las imágenes de tus productos no tienen todas las mismas proporciones. O si las características de tus productos hace necesario que todas las miniaturas se vean en horizontal (o en vertical), por ejemplo: Imagen de ejemplo de miniaturas de producto ¿Las imágenes de tus productos se cortan? Si al subir las imágenes de los productos a nuestra tienda online cada una queda de una manera, a veces cortadas, de forma asimétrica y poco profesional, no te preocupes, ya que puedes utilizar la opción de Tamaño de Lienzo, la cual consiste en aplicar espacio en los lados que nos interese de la fotografía y de esta forma no quedará cortada. Desde el apartado Mi catalogo > Productos en Imágenes del producto, puedes marcar la opción de "Añadir espacio blanco alrededor de la miniatura". De esta forma, la imagen no se cortará por ninguno de los lados, quedará ideal en nuestra tienda online y transmitiremos una sensación más profesional y de simetría. Para ver el paso a paso de como aplicar el tamaño de lienzo a mis productos, mira el siguiente [enlace]({% kb_article_url 116 %}). ¿Las imágenes de producto se ven giradas? En algunas ocasiones, al subir las imágenes de los productos y guardarlas, estas se giran, viéndose en una orientación que no es correcta. Las imágenes se giran porque al subirlas se pierden la información EXIF. Los datos EXIF (Exchangeable image file format) indican las condiciones en las que una imagen se ha tomado, incluida la orientación, al perderse estos datos algunas imágenes quedan giradas. Para corregir este error, tendrás que reorientar la imagen con cualquier editor de imágenes de teléfono u ordenador y volverla a subir para que encaje con la orientación que buscas. Trabajar con excel es más ágil Si te interesa cambiar las previsualizaciones de tus productos, basta con subir mediante una excel las imágenes principales de tus productos. Asegúrate primero de que el formato por defecto de previsualización es el que te interesa. Puedes subir una imagen de producto desde la administración indicando el recorte automático y a continuación utilizar tu archivo excel. Nuestra recomendación: Desde tu administración > Mi Catálogo > Importar y Exportar > Exporta tu catálogo en un archivo. Ábrelo y recuerda incluir una columna en la que indicar el nombre de las imágenes asociadas a cada producto (el nombre de tu archivo). Tienes estas guías para recordar cómo trabajar con esta herramienta de importación masiva: - [¿Cómo realizar importar todos mis productos?]({% kb_article_url 178 %}) - [¿Qué columnas debe tener el archivo excel?]({% kb_article_url 193 %}) Resto de imágenes de tu tienda En relación a otras imágenes de la tienda como, por ejemplo, las que aparecen en banners con carrusel, lo óptimo es trabajar con imágenes que no excedan los 1024 px. Accede aquí para ver [más información acerca de las imágenes de tu tienda online]({% kb_article_url 113 %}).

Última actualización el Aug 21, 2025

¿Cómo poner un carrusel de imágenes en mi tienda online?

Además, te damos las claves sobre el formato de las imágenes para que el resultado sea perfecto. Te recomendamos leer hasta el final. Paso 1 - Accede a tu administración Paso 2 - Sección Diseño > Banners Paso 3 - Añadir Nuevo Banner En este paso, puedes decidir el tipo de banner que te interesa crear. La última opción te permite crear un "Banner con Carrusel de Imágenes". Imagen de banner en Palbin Paso 4 - Título del carrusel Por ejemplo, puedes titularlo "Recomendaciones", "Novedades", "Carrusel de la Portada"... Este título puede ser visible o no, lo dejamos a tu elección. Paso 5 - Detalles de cada imagen del carrusel En cada imagen puedes añadir un pequeño texto que aparecerá al situar el cursor del ratón sobre ella. Además, puedes añadir un enlace que dé acceso directo con un clic a la sección de la tienda que te interese. Imagen de detalles de banner en Palbin Paso 6 - Tipo de animación Por último, el carrusel de imágenes nos permite escoger entre dos tipos de animación: a) que las fotos se desvanezcan al cambiar de una a otra b) que las fotos se deslicen al cambiar de una a otra También podemos decidir el tipo de paginación e incluso la velocidad con la que cambian las imágenes. Imagen de animación de banner en Palbin Una vez configurado el carrusel de imágenes a tu gusto, recuerda guardar los cambios y ¡listo! Recomendaciones sobre el formato de las fotos de un carrusel Antes de añadir un carrusel de imágenes, asegúrate que todas las imágenes o fotografías tengan las siguientes características: - Formato JPG, JPEG o PNG (importante destacar que este último formato es el que más tiempo tarda en cargar y por tanto es el menos recomendable). - Mismo tamaño y proporciones para que el resultado sea uniforme y profesional. - Cada foto debe ser menor a 1024 px, para asegurar que la tienda online cargue de forma correcta en todos los dispositivos. ¿Dónde vas a situar el carrusel de imágenes? - Zona central: las fotos deben ser horizontales (ej: 800x400 px) - Zona lateral: es recomendable que las imágenes sean verticales y más pequeñas (ej: 180x300 px) ¿Cómo se editan las fotos? Si necesitas editar tus fotografías, puedes hacerlo con esta herramienta. Nuestra recomendación: Imágenes de un tamaño máximo de 1024 px (o 200 kb de peso).

Última actualización el Aug 21, 2025

Plantillas con Diseño Responsive (adaptado a móviles)

En Palbin.com ponemos a tu disposición numerosas plantillas con diferentes diseños para que elijas la que más te guste. Puedes cambiar de una a otra tantas veces como quieras, sin coste adicional. Las encontrarás en tu administración > Diseño > Diseños. Todas ellas tienen un diseño responsive, es decir, tienen un diseño que permite adaptarse a la pantalla de cualquier dispositivo móvil. De esta manera, tus clientes pueden acceder a tu tienda desde su móvil y navegar con la comodidad que caracteriza a este tipo de diseño adaptativo. El objetivo es que las compras desde el móvil sean tan sencillas de realizar como desde un ordenador. Si por necesidades de tu negocio prefieres no utilizar una versión responsive, puedes solicitar que nuestros diseñadores desactiven esta opción en tu tienda online. A pesar de contar con esta opción, no lo aconsejamos en absoluto ya que puede perjudicar la experiencia de usuario (UX) y el posicionamiento SEO. Diseño responsive Palbin Nuestro equipo de diseño también puede crear una [plantilla personalizada]({% kb_article_url 260 %}) y única para tu negocio online. Editor Avanzado de CSS Si tienes conocimientos de CSS, puedes editar nuestras plantillas desde ese mismo apartado introduciendo las instrucciones oportunas. Recuerda que estarás sobreescribiendo los estilos CSS de tu tienda, por lo que evita usar esta opción si no eres un diseñador experto.

Última actualización el Aug 21, 2025

¿Cómo cambio la imagen de cabecera de mi tienda?

La cabecera de nuestra tienda online debería tener un diseño atractivo y profesional, que transmita la filosofía y saber hacer de la empresa. Para subir una imagen de cabecera o modificarla, podemos hacerlo desde la sección de nuestra administración > Diseño > Cabecera y Logo. Allí encontraremos las cuatro opciones disponibles para mostrar la cabecera de tu tienda online. - Cabecera por defecto (logo integrado) - Cabecera con texto - Cabecera con imagen - Sin cabecera Cabecera por defecto Esta opción surgió a raíz de la actualización de los diseños responsive y te permite integrar el logotipo de tu tienda directamente en la cabecera. Cabecera por defecto Cabecera con texto Puedes editar el nombre y eslogan de tu tienda con múltiples tipografías, colores, alineados, tamaños y efectos. Prueba diferentes opciones y seguro que encuentras lo que buscas para tu negocio. Cabecera con texto Cabecera con imagen Puedes poner una imagen propia en la cabecera de tu tienda online. Para asegurarnos de una correcta visualización en cualquier dispositivo, la recomendación es que dicha imagen tenga un tamaño aproximado de 1600px (anchura) por 300px (altura). Cabecera con imagen Para sustituir una antigua imagen por otra nueva, se debe borrar primero la primera mediante el icono en forma de papelera del lateral superior derecho de la imagen. IMPORTANTE: Si no ves dicho icono, seguramente sea porque la imagen que subiste supere las dimensiones recomendadas para la cabecera de vuestra tienda online. Si es este el caso contactar con nosotros escribiendo a soporte@palbin.com. Sin cabecera También puedes configurar tu tienda de forma que no tenga cabecera. Esta opción es muy apropiada para aquellas tiendas que quieran colocar un llamativo banner central. Recomendaciones y observaciones ¿Qué ocurre si modificas la cabecera pero sigue apareciendo la antigua en la Home de vuestra tienda? Casi todos los cambios de diseño afectan a las imágenes de tu tienda, las cuales suele cachear tu navegador. Es decir, tu navegador (ya sea Chrome, Firefox, Explorer...) se guarda una imagen en tu ordenador para que navegues más rápido. Puede ocurrir que, tu navegador no te permita ver tu nueva cabecera inmediatamente. Nuestra recomendación: Para ver cualquier modificación de tu tienda más rápido, presiona las teclas CTRL y F5 para "refrescar" tu navegador y obligarle a descargar las imágenes de nuevo en ese preciso momento. Te facilitamos este vídeo tutorial para que te sirva de guía a la hora de gestionar la cabecera de tu tienda, tu logo y tu favicon:

Última actualización el Aug 21, 2025

¿Puedo incluir una galería fotográfica en mi tienda online?

Es posible incluir galerías fotográficas en tu tienda online por medio de [páginas de contenido]({% kb_article_url 168 %}) o [banners]({% kb_article_url 112 %}). ¿Cómo añadir una galería fotográfica en una página de contenido? Puedes hacer esto por medio de aplicaciones externas como Flickr. A continuación mostramos un ejemplo de una tienda de Palbin.com que utiliza este sistema: Tienda Palbin.com con galería Flickr Esta galería está realizada a través de Flickr: 1. Creas una galería de fotos en Flickr 2. "Copias" el código HTML que te dan 3. Lo "pegas" en tu tienda, bien sea en un banner o en la descripción de una página de contenido ¿Cómo añadir una galería fotográfica en un banner? Otra forma de añadir una galería fotográfica sería poniendo un [carrusel de imágenes en tu tienda online]({% kb_article_url 114 %}). Para hacer esto debes acceder a tu administración y desde Diseño > Banners > Banner con Carrusel de Imágenes podrás escoger las imágenes que quieres subir y a qué sección de tu tienda las quieres enlazar. Banner con carrusel de imágenes Otra opción para incorporar tu galería fotográfica a un banner en tu tienda online puede ser la de aprovechar la galería fotográfica de Instagram para incorporarla en un banner en la columna lateral de tu tienda online. Para esto debes acceder a tu administración y desde Diseño > Banners > Banner con HTML y ahí pegar el código HTML que te proporciona Instagram. Banner con HTML de Instagram

Última actualización el Aug 21, 2025

¿Cómo evitar que las imágenes de mis productos se corten?

Si al subir las imágenes de tus productos en tu tienda online cada una queda de una manera, a veces cortadas, de forma asimétrica y poco profesional, no te preocupes, ya que puedes utilizar la herramienta para añadir espacio blanco a las imágenes (sistema anti-recorte o Tamaño de Lienzo) y de esta forma no se recortaran las imágenes en tu tienda. A continuación debes seguir los siguientes pasos: Paso 1 - Ir al producto Desde el apartado Mi catálogo > Productos en Imágenes del producto, verás dos opciones, seleccionar automáticamente el encuadre de la miniatura con formato y añadir espacio blanco alrededor de la miniatura. Si has marcado la primera opción y te aparecen las imágenes cortadas, como en este ejemplo: Imagen de producto cortada En tu tienda online se vería de esta forma: Miniatura de producto cortada Por tanto, lo que debes hacer es desmarcar esta opción "Seleccionar automáticamente el encuadre de la miniatura con formato" y seguir el siguiente paso. Consejo: Es recomendable utilizar esta opción solo cuando se nos recortan las imágenes. En caso de que no se recorte una imagen no es necesario habilitarlo. Paso 2 - Añadir espacio blanco alrededor de la miniatura Debes marcar esta opción solo si la imagen se queda cortada. Te aparecerá un mensaje informativo indicándote que este cambio se aplicará para las nuevas imágenes que subas a partir de ahora. Por tanto, debes hacer clic en "OK", eliminar la imagen anterior y volver a subirla. Opción de añadir espacio blanco Paso 3 - Recorta la imagen Te aparecerá un recuadro que te indicará el recorte de la imagen de tu producto. Puedes aplicar el recorte en formato super horizontal, horizontal, square (cuadrada), vertical y super vertical. Selecciona la parte de la imagen que deseas recortar y debes hacer clic en "Recortar Imagen". Herramienta de recorte de imagen Paso 4 - Guardar Al guardar los cambios, se mantendrá como opción por defecto el tamaño de lienzo en todas las imágenes que vuelvas a subir en la ficha de tus productos, por lo que no tendrás que volver a repetir el proceso. De esta forma, las imágenes no se cortarán por ninguno de los lados, quedará ideal en nuestra tienda online y transmitiremos una sensación más profesional y de simetría. Imagen de producto con espacio blanco

Última actualización el Aug 22, 2025

¿Cuál es el tamaño ideal de las imágenes de mi tienda?

En tu tienda tendrás diversidad de imágenes: para presentar tus productos al detalle, para crear banners centrales a toda página, para pequeños banners informativos en un lateral, para un llamativo carrusel de imágenes, para la cabecera de tu tienda... Cada tipo de imagen debe tener un formato y tamaño para obtener resultados profesionales. Los siguientes tamaños están recomendados para una resolución 5:2. Si bien nuestros sistemas comprimen y adaptan las imágenes de forma automática, a continuación se especifican resoluciones aproximadas para una relación óptima entre calidad y peso de imágenes. - Imágenes de productos: entre 1024px y 1600px. Ya sea en horizontal para imágenes cuadradas u horizontales, o en vertical para imágenes verticales. Lo importante es que a la hora de subir tus imágenes de producto especifiques para todas ellas la misma proporción de recorte. [Ver más información sobre las imágenes de productos.]({% kb_article_url 113 %}) - Imágenes con carrusel y banners centrales: entre 1024px y 1920px [Ver más información sobre imágenes de un carrusel]({% kb_article_url 114 %}) [Ver más información sobre imágenes de banners centrales]({% kb_article_url 112 %}) - Imágenes de banners laterales: 245px (aproximadamente) [Ver más información sobre imágenes de banners laterales]({% kb_article_url 108 %}) - Imágenes de la cabecera de tu tienda: 1600x300 px (aproximadamente). En cualquier caso se aconseja feacientemente usar la cabecera por defecto (con logotipo) en la tienda. [Ver más información sobre imágenes de la cabecera.]({% kb_article_url 111 %}) - Imágenes de cabecera de las categorías de tu tienda: 1600x640px o 1600x530px (aproximadamente). Lo importante es que todas las imágenes de categoría sean de la misma proporción. - Imagen de logotipo de tu negocio: 360x140 px (aproximadamente) Indicaciones adicionales Recomendamos trabajar con imágenes de tamaños que ronden los 200 Kb o 300 Kb. Son tamaños suficientemente grandes como para mostrar en tu tienda imágenes de productos con buena resolución y adaptadas a la web. Los formatos que acepta el sistema son JPG, JPEG y PNG (importante destacar que este último formato es el que más tiempo tarda en cargar). Aplicaciones extra relacionadas Image Optimization es un plug-in que se incorpora a las tiendas para que mejore la visualización de las imágenes. Aunque este optimizador tiene un coste de 30€/mes puedes utilizarlo gratis en todos nuestros planes de Palbin, y aunque está habilitado por defecto, puedes encontrarlo en tu administración > Configuración > Aplicaciones Extra. La herramienta funciona en dos sentidos: 1. Las imágenes se adaptan al formato web, es decir, se ajustan al tamaño necesario para una buena visualización, de forma que la página carga más rápido. 2. Carga inteligente de las imágenes, con esta función las imágenes que no se visualizan en pantalla no están cargadas hasta que no hacemos scroll y accedemos a ellas, prioriza la carga de imágenes. Ambas funciones ayudan a mejorar la velocidad de carga, factor fundamental para conseguir un buen posicionamiento SEO.

Última actualización el Aug 21, 2025