Image on Header (on SIMPLE THEME)

Highlighted
Tourist
8 0 0

ENGLISH
Hi, I´m using theme SIMPLE in my Shopify store, and I would like to know how can I add an image on the header of the website. Also, I need this image it will be responsive in order to use in other devices like Cellphone or tablet.

You can see more details in the attached file.

 

I was able to put an image as background with custom code. My problem is I can't set the image as responsive, so in desktop version the image looks great, but in mobile version the image has the same size than desktop, so looks awful


Please let me know if you need more info from my side
Thanks in advance

 

ESPAÑOL
Hola,
Estoy usando el tema SIMPLE para mi tienda, y me gustaría saber cómo puedo agregar una imagen en el Header de la página. Además, necesito que esta imagen sea responsiva para que pueda ser usada en un Celular o Tablet.

dejo un adjunto más abajo con la imagen para explicar lo que necesito.

 

Logré poner una imagen de fondo del header usando código personalizado, pero el problema es que no logré que fuera responsiva, por lo cual en el celular y tablet la imagen se veía del mismo tamaño que en la versión de escritorio (muy grande).

 

Muchas gracias a todos

 

Roberto Celis Q.
rcelisquiroga@hotmail.com

 

Header SIMPLE THEME.png

0 Likes
Highlighted

Hello ,

Can you please share site URL. so i can check the issue.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Tourist
8 0 0

Sure, here is: www.todolimpio.cl

 

 

Thanks a lot

Roberto 

0 Likes
Highlighted

Hello Robertoshopify,
Please add this code at the bottom on theme -> edit code -> assets -> theme.scss.liquid

.site-header.grid.medium-up--grid--table {
	background-image: url(https://cdn.pixabay.com/photo/2017/03/02/08/58/background-texture-2110724__340.jpg);
	background-repeat: repeat;
	background-position: 100% 100%;
}

Note: Use your image URL in place of image url which i have used in this code.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Tourist
8 0 0

Thanks a lot, but it doesn't work. As you can see in the attached screen print, the website lose all their configuration, layout and sizes.

I had to remove the code of my website in order to preserve my website correctly.

 

Thanks again

 

Imagen1.png

 

Imagen2.png

 

Imagen3.png

 

0 Likes
Highlighted
New Member
1 0 1

I think this code is just missing the double quotes for the "image" URL because it worked for me :-)

1 Like
Highlighted
New Member
1 0 0

I did this and its not working

0 Likes
Highlighted
New Member
3 0 0

Hola Roberto, soy Pablo de Uruguay.

 

Tengo el mismo problema, el unico documento que pude encontrar es relativo a poner un icono o algo por el estilo.

Estoy tratando de obtener ayuda pero me ponen en una larga lista de espera....

 

Fui a tu sitio y veo que lo solucionastes (muy lindo sitio, by the way!), me podrias contar como lo hicistes?

 

Gracias!


@Robertoshopify wrote:

ENGLISH
Hi, I´m using theme SIMPLE in my Shopify store, and I would like to know how can I add an image on the header of the website. Also, I need this image it will be responsive in order to use in other devices like Cellphone or tablet.

You can see more details in the attached file.

 

I was able to put an image as background with custom code. My problem is I can't set the image as responsive, so in desktop version the image looks great, but in mobile version the image has the same size than desktop, so looks awful


Please let me know if you need more info from my side
Thanks in advance

 

ESPAÑOL
Hola,
Estoy usando el tema SIMPLE para mi tienda, y me gustaría saber cómo puedo agregar una imagen en el Header de la página. Además, necesito que esta imagen sea responsiva para que pueda ser usada en un Celular o Tablet.

dejo un adjunto más abajo con la imagen para explicar lo que necesito.

 

Logré poner una imagen de fondo del header usando código personalizado, pero el problema es que no logré que fuera responsiva, por lo cual en el celular y tablet la imagen se veía del mismo tamaño que en la versión de escritorio (muy grande).

 

Muchas gracias a todos

 

Roberto Celis Q.
rcelisquiroga@hotmail.com

 

Header SIMPLE THEME.png


 

0 Likes
Highlighted
New Member
3 0 0

You forgot to tell us where in that code we should paste that...

 


@oscprofessional wrote:

Hello Robertoshopify,
Please add this code at the bottom on theme -> edit code -> assets -> theme.scss.liquid

.site-header.grid.medium-up--grid--table {
	background-image: url(https://cdn.pixabay.com/photo/2017/03/02/08/58/background-texture-2110724__340.jpg);
	background-repeat: repeat;
	background-position: 100% 100%;
}

Note: Use your image URL in place of image url which i have used in this code.


 

0 Likes