Centro de Atención Nube Configura tu tienda Diseño Personalizar tu diseño Encabezado

¿Cómo agregar una imagen de fondo para mi tienda?

Pasos para configurar una foto o imagen como fondo en tu Tiendanube

Última actualización: 01/12/2023

En general, lo más recomendable es usar un color sólido como fondo para tu tienda. Sin embargo, una imagen de fondo personalizada en tu tienda puede ayudarte a mostrar la identidad de tu marca

Por eso, es importante elegirla estratégicamente para que ayude a que los productos se destaquen y concuerde con otros elementos, como colores, tipografías y logo, ya que se va a repetir en todas las páginas de tu tienda. 

Success

Por el momento, esta configuración solo está disponible para las plantillas de diseño Simple y Trend.

Info

Te recomendamos que la imagen tenga colores claros y no sea muy llamativa, para que se destaquen tus productos y no dificulte la experiencia de compra.

En este tutorial te contamos cómo configurar una imagen como fondo de tu tienda.

¡Vamos a los pasos!

Sigue los pasos según la plantilla de diseño que tengas.

Simple

1. Ingresar a "Mi Tiendanube > Diseño" dentro del administrador de tu tienda.

2. Hacer clic en "Personalizar el diseño actual".

3. Hacer clic en la opción "Encabezado".

Barra lateral de Personalizar el diseño actual, con la opción "Encabezado" resaltada

4. En la sección de "Fondo del sitio", hacer clic en "Imagen de fondo del sitio".
Sección Encabezado con el botón Imagen de fondo del sitio resaltadoLuego, hacer clic en "Elegir imagen".

Botón Elegir imagen resaltado

Delete

Info

En el sitio 🌐 The Pattern Library puedes encontrar patrones útiles para el fondo de tu tienda.

5. Seleccionar la imagen que desees cargar desde tu computadora y hacer clic en "Abrir". Recuerda tener presente el tamaño recomendado para la imagen, ya que se va a repetir como un padrón en el fondo de tu tienda.

6. Hacer clic en el botón de "Publicar cambios".

Delete

Info

En caso de que no te guste como se ve la imagen repetida, puedes modificarlo con el siguiente código CSS, siguiendo los pasos en: 
📝 ¿Cómo editar el diseño con código CSS?

body {background-repeat: no-repeat;
Delete

Trend

1. Ingresar a "Mi Tiendanube > Diseño" dentro del administrador de tu tienda.

2. Hacer clic en "Personalizar el diseño actual".

3. Hacer clic en la opción "Encabezado".

Barra lateral de Personalizar el diseño actual, con la opción "Encabezado" resaltada

4. En la sección de "Imagen de fondo para tu sitio", hacer clic en "Subir una imagen de fondo".

Sección Imagen de fondo para tu sitio con el botón Subir una imagen de fondo resaltado
Luego, hacer clic en "Elegir imagen".
Botón Elegir imagen resaltado
Delete

Info

En el sitio 🌐 The Pattern Library puedes encontrar patrones útiles para el fondo de tu tienda.

Si no tienes una imagen definida que quieras usar como fondo, puedes elegir una de las tramas disponibles en la parte inferior de esa sección.

5. Seleccionar la imagen que desees cargar desde tu computadora y hacer clic en "Abrir". Recuerda tener presente el tamaño recomendado para la imagen. 

6. Volver a la pantalla anterior, haciendo clic en la flecha junto a "Subir una imagen de fondo".

7. Nuevamente, en la sección de Imagen de fondo para tu sitio:

  • Elegir si quieres que la imagen se repita en todo el fondo (esta opción es recomendable para tus imágenes y obligatoria en el caso de que elijas una trama)
  • Si no, seleccionar la posición en la que quieres que esté la imagen (izquierda, derecha o centrada)

Sección de imagen de fondo para tu sitio con la opción de Repetir imagen marcada y el desplegable para seleccionar la posición de la imagen

8. Hacer clic en el botón de "Publicar cambios".

Delete

¡Listo! 🙌

Ya vas a poder ver la imagen de fondo aplicada en tu tienda.

Tienda de ejemplo con imagen de fondo


Da tu opinión sobre este artículo