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?
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024