Personalizar el Background

En este artículo te mostraremos cómo puedes personalizar el fondo de tu tienda para que puedas darle el estilo que quieras.

Lara Macarena Sastre avatar
Escrito por Lara Macarena Sastre
Actualizado hace más de una semana

Si quieres colocar una imagen de fondo o quieres cambiar el color del mismo, vamos a mostrarte en sencillos pasos cómo puedes personalizar el background de tu tienda. Vamos a enseñarte a colocar una imagen:

o a cambiar el color:

De acuerdo al plan que tengas contratado deberás ingresar el código CSS en diferentes lugares, pero no te preocupes que funciona en ambos de la misma manera.

Ambos se configuran desde Panel de control > Ajustes > Avanzados

Ve a Panel de Control > Ajustes > Avanzados, y verifica si tienes el recuadro de CSS Personalizado.

Si tienes CSS Personalizado deberás pegar allí el siguiente código:

  • PARA COLOCAR UNA IMÁGEN:

body {
background-image: url(https://linkatuimagen.com/images/img.jpg);
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}

NOTA: Deberás modificar la url en negrita, colocando la URL donde se encuentra guardada tu imágen.

💡En el caso que no la tengas alojada en algún sitio, puedes utilizar Imgbb (es gratuito y online).

  • PARA CAMBIAR EL COLOR :

    body {
    background: #FFD700;
    }


NOTA: Dependiendo el color que desees ingresar, puedes colocar el código HEX tal como se muestra en el código (debes reemplazar el que allí se encuentra " #FFD700" por el que tu desees).

💡 Aquí te compartimos un sitio donde puedes encontrar los códigos de colores.


Guarda los cambios y ¡Listo!



Si no tienes CSS Personalizado deberás pegar el código en Custom before </head> code de la siguiente manera:

  • PARA COLOCAR UNA IMÁGEN:

<style>
body {
background-image: url(https://linkatuimagen.com/images/img.jpg);
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>

NOTA: Deberás modificar la url en negrita, colocando la URL donde se encuentra guardada tu imágen.

💡En el caso que no la tengas alojada en algún sitio, puedes utilizar Imgbb (es gratuito y online).

  • PARA CAMBIAR EL COLOR :

    <style>
    body {
    background: #FFD700;
    }
    </style>


NOTA: Dependiendo el color que desees ingresar, puedes colocar el código HEX tal como se muestra en el código (debes reemplazar el que allí se encuentra " #FFD700" por el que tu desees).

💡 Aquí te compartimos un sitio donde puedes encontrar los códigos de colores.

Guarda los cambios y ¡Listo!

Puede que alguna etiqueta tenga algún error y es por eso que el código no funciona. Para solucionarlo revisa que el código esté correctamente y tal cual como te lo compartimos en este tutorial.

Esperamos que este tutorial te haya resultado sencillo. Si tienes consultas escríbenos a [email protected].

¿Ha quedado contestada tu pregunta?