I’d like to add our company’s logo to the website image banner section of Dawn theme. I’m familiar with HTML and CSS but Liquid is a whole new world to me, would any one be of assistance?
Hi @JethroW ,
This is Mike from Omega
Because you are familiar with HTML and CSS, it’s easier.
You can try my solution:
-
Open file image-banner.liquid in theme editor
-
Find the div has id: Banner-{{ section.id }} and insert the img tag, like image below
-
Add the link to your logo and add class for that image tag, in the example, class is ‘custom-logo-banner’
-
Add some CSS code inside the style tag like:
In the CSS code:
a. You should set default the image you add to be hidden by display: none
b. You set property position: relative for the div with id: Banner-{{ section.id }} and set position: absolute for the img tag you add
c. You change position of logo by properties: top and right or bottom and left
the section.id in id of the div is dynamic, so you should check on your online store which id of section you want to add logo is first.
Hope my answer will help you
Mike from Omega
Mike.
You seem the the guy who has exactly the answer I am looking for.
I want to make my banner image on here (www.drekkly.com) dynamic so it looks the same on widescreen or laptop. On my monitor it is all good but on my macbook the sides are cut off.
What is the best way to do this? I have changed dimensions multiple times with banner image and nothing helps as obiously there is a graphic and word on there. How can I get this so it auto resizes no matter where the site is being viewed?
Obi-Wan, you’re my only hope. ![]()
PS. I’m not proficient in CSS or HTML - Kinda wish I was now though. Thx

