Create an Accordion Footer Menu for Shopify Dawn Theme

In the world of e-commerce, optimizing your Shopify store for mobile devices is crucial. One effective way to improve the mobile user experience is by implementing an accordion-style footer menu. This feature allows users to expand and collapse different sections of your footer, making it easier to navigate on smaller screens. In this blog post, we’ll explore how to create an accordion footer menu for the Shopify Dawn theme, along with some tips and variations to enhance your mobile store’s functionality.

Understanding the Importance of Mobile-Friendly Footers

Why Mobile Optimization Matters

With the increasing number of mobile shoppers, having a responsive and user-friendly mobile site is no longer optional. A well-designed mobile footer can significantly improve navigation and user engagement on smaller screens.

Benefits of Accordion Menus

Accordion menus offer several advantages for mobile users:

1. Space-saving: They allow you to display more information in a compact format.
2. Improved navigation: Users can easily find and access the information they need.
3. Better user experience: Collapsible sections reduce scrolling and make the site feel more organized.

Implementing the Accordion Footer in Dawn Theme

The Basic Code Structure

To create an accordion footer menu in the Dawn theme, you’ll need to add some custom CSS and JavaScript to your theme. Here’s the most effective solution:

<style>
@media (max-width: 749px) {
  .grid .footer-block.grid__item {
    margin: 0;
  }
  .grid .footer-block__heading {
    position: relative;
    margin: 0;
    padding: 1.5rem 0;
    cursor: pointer;
  }
  .grid .footer-block__heading::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    text-align: center;
  }
  .grid .footer-block__heading:not(.block-collapsed)::after {
    content: "-";
  }
  .grid .footer-block__heading.block-collapsed + .footer-block__details-content {
    visibility: hidden;
    opacity: 0;
    height: 0;
    margin: 0;
    padding: 0;
    transition: all .2s ease-out;
    overflow: hidden;
  }
  .grid .footer-block__heading + .footer-block__details-content {
    visibility: visible;
    opacity: 1;
    height: auto;
    transition: all .2s ease-out;
    overflow: hidden;
    margin-bottom: 3rem;
  }
}
</style>

<script>
window.addEventListener('DOMContentLoaded', () => {
  if (window.matchMedia('(min-width: 750px)').matches) {
    return
  }

  const handleCollapse = (heading) => {
    if (heading.classList.contains('block-collapsed')) {
      heading.classList.remove('block-collapsed')
      heading.setAttribute('aria-expanded', 'true')
    } else {
      heading.classList.add('block-collapsed')
      heading.setAttribute('aria-expanded', 'false')
    }
  }

  document.querySelectorAll('.grid .footer-block__heading').forEach((heading, index) => {
    heading.classList.add('block-collapsed')
    heading.setAttribute('role', 'button')
    heading.setAttribute('aria-expanded', 'false')
    heading.setAttribute('tabindex', '0')

    heading.nextElementSibling.setAttribute('id', `footer-block-index-${index}`)
    heading.setAttribute('aria-controls', `footer-block-index-${index}`)

    heading.addEventListener('click', () => {
      handleCollapse(heading)
    })
    heading.addEventListener('keypress', () => {
      handleCollapse(heading)
    })
  })
})
</script>

Where to Add the Code

To implement this solution, you’ll need to add the code to your theme files. Here’s how:

1. Go to your Shopify admin panel and navigate to “Online Store” > “Themes”.
2. Find the Dawn theme and click “Actions” > “Edit code”.
3. Locate the footer.liquid file in the Sections folder.
4. Paste the provided code at the bottom of the footer.liquid file.
5. Save the changes.

Customizing Your Accordion Footer

Adjusting the Appearance

You can customize the appearance of your accordion footer by modifying the CSS. Here are some areas you might want to adjust:

1. Colors: Change the colors of the plus/minus icons and text to match your brand.
2. Font sizes: Adjust the font sizes for better readability on different devices.
3. Padding and margins: Fine-tune the spacing to achieve the desired layout.

Adding Animations

To make your accordion footer more engaging, consider adding smooth animations when expanding and collapsing sections. You can do this by modifying the CSS transitions in the provided code.

Troubleshooting Common Issues

Accordion Not Working on Mobile

If you find that the accordion isn’t functioning on mobile devices, double-check that you’ve placed the code in the correct file and that there are no conflicts with other scripts or styles.

Sections Not Collapsing by Default

Some users have reported that the accordion sections are open by default. To ensure they start collapsed, make sure the block-collapsed class is being added correctly in the JavaScript code.

Customizing for Different Themes

While this solution is optimized for the Dawn theme, it can be adapted for other Shopify themes with some modifications. Always test thoroughly after making changes to ensure compatibility.

Advanced Features and Variations

Excluding Specific Sections

You may want to keep certain footer sections, like social media links or newsletter sign-ups, always visible. To do this, you can modify the JavaScript to exclude specific elements from the accordion functionality.

Changing the Toggle Icons

If you prefer different icons for the expand/collapse functionality, you can replace the plus and minus signs with custom SVG icons or font icons. This allows for greater design flexibility and brand consistency.

Implementing Nested Accordions

For more complex footer structures, you might consider implementing nested accordions. This advanced technique allows for multiple levels of collapsible content, providing even more organization options for your mobile footer.

By implementing an accordion footer menu in your Shopify Dawn theme, you’ll significantly improve the mobile user experience of your store. Remember to test your implementation across various devices and browsers to ensure consistent functionality. With these tips and techniques, you’ll be well on your way to creating a more user-friendly and efficient mobile shopping experience for your customers.