ICON 6.6+ Mobile Footer Accordion Issue

If using the Icon theme and having difficulties with the footer on mobile devices, please follow this guide to fix the issue.

Step 1. Make a backup of the theme

Please make sure to create a backup of the theme before implementing this change.

Step 2. Adjust the footer.liquid file

In your, Admin click on Online store > Themes > Actions and choose Edit Code

On the next page open Sections > footer.liquid

Search for and find the lines of code with togglecontent in it, there are three total. 

Replace those lines of code with the following:

<label for="menu-item-{{ forloop.index }}" class="togglecontent"><h4>{{ block.settings.title }}</h4></label>
<input type="checkbox" id="menu-item-{{ forloop.index }}">

Still in footer.liquid file, find the following code. Press ctrl + F on a PC or command + F on a Mac and enter {% endcase %}.

{% endcase %}
{% endfor %}

Add the following code in between the {% endcase %} line of code and the {% endfor %} line of code

        input#menu-item-{{ forloop.index }} {
          display: none;
          position: relative;
        @media screen and (max-width: 740px) {
          .footer-block-content {
            display: none;
          #menu-item-{{ forloop.index }}:checked ~ .footer-block-content {
            display: block;
            visibility: visible;
            opacity: 1;

This is how it should look after

Step 3. Adjust the theme.js.liquid file

Go to Assets folder to find the theme.js.liquid file and search for mobileFooter. Press ctrl + F on a PC or command + F on a Mac and enter mobileFooter.

Select the following:

  (function mobileFooter() {
    Events.on("mediaquery:mobile", footerHide);
    function footerHide() {
      if ( desktop.matches ) {
      } else {

And Delete it.

Click Save.