2 Header Logos

[TheWebWizardz]

Hello everyone! Can someone please send me the kind code I need to add to the website header for implementing another image in the header? I am looking to add a header logo/image that shows a star rating like the example in the $400 theme that is showing it to the right of the search bar. So I do not want to have to remove our brand logo. Just add an additional star rating image on the right side of the navigation. Below is the example that shows on the right what I am looking for. The other photo TheWebWizardz is showing that I don't currently have that star rating image in there on the right of our navigation. Please and thank you!

 

 

[MiracleWebsoft]

HI @TheWebWizardz 

As review you looking to add review image in header. Its custom requirement. So we can develop an option for you to upload the image. So it will require max 1 hour so let me know if you are interested we can discuss it. 

[TheWebWizardz]

Im interested but if its just simple code, cant you just send it to me? Or what exactly does this entail going through you?

[MiracleWebsoft]

Need store access. As changes need to do in backend to give option to add new image. 

Let me know do I request access from Shopify partners. 

For quick communication. click on

contact 

[theycallmemakka]

Hi @TheWebWizardz 

Can you provide link to the store?

[TheWebWizardz]

thewebwizardz.com

[theycallmemakka]

Hi @TheWebWizardz ,

I have writted a CSS to add a second logo on the header. Please review this and let me know if this what you are looking for. You can change the URL of the image as per your requirement. If you want to make it dynamic, we will have to edit the theme section. As i i do not have access to the theme, i have only added the static CSS.

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>.header__row-desktop.lower  .header__row-segment-desktop.right:before {
    content: "";
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Trustpilot_Logo_%282022%29.svg/1200px-Trustpilot_Logo_%282022%29.svg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 158px;
    height: 70px; /* Set the height of the pseudo-element */
    max-width: 100%;
    width: 120px;
    margin-right: 25px;
}
</style>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[TheWebWizardz]

Do you have the added code so it can be on mobile as well?