A user wants to add a dropdown or accordion menu to their footer for blog navigation, similar to their header menu functionality, to display multiple blog post options instead of linking directly to a single post.
Two solutions provided:
Manual custom code approach:
App-based solution (no coding):
Status: The question remains open as the original poster hasn’t confirmed which approach they’ll pursue or requested further assistance.
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:
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.
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:
If you’re comfortable editing your theme’s code, you can manually add an accordion-style dropdown. Here’s how:
1-Go to Online Store > Themes > Actions > Edit code.
2-Find the file:
3-Look for the
Replace it with this code:
Blog Categories
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;
}
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!
If you don’t want to edit code, you can use an app to add dropdowns in your footer:
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.
If you need any other assistance, feel free to reply and I will try my best to help.
Best regards,
Daisy
