Shopify themes, liquid, logos, and UX
I'm looking to recreate the homepage header on a different page.
Homepage: The header is transparent and when you scroll it turns white.
I want to be able to do that on one other page.
URL: https://0pbnb2ykvzx0kf49-59520712854.shopifypreview.com
Page I want to be able to add the transparent header - Originals
Any ideas? thanks in advance
Solved! Go to the solution
This is an accepted solution.
I actually solved it myself!
I edited the header.liquid file to add
elsif handle contains 'originals'
assign transparent_header = true
elsif handle contains 'uv'
assign transparent_header = true
and this allowed the same transparent header to show up on those pages!
yes please give me single page url
thanks for code do you have add sticky header code?
Hey @KetanKumar yes I want to keep it as sticky (it current is)
.js__header__stuck {
position: fixed;
width: 100%;
top: 0;
z-index: 6000;
}
I just don't know how to make the single page (originals) transparent (and then white as I scroll).
do you mean like this?
Yes! and as the user scrolls it goes back to the white background. Just like this page: https://scarlett-grae.myshopify.com/
@KetanKumar
I was looking at the header.liquid
this is what is in there
{%- liquid
assign transparent_header = false
if template contains 'collection' and collection.image and section.settings.transparent_collection
assign transparent_header = true
elsif template contains 'article' and article.image and section.settings.transparent_article
assign transparent_header = true
elsif template == 'index' and section.settings.transparent_home
assign transparent_header = true
endif
I'm wondering if there is a way to add the originals page in here.
I tried this: elsif template == 'original' and section.settings.transparent_original
assign transparent_header = true
But with no luck!
Any ideas @KetanKumar
This is an accepted solution.
I actually solved it myself!
I edited the header.liquid file to add
elsif handle contains 'originals'
assign transparent_header = true
elsif handle contains 'uv'
assign transparent_header = true
and this allowed the same transparent header to show up on those pages!
great thanks for update and share code
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024