Shopify themes, liquid, logos, and UX
Hello everyone,
I have recently switched to Shopify from woo commerce. I am looking for a (Free) way if possible to get an accordion-style footer for my dawn theme.
Thank you
Solved! Go to the solution
This is an accepted solution.
No, their is no free way to get it, but i have created a solution for this.
Add this code in the bottom of footer.liquid file.
<style>
@media (max-width: 749px) {
.grid .footer-block.grid__item {
margin: 0;
}
.grid .footer-block__heading {
position: relative;
margin: 0;
padding: 1.5rem 0;
cursor: pointer;
}
.grid .footer-block__heading::after {
content: "+";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
text-align: center;
}
.grid .footer-block__heading:not(.block-collapsed)::after {
content: "-";
}
.grid .footer-block__heading.block-collapsed + .footer-block__details-content {
visibility: hidden;
opacity: 0;
height: 0;
margin: 0;
padding: 0;
transition: all .2s ease-out;
overflow: hidden;
}
.grid .footer-block__heading + .footer-block__details-content {
visibility: visible;
opacity: 1;
height: auto;
transition: all .2s ease-out;
overflow: hidden;
margin-bottom: 3rem;
}
}
</style>
<script>
window.addEventListener('DOMContentLoaded', () => {
if (window.matchMedia('(min-width: 750px)').matches) {
return
}
const handleCollapse = (heading) => {
if (heading.classList.contains('block-collapsed')) {
heading.classList.remove('block-collapsed')
heading.setAttribute('aria-expanded', 'true')
} else {
heading.classList.add('block-collapsed')
heading.setAttribute('aria-expanded', 'false')
}
}
document.querySelectorAll('.grid .footer-block__heading').forEach((heading, index) => {
heading.classList.add('block-collapsed')
heading.setAttribute('role', 'button')
heading.setAttribute('aria-expanded', 'false')
heading.setAttribute('tabindex', '0')
heading.nextElementSibling.setAttribute('id', `footer-block-index-${index}`)
heading.setAttribute('aria-controls', `footer-block-index-${index}`)
heading.addEventListener('click', () => { handleCollapse(heading) })
heading.addEventListener('keypress', () => { handleCollapse(heading) })
})
})
</script>
Sounds like a JS conflict. Take a look if you are using different versions of jQuery that might interfere with each other.
This is an accepted solution.
No, their is no free way to get it, but i have created a solution for this.
Add this code in the bottom of footer.liquid file.
<style>
@media (max-width: 749px) {
.grid .footer-block.grid__item {
margin: 0;
}
.grid .footer-block__heading {
position: relative;
margin: 0;
padding: 1.5rem 0;
cursor: pointer;
}
.grid .footer-block__heading::after {
content: "+";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
text-align: center;
}
.grid .footer-block__heading:not(.block-collapsed)::after {
content: "-";
}
.grid .footer-block__heading.block-collapsed + .footer-block__details-content {
visibility: hidden;
opacity: 0;
height: 0;
margin: 0;
padding: 0;
transition: all .2s ease-out;
overflow: hidden;
}
.grid .footer-block__heading + .footer-block__details-content {
visibility: visible;
opacity: 1;
height: auto;
transition: all .2s ease-out;
overflow: hidden;
margin-bottom: 3rem;
}
}
</style>
<script>
window.addEventListener('DOMContentLoaded', () => {
if (window.matchMedia('(min-width: 750px)').matches) {
return
}
const handleCollapse = (heading) => {
if (heading.classList.contains('block-collapsed')) {
heading.classList.remove('block-collapsed')
heading.setAttribute('aria-expanded', 'true')
} else {
heading.classList.add('block-collapsed')
heading.setAttribute('aria-expanded', 'false')
}
}
document.querySelectorAll('.grid .footer-block__heading').forEach((heading, index) => {
heading.classList.add('block-collapsed')
heading.setAttribute('role', 'button')
heading.setAttribute('aria-expanded', 'false')
heading.setAttribute('tabindex', '0')
heading.nextElementSibling.setAttribute('id', `footer-block-index-${index}`)
heading.setAttribute('aria-controls', `footer-block-index-${index}`)
heading.addEventListener('click', () => { handleCollapse(heading) })
heading.addEventListener('keypress', () => { handleCollapse(heading) })
})
})
</script>
awesome work mate. thank you so much. it worked perfectly as I wanted.
Thanks for this code. When I first applied it to my theme nothing happened. I think there is some lag with Shopify server. I tested in 3 different browsers and none of them loaded the footer as an accordion. About 20 minutes later it was working properly though.
Hi there,
Thank you for the code, I have pasted it at the bottom ot the footer.liquid file, however it just shows the minus (-) sign thats all. Do I have to do anything else? (see screenshot)
Hi @SpeedyDev
Thank you, that works perfect. However, is it possible that the tabs are not collapsed as default? Currently all tabs are open by default and I would like them closed as default.
Best regards,
Daniel
They are usually collapsed by default.
Hi @SpeedyDev, this is gold! Thanks so much for sharing. How can we get the tabs to be closed by default?
Hi.
Change this code .grid .footer-block__heading:not(.block-collapsed)::after {
content: "-";
To this (instead of after, change it to after.
.grid .footer-block__heading:not(.block-collapsed)::before {
content: "-";
If you need more help, check out madjaas.com
Hi Papavince,
i just copied your code and its working fine in the Normal Mobile mood
If i switch and rotate the phone it looks like this
May you can help out with a solution
thanks in advance
Thank you for this code! Is there a way to have the buttons/headings centered?
cooooool! thank you so much
Thanks a lot...it works pretty well
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn 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, 2025