adding an image on the header

[oninski21]

I am having problems on adding images on the header. i want to add an image similar to the design provided me. Can anyone teach me how to add it to CSS? 

My website is https://myversatilehome.com/ using a DAWN theme

Thanks! 

[rajweb · Accepted solution]

Hey @oninski21 ,

To add an image to the header of your Shopify store using the Dawn theme, you can follow these steps:

1. Shopify Admin >Navigate to Settings > Files.

2. Upload your image file there, and copy the URL after uploading.

Add the Image to the Header Section:

1. Online Store

2. Themes 

3. Edit Code

4. Open the header.liquid file under the Sections folder.

Add the image code where you'd like it to appear in the header.. For example:

<div class="custom-header-image">
    <img src="{{ 'your-image-file-name.jpg' | file_url }}" alt="Header Image">
</div>

3. Style the Image Using CSS:

1. Open the base.css file in the Assets folder.

2. Add the following CSS:

.custom-header-image img {
    width: 100%; /* Adjust width as needed */
    height: auto; /* Maintain aspect ratio */
    max-height: 100px; /* Adjust the height limit */
    object-fit: cover; /* Ensures the image fits properly */
    margin: 0 auto; /* Center the image */
}

Adjust the width, height, and other properties based on your design needs.

Let me know if you need additional guidance!

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat

[oninski21]

Hello, 

Thanks for the help, i tried adding the script and the image but It did not show on my page. btw, where will I add the link of the image? 

[oninski21]

when i tried to add the image link. It says it has an error

not sure if I am correct what I am doing. haha!