Hi @Kevin, you can build diffent templates with different footers. You just need to change the footer section in the layout file. You can build the page with the second footer in webflow and later assign a template to the layout file:
Hey Jonas, only got around to working on this just now, but I do not understand completely. Will it be easy for my client to change the colors in the footer this way?
yes 🙂 you just need to make the two templates with diffrent footers
Ok so they will have the option in the customiser then?
If I make a new component of the footer they will not be in sync anymore so I would like to avoid that
I would like to just apply some different styling, perhaps I can just move the footer into the sections so they are editable per page?
Although then the text settings should be set on each page which is not great
you can create tow webflow components and use the component propertys with li-section tag. The you can create two footer with one component
Could connect them to metaobjects fields with the Shopify cms though
maybe it also makes sense using a metfafield for this
Metafield with footer in the main sections and have the text from the icon in the right corner?
Ah ok you can use component properties? Do you have any docs on how that would work with Shopify? (I know what the component properties are in Webflow though)
You can use component propertys to set diffrent attributes. For example to set different section names.
ah Dynamic settings do not work on global sections 😦
No I see that! I could just move the Footer section into the main sections
Im not sure if that is great practise though
yes. That would work. But the footer wont be connected with other footer in shopify. but i think this is something you want to do or?
I could remove the real footer, then have a "fake" footer in the main sections, so I can set the color on each page I guess
But I need the navigation to change colours as well on some pages. Love my designer hahaha
Can you explain the component property option a bit more, I dont understand
I've tried the option with the section in the main sections but it does not really make sense because the Footer doesnt remember the dynamic content either. So probably not the best way to do that
when you only want to change the color you could also try to add a css section where you can change colors of specific classes on specific pages
and then adding !important
That would be a easy solution maybe but would be not very UI friendly for the client right
A toggle on the footer element with white/black for each page would be the best
This does make sense to me, but its chatGPT so I am not sure if its correct haha
yes that would also work. But then you need to create a settig for every page. could be a lot of work an is not scalable
Right or could I have a standard that is applied to all pages and then a custom?
Hi @Kevin, yes that would work. Do you found a solution?
No I think that still wouldn't give me the ability to change the footer color on each page right? I would still have to set it up so some pages use the different footer. Not the best option
I tried adding custom css here but this is applied to all sections... :/
I could add a section that just has two input fields for the custom colors and this css? So my client can add this "Custom Navigation and Footer colors" section and set the colors, that only apply to the page that has this section on it?
But that is a bit of a weird way of doing this I suppose
I have added this in the head of theme.liquid
{% if template == 'index' %}
<style>
.section_navbar a {
color: white !important;
}
.section_navbar {
color: white !important;
background-color: black !important;
}
</style>
{% endif %}
Which works! But my client cant easily set their own color but its something!
I'd also like to apply these styles on this page
https://117fc9-51.myshopify.com/pages/the-underdogbut this doesnt work:
{% if template == 'index' or (template == 'page' and page.handle == 'the-underdog') %}
<style>
.section_navbar a {
color: white !important;
}
.section_navbar {
color: white !important;
background-color: black !important;
}
</style>
just quickly adding:
{% if template == 'index' or (template == 'page' and page.handle == 'the-underdog') %}
( ) is not correct liquid syntax. you would nee to create a second if wrapper
Ohhh what is not correct? Its working
It wasnt working before since my template name was page.the-underdog not just page
is it? 😄 nice.. dident know that 🙂
This is the code I ended up using:
{% if template == 'index' or (template == 'page.the-underdog' and page.handle == 'the-underdog') %}
<style>.section_navbar a {
color: white !important;
}
.section_navbar {
color: white !important;
background-color: black !important;
}
</style>{% endif %}
{% if template == 'page.the-underdog' and page.handle == 'the-underdog' %}
<style>.section_footer{
color:white!important;
background-color:black!important;
}
</style>{% endif %}
In the head of my site settings in Webflow. It does render in Webflow.io staging but thats fine
