Many Shopify store owners want a footer that shows a full multi-column layout on desktop, but switches to an accordion or stacked layout on mobile.

You can do this without apps and without creating multiple footer sections. This tutorial will show you how to:

• Create a desktop footer layout
• Create a mobile-friendly accordion footer
• Automatically switch between layouts using CSS or Liquid
• Ensure content stays synced between both layouts

📌 Method 1 — Easiest: Use CSS to Show/Hide Layouts Based on Screen Size

This method requires no JavaScript and works for all Shopify themes.

Step 1 — Duplicate your footer layout

Inside footer.liquid, wrap your current footer with a desktop-only container:

  {% comment %} Existing footer content here {% endcomment %}

Now create a mobile version (accordion is recommended):

  

    Shop
    

      {{ linklists.main-menu | linklist }}
    
  

  

    Customer Service
    

      {{ linklists.customer-service | linklist }}
    
  

Step 2 — Add CSS to control visibility

In theme.css or base.css:

/* Desktop footer visible only on large screens */
.footer-desktop {
  display: block;
}

.footer-mobile {
  display: none;
}

/* Switch visibility on mobile */
@media(max-width: 767px) {
  .footer-desktop {
    display: none;
  }
  .footer-mobile {
    display: block;
  }
}

Now your footer automatically swaps between layouts depending on the screen size.

📌 Method 2 — Add Mobile Accordion Behavior (Optional)

For interactive mobile footers, add this JavaScript.

Add to footer.liquid or before