All things Shopify and commerce
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 <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>
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
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025