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

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
10887 2145 2282

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 %}

 

 

 

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu
Shopify Partner
10887 2145 2282

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 %}

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 15 (15)

Made4uo-Ribe
Shopify Partner
9848 2342 2937

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 are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

Dan-From-Ryviu
Shopify Partner
10887 2145 2282

Hi @tobyh4 

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

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

tobyh4
Excursionist
30 0 5
Dan-From-Ryviu
Shopify Partner
10887 2145 2282

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 %}

 

 

 

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- 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
10887 2145 2282

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 %}

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- 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
10887 2145 2282

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 %}

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

tobyh4
Excursionist
30 0 5

perfect, cheers

mtrappe
New Member
4 0 0

This also doesn't work

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...

mtrappe
New Member
4 0 0

This doesn't work

Dan-From-Ryviu
Shopify Partner
10887 2145 2282

Please share your store URL

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

mtrappe
New Member
4 0 0
Dan-From-Ryviu
Shopify Partner
10887 2145 2282

Hi @mtrappe 

Please use this code 

 

{% if template == 'index' %}
<style>
.header__heading-logo-wrapper {
    background-image: url('your logo link here') !important;
    background-size: cover;
    background-position: center;
}
.header__heading-logo-wrapper .header__heading-logo { opacity: 0 !important; }
.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 %}

 

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.