Shopify themes, liquid, logos, and UX
Hi there,
I need help overlaying my logo image on my hero banner.
We did this on our old site, but I can't remember how and it looks different on Shopify 2.0.
You can see our FOODEY logo appears on our banner on our old site here:
Basically, we want the attached image (logo) to appear above the banner text on this site:
https://foodey-ready-made.myshopify.com/
Thanks so much!
Solved! Go to the solution
This is an accepted solution.
Hi @Raegan_Zacher,
You can do the following to your website to obtain the same result with your other website
1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Asset folder and open the base.css file
3. At very end of the code, add the code below
@media only screen and (min-width: 750px) {
.banner__content:before {
content: "";
background-image: url(https://cdn.shopify.com/s/files/1/2632/6478/files/foodey-circle_134x134_crop_center@3x.png?v=1517228624);
display: block;
position: absolute;
width: 100%;
max-width: 30rem;
height: auto;
aspect-ratio: 1;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
top: 15%;
margin: auto;
opacity: 0.5;
}
.banner__content {
position: relative;
}
}
Result here:
This is an accepted solution.
Hi @Raegan_Zacher,
You can do the following to your website to obtain the same result with your other website
1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Asset folder and open the base.css file
3. At very end of the code, add the code below
@media only screen and (min-width: 750px) {
.banner__content:before {
content: "";
background-image: url(https://cdn.shopify.com/s/files/1/2632/6478/files/foodey-circle_134x134_crop_center@3x.png?v=1517228624);
display: block;
position: absolute;
width: 100%;
max-width: 30rem;
height: auto;
aspect-ratio: 1;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
top: 15%;
margin: auto;
opacity: 0.5;
}
.banner__content {
position: relative;
}
}
Result here:
Amazing! Thank you so much!
I tried this and it didn't work for me... wouldn't even let me save the code. ☹️
How can I use a different image to different banner overlay?
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025