Shopify themes, liquid, logos, and UX
Hello I would like to invert my logo on mobile the same way it inverts on desktop.
As you scroll through the initial banner (slideshow) photo
I cannot upload the inverted logo for mobile through the theme. is there a custom way to do so?
website: https://4bubs.com/
password: timo23
Thank you for all the help!
Solved! Go to the solution
This is an accepted solution.
Hi @timo23
Please add this code to theme.liquid file, before </body> in Online Store > Themes > Edit code then check and check again
<style>
@media (max-width: 749px) {
.sticky-header.is-scrolling .site-header__logo .inverted-logo {
display: none !important; }
.sticky-header.is-scrolling .site-header__logo .default-logo { display: block; }
}
</style>
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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>
@media (max-width: 749px) {
.sticky-header.is-scrolling .site-header__logo .inverted-logo {
display: none !important; }
.sticky-header.is-scrolling .site-header__logo .default-logo { display: block; }
}
</style>
{% else %}
<style>
@media (max-width: 749px) {
html .site-header__logo .inverted-logo { display: none !important; }
html .site-header__logo .default-logo { display: block !important; }
}
</style>
{% endif %}
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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.
Hi @timo23
Please add this code to theme.liquid file, before </body> in Online Store > Themes > Edit code then check and check again
<style>
@media (max-width: 749px) {
.sticky-header.is-scrolling .site-header__logo .inverted-logo {
display: none !important; }
.sticky-header.is-scrolling .site-header__logo .default-logo { display: block; }
}
</style>
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
I have added your code, and it worked almost perfectly.
However for instance when I go to product, the logo at the start is inverted. Once i scroll down it changes to original.
Any option to have it original all the time on all the pages that do not have slideshow banner image on top.
So inverted logo is only active while in overlay of banner, otherwise it is always original logo.
Attaching photo for reference
This is an accepted solution.
Please update code to this
{% if template == 'index' %}
<style>
@media (max-width: 749px) {
.sticky-header.is-scrolling .site-header__logo .inverted-logo {
display: none !important; }
.sticky-header.is-scrolling .site-header__logo .default-logo { display: block; }
}
</style>
{% else %}
<style>
@media (max-width: 749px) {
html .site-header__logo .inverted-logo { display: none !important; }
html .site-header__logo .default-logo { display: block !important; }
}
</style>
{% endif %}
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Thank you so much, greatly appreciated!
You are very welcome!
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024