Adding Drop Down Menu Footer

Adding Drop Down Menu Footer

manoman
Pathfinder
140 1 22

Hello!

I want to add like a drop down menu or accordion to one of my footer titles, because its for my blog and I have several blog posts and just dont want it to go to one of the blog posts when clicking it, I want to give alternative like I do in the header.

 

I will provide site URL in PMs if you can help since I want to be anonymous. Thank you so much!

 

Here is example of how I want:

manoman_0-1729419121963.png

 

Reply 1 (1)

DaisyVo
Shopify Partner
3413 391 473

Hi @manoman 

Got it! You’re looking to add a dropdown or accordion-style menu to your footer so that when users click on your blog section, they see multiple blog links instead of being redirected to a single blog post. You want it to function similarly to the header menu, which already has a dropdown for navigation.

How to Add a Dropdown (Accordion) to Your Footer

Shopify’s default themes don’t offer a built-in way to add dropdowns in the footer, but you can manually create one using custom Liquid code or third-party apps. I'll walk you through the two best ways:

1. Manual Method – Using Custom Code (Best for Customization)

If you’re comfortable editing your theme’s code, you can manually add an accordion-style dropdown. Here’s how:

Step 1: Add HTML for the Footer Menu

1-Go to Online Store > Themes > Actions > Edit code.

2-Find the file:

  • If you're using Dawn (or a newer Shopify 2.0 theme):
    Go to Sections/footer.liquid
  • If you’re using an older theme:
    Go to Snippets/footer.liquid

3-Look for the <ul> or <nav> element where your footer menus are listed.

Replace it with this code:

<div class="footer-dropdown">

    <button class="footer-dropdown-toggle">Blog Categories</button>

    <ul class="footer-dropdown-menu">

        <li><a href="/blogs/news">News</a></li>

        <li><a href="/blogs/tips">Tips</a></li>

        <li><a href="/blogs/inspiration">Inspiration</a></li>

    </ul>

</div>

Step 2: Add CSS to Style the Dropdown

Go to Assets > base.css (or theme.css, depending on your theme).

Add this CSS at the bottom:

.footer-dropdown {

    position: relative;

}

 

.footer-dropdown-toggle {

    background: none;

    border: none;

    font-size: 16px;

    font-weight: bold;

    cursor: pointer;

    padding: 10px 0;

    display: block;

    width: 100%;

    text-align: left;

}

 

.footer-dropdown-menu {

    display: none;

    list-style: none;

    padding: 0;

}

 

.footer-dropdown-menu li {

    padding: 5px 0;

}

 

.footer-dropdown-menu a {

    text-decoration: none;

    color: inherit;

}

 

Step 3: Add JavaScript to Make It Functional

Go to Assets > theme.js (or global.js)

Add this at the bottom:

document.addEventListener("DOMContentLoaded", function () {

    const dropdownToggle = document.querySelector(".footer-dropdown-toggle");

    const dropdownMenu = document.querySelector(".footer-dropdown-menu");

 

    dropdownToggle.addEventListener("click", function () {

        dropdownMenu.style.display = dropdownMenu.style.display === "block" ? "none" : "block";

    });

});

 

Now your footer blog menu should expand and collapse when clicked!

2. Alternative Method – Using a Shopify App (No Coding)

If you don’t want to edit code, you can use an app to add dropdowns in your footer:

  • Meteor Mega Menu
  • Smart Mega Menu & Navigation

These apps let you add expandable menus (accordion/dropdown) in the footer or header with no coding required. Just install, set up your menu structure, and style it to match your store.

Final Thoughts

  • If you want full control and a lightweight solution, the custom code method is best.
  • If you prefer an easy setup, an app will do the job without touching code.

If you need any other assistance, feel free to reply and I will try my best to help.
Best regards,
Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution