Solved

How can I change my homepage logo color in Dawn theme?

tobyh4
Excursionist
30 0 5

Hi,

 

I am trying to change my logo to white, only for my homepage. I have a transparent header on homepage which turns white on scroll and all icons and logo turn black. Have managed to make all icons (cart, hamburger etc.) white before scroll, but can't seem to do it for the logo. am using Dawn theme. Website link is https://mauriciobenyar.myshopify.com/

Would appreciate help,

 

Thanks in advance,

Toby

Accepted Solutions (2)
Dan-From-Ryviu
Shopify Partner
7969 1552 1580

This is an accepted solution.

Please add this code to your theme.liquid file before </head> tag

 

 

{% if template == 'index' %}
<style>
.header__heading-logo-wrapper {
    background-image: url('https://cdn.shopify.com/s/files/1/0795/4864/5720/files/MAURICIOBENYAR_5.png?v=1699902401');
    background-size: cover;
}
.header__heading-logo-wrapper .header__heading-logo { opacity: 0; }
.shopify-section-header-sticky .header__heading-logo-wrapper { 
background-image: unset;
}
.shopify-section-header-sticky .header__heading-logo-wrapper .header__heading-logo {
opacity: 1;
}

</style>
{% endif %}

 

 

 

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu
Shopify Partner
7969 1552 1580

This is an accepted solution.

Please update code to this 

{% if template == 'index' %}
<style>
.header__heading-logo-wrapper {
    background-image: url('https://cdn.shopify.com/s/files/1/0795/4864/5720/files/MAURICIOBENYAR_5.png?v=1699902401');
    background-size: cover;
    background-position: center;
}
.header__heading-logo-wrapper .header__heading-logo { opacity: 0; }
.shopify-section-header-sticky .header__heading-logo-wrapper { 
background-image: unset;
}
.shopify-section-header-sticky .header__heading-logo-wrapper .header__heading-logo {
opacity: 1;
}

</style>
{% endif %}

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 10 (10)

Made4uo-Ribe
Shopify Partner
6424 1540 1909

Hi @tobyh4 

 

Please follow the instructions below to change your logo to white when not scrolled down

 

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • In the "Layout" folder, click on "theme.liquid" file
  • Find the <body... and make a new line, then paste the code below
{% if template.name == "index" %}
header.site-header-transparent .header__heading {
    filter: invert(1);
}
{% endif %}

 

{% if template.name == "index" %}
header.site-header-transparent .header__heading {
    filter: invert(1);
}
{% endif %}
  • And Save. 
  • Result:

Made4uoRibe_1-1700098210004.png

 

 

Please refer to image below for placement. 

Made4uoRibe_0-1700098172795.png

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.

Dan-From-Ryviu
Shopify Partner
7969 1552 1580

Hi @tobyh4 

Please send me the link of white logo so I can provide solution

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

tobyh4
Excursionist
30 0 5
Dan-From-Ryviu
Shopify Partner
7969 1552 1580

This is an accepted solution.

Please add this code to your theme.liquid file before </head> tag

 

 

{% if template == 'index' %}
<style>
.header__heading-logo-wrapper {
    background-image: url('https://cdn.shopify.com/s/files/1/0795/4864/5720/files/MAURICIOBENYAR_5.png?v=1699902401');
    background-size: cover;
}
.header__heading-logo-wrapper .header__heading-logo { opacity: 0; }
.shopify-section-header-sticky .header__heading-logo-wrapper { 
background-image: unset;
}
.shopify-section-header-sticky .header__heading-logo-wrapper .header__heading-logo {
opacity: 1;
}

</style>
{% endif %}

 

 

 

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

tobyh4
Excursionist
30 0 5

worked perfectly, thanks so much

Dan-From-Ryviu
Shopify Partner
7969 1552 1580

Please update code to this to solve logo for sticky header

{% if template == 'index' %}
<style>
.header__heading-logo-wrapper {
    background-image: url('https://cdn.shopify.com/s/files/1/0795/4864/5720/files/MAURICIOBENYAR_5.png?v=1699902401');
    background-size: cover;
}
.header__heading-logo-wrapper .header__heading-logo { opacity: 0; }
.shopify-section-header-sticky .header__heading-logo-wrapper { 
background-image: unset;
}
.shopify-section-header-sticky .header__heading-logo-wrapper .header__heading-logo {
opacity: 1;
}

</style>
{% endif %}

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

tobyh4
Excursionist
30 0 5

It cuts the logo off slightly at the end, do you know how to fix this?

7694154C-A9D5-4C65-8E1B-335D9A1843AC.jpeg

Dan-From-Ryviu
Shopify Partner
7969 1552 1580

This is an accepted solution.

Please update code to this 

{% if template == 'index' %}
<style>
.header__heading-logo-wrapper {
    background-image: url('https://cdn.shopify.com/s/files/1/0795/4864/5720/files/MAURICIOBENYAR_5.png?v=1699902401');
    background-size: cover;
    background-position: center;
}
.header__heading-logo-wrapper .header__heading-logo { opacity: 0; }
.shopify-section-header-sticky .header__heading-logo-wrapper { 
background-image: unset;
}
.shopify-section-header-sticky .header__heading-logo-wrapper .header__heading-logo {
opacity: 1;
}

</style>
{% endif %}

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

tobyh4
Excursionist
30 0 5

perfect, cheers

Indre_Mi
Tourist
3 0 0

Hello,

 

Could you please help me to change the logo on Homepage only. My theme is Refresh, my desired logo link https://cdn.shopify.com/s/files/1/0656/1074/4076/files/Asset_16_359d321d-6acd-4d2f-9429-1113d36f2b30...