Want to keep the footer section of my website in accordion style in mobile mode ( Impact Theme )

Store Design
, , , , , , ,

Topic summary

A user wants to implement an accordion-style footer for mobile devices on their Shopify store using the Impact theme.

Current Situation:

  • Store URL provided with password access
  • User included a reference image showing the desired accordion layout
  • Code that successfully worked on Dawn theme is not functioning on Impact theme

Technical Details:

  • User attempted to add CSS and JavaScript code to footer.liquid file
  • Code includes media queries for mobile breakpoints, collapse/expand styling, and event listeners for accordion functionality

Response & Solution Path:

  • The Dawn theme code doesn’t work because each Shopify theme has different HTML structure and element classes
  • To fix this, the user needs to:
    • Inspect the footer element structure specific to Impact theme
    • Modify the CSS selectors and JavaScript to target Impact theme’s footer elements
    • Adapt the accordion logic to match Impact’s DOM structure

Status: Unresolved - requires custom code adaptation for Impact theme’s specific architecture.

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

Hello Everyone!

I want to keep the footer section of my website in accordion style in mobile mode. Please help me. Thank you.

Store: https://puppies-paws-shop.myshopify.com/

Password: Admin

I want to keep it like the image below.

dreamtechzone_5_0-1742037289110.png
dreamtechzone_5_0-1742037289110.png502×345 8.88 KB

I added this code below in the footer.liquid file in Dawn theme. It worked. But in this theme this code is not working.

@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; } }
1 Like
2

Hi,

Because on each theme other will has structure is different, if you want implement accordion on Impact theme, you should be make style and handle javascript for elements follow Impact Theme structure. The code can work on Dawn theme because the code using for element on Dawn theme.

To achieve, you should be check element on footer of Impact theme and change to code are handling above how to match with structure code footer on Impact Theme.