debut theme adding a image on the top corner of the header

New Member
8 0 0

Hi everyone,

 

I would like to add an image to my website. IT will be on the right top corner of the page, it will be displayed at every pages. I use debut theme, the desired look will be like this: Screen shot 2019-09-27 at 3.02.32 PM.png

any help will be appreciated! Thanks

0 Likes

Hello ,
You want this only for Desktop or in Mobile view as well.

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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
8 0 0

if it's possible for both. thank you!

0 Likes

Please add this code at the bottom of theme -> edit code -> assets -> theme.scss.liquid

Note : Please replace the image URL from the code with your image URL.

#shopify-section-header::after {
	background-image: url(https://png.pngtree.com/png-clipart/20190603/original/pngtree-leaves-roots-png-image_436895.jpg);
	display: block;
	z-index: 9999;
	content: "";
	position: absolute;
	width: 300px;
	height: 200px;
	background-position: center;
	background-size: cover;
	top: 0;
	right: 0px;
}

 

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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
8 0 0

Thank you so much for the answer, it works! :) but  I have some problems with the code:

 

1. In the mobile it is very big, is it possible to decrease the size of it or maybe i add another image for mobile?

2. My image is a hanging plant, the hanger does not show up on the right side of my page so maybe the code can start showing the image from top to bottom?neon-pothos-box-of-us.png

 

3. Is it possible also the image can be shown on the main div too? I think the code shows the leaves till the end of the navigation bar.

4. the search button does not show up as soon as i wrote the code.

5. I know i asked so many but what if I want to put another plant on the left side of the page, what should i change in the code?

 

Thank you again, I am new at the Shopify community but I already loved it!

0 Likes

Hello
Just replace this code with previous code

@media only screen and (min-width: 768px) {
#AccessibleNav::after {
	background-image: url(https://cdn.shopify.com/s/files/1/0003/0579/0982/files/neon-pothos-box-of-us_8ce5bcba-ec5b-43d7-bf84-1db9323a48fe.png?1221);
	display: block;
	z-index: 9999;
	content: "";
	position: absolute;
	width: 200px;
	height: 348px;
	background-position: center;
	background-size: cover;
	top: 36px;
	right: 0px;
}
#AccessibleNav {
	position: relative;
}
}

With this code this image not visible in Mobile view only visible in Desktop view.

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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
8 0 0

thanks it is a really nice idea but what i want is actually thisScreen shot 2019-09-27 at 5.13.30 PM.png

0 Likes