Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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
Solved! Go to the solution
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.
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.
Hi @tobyh4
Please follow the instructions below to change your logo to white when not scrolled down
{% 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 %}
Please refer to image below for placement.
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
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.
Hi Dan,
Here is the link to the white logo: https://cdn.shopify.com/s/files/1/0795/4864/5720/files/MAURICIOBENYAR_5.png?v=1699902401
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.
worked perfectly, thanks so much
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.
It cuts the logo off slightly at the end, do you know how to fix this?
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.
perfect, cheers
This also doesn't work
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...
This doesn't work
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.
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.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025