1 . Ve a Panel de control > Ajustes > Tienda
2. Elige la imagen del logo a subir. Haz clic en Seleccionar archivo o Choose File.
Busca la imagen y luego haz clic en Subir logo.
La imagen a subir deberá cumplir con las siguientes especificaciones:
Formatos aceptados: JPG, SVG, PNG
Tamaño mínimo: "70 x 70 px"
Hasta 20mb
3. Haz clic en Guardar.
Una vez se haya procesado la imágen, se verá de esta manera:
💡Herramientas que puedes usar para transformar, comprimir y re dimensionar los archivos:
Tiny PNG: Permite comprimir imágenes en formato PNG y JPG.
I love IMG Podrás comprimir, redimensionar, recortar y girar archivos JPG y PNG.
Peko-Step: Permite transparentar el fondo de la imagen, entre otras funcionalidades.
PRO TIP:
👉Si el logo te quedó muy pequeño, puedes aplicar estilos CSS para intentar agrandarlo. Recomendamos contar con conocimientos básicos de programación para poder realizar estos ajustes sin afectar la visual de la tienda. Te compartimos un ejemplo:
Luego de haber subido el logo en la tienda el mismo quedó de esta manera
Al dar clic derecho sobre el logo podremos inspeccionarlo en la consola y probar los estilos desde allí:
Para las pruebas modifica los valores de los píxeles como se muestra en la imagen para encontrar el tamaño de tu preferencia
> La línea de witdth maneja el ancho de la imagen, mientras que la línea de height maneja el alto.
En este caso modificamos la altura máxima a 60px para que se vea más grande. Para que se aplique en la tienda debemos ir a Panel de control > Ajustes > Avanzados y en Custom before </body> code pegar el siguiente código:
<style>
.Header .navbar-brand img {
max-height: 60px;
max-width: 60px;
height: 100%;
}
</style>
En caso de que el cambio no se aplique es muy probable que esté tomando otro valor como prioritario y debamos indicarle al sistema que obvie esta prioridad y tome nuestro nuevo valor indicado. Esto lo lograremos con una etiqueta !important como se muestra a continuación.
<style>
.Header .navbar-brand img {
max-height: 60px;
max-width: 60px!important;
height: 100% !important;
}
</style>
Luego damos clic en Guardar.
Esperamos que este tutorial te haya resultado sencillo. Si tienes consultas escríbenos a [email protected].