Collapsible footer / Accordion on mobile + font on collapsible tabs website

Store Design
, , , ,

Topic summary

A user is attempting to add collapsible accordion functionality to footer headers on mobile devices but the provided CSS and JavaScript code isn’t working. They also report a font inconsistency issue with the collapsible tab titles.

Key troubleshooting steps suggested:

  • Inspect footer elements to verify actual class names (may differ from .footer-block__heading)
  • Ensure CSS is placed in theme.css or base.css
  • Confirm JavaScript is added at the end of footer.liquid before </body>
  • Fix font mismatch by adding font-family: inherit !important; to the heading class

Current status:
The user clarified the collapsible element is actually on product pages (not the footer) and requested assistance with implementation. The discussion remains open with the user seeking direct help to implement the code correctly.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hello, I hope someone can help me. Im having trouble integrating the right code on my Shopify website. I want the footer headers to be collapsible. I found this code on the Shopify community, but I tried and it did nothing.

@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; } }

I also have the problem that the title of the collabsible tap on my website is a different font than the rest. Really hope someone can help me here;)

Thanks, Victor

2

hi @VIFRE

You’re almost there — the code looks good, but it might not be working because the class names in your theme are different.

Here’s what to check:

  1. Inspect your footer headings in the browser (right-click > Inspect) and see if the class is really .footer-block__heading. Some themes use different class names like .footer__title or similar — update the CSS/JS selectors accordingly.
  2. Make sure you’re adding the code in the right place:

CSS can go in your theme.css or base.css.

The should be placed at the end of your footer.liquid file, before .

  1. Font issue: The font mismatch could be because your collapsible heading doesn’t inherit the footer font styles. You can add this to your CSS:
.footer-block__heading {
  font-family: inherit !important;
}
3

Good afternoon Dotsquares,

Thank you so much for your fast reply. I will try to edit the coding of the footer.

Where do I paste the CSS for the collapsible heading? Btw its not in the footer, its just on my regular page (product information). Is there any way you could implement the code for me?:wink:

Hope to hear from you soon.