Keep last footer item menu open mobile

[Luxurymrkt]

 

 

Hi,

id like to keep the last footer menu item open at all times on mobile because it has a picture

my site is https://luxurymrkt.com/products/balenciaga-b-python-print-calfskin-leather-wallet-on-chain-bag

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

Hi @Luxurymrkt Please add code here to open this accordion:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

<script>
window.addEventListener('load', function() {
    setTimeout(function() {
      var lastItem = document.querySelector('.grid__item:last-child');
      var clickEvent = new Event('click');
      lastItem.dispatchEvent(clickEvent);
    }, 1000);
  });
</script>

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

[swym]

Hey @Luxurymrkt, 

It's good practice to create a copy of your theme and work on that to preview the changes before applying, especially if you are editing the raw code. Alternatively, you can also use the Shopify theme editor’s versions to revert to previous versions, but it is not recommended if you are making multiple changes.

Now to answer your specific question on keeping the last footer menu item remain open always, please follow the below steps: 

1. Open the code editor, as shown in the screenshot below.

2. Create a snippet called ‘custom-footer-script’ and add the below code: 

<style>
  .site-footer .grid__item:last-child button {
     display: none; 
  }
</style>

<script>

  window.onload = function() {

  const footerLastItem = document.querySelector('.site-footer .grid__item:last-child button'); 
   footerLastItem.dispatchEvent(new CustomEvent('click')); 

  }

</script>

3. Include the ‘custom-footer-script.liquid’ file in your “theme.liquid” file.
    Add the following include code to your theme.liquid file at the bottom.

{% render 'custom-footer-script' %}

See the screenshot below:

4. Done? Now save the changes, and try previewing to confirm if the changes work for you.  In the reference above, it looks something like below:

Hope this helps! 

Regards, 

Abhishek from Swym