About this block

Footer Accordion Mobile keeps four full link groups without making phone users scroll past forty rows, the groups collapse into an accordion under about the tablet breakpoint and spread into four columns on desktop. Shop opens by default so the footer is never a wall of closed triggers.

Columns are one array rendered twice, once as accordion items and once as desktop columns, so both layouts stay in sync from a single source. A large footer earns its links back on small screens by hiding everything but the headings until someone asks.

When to use

Reach for this block as the site footer whenever the link count is high enough to bury the legal bar on a phone. Order the groups by how often people reach for them, the open default should be the column most visitors want.

A natural flow around it on an Ecommerce Pro page:

Before

• Store hero

After

• Nothing, footers end the page

What you can display

One strong use is four collapsed groups on mobile. Other accordion footers:

• Fewer groups. Two or three columns for a leaner store where four would feel padded.
• Icon triggers. A small glyph beside each heading to speed scanning on a long footer.
• Persisted state. The last opened group remembered so return visitors land where they left.

Tip: keep one group open by default, an all closed accordion hides the fact that there are links at all and reads as an empty footer.