Keep last footer item menu open mobile

Keep last footer item menu open mobile

Luxurymrkt
Navigator
619 2 108

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

51526D6A-2044-4BE7-9AAC-FA35A89E49CB.png

 

CD0222E9-742E-47AA-A4CF-5074768786AF.png

 

Thank You | mike
Replies 2 (2)

PageFly-Noah
Shopify Partner
1317 233 268

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

swym
Explorer
62 7 23

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.

swym_0-1718253585952.png

 

 

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:
swym_4-1718254266560.png

 


 

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:

swym_3-1718254038792.png

 

Hope this helps! 

 

Regards, 

Abhishek from Swym

- Appreciate the assistance. Show your approval with a Like! And when your question finds its answer, seal the deal by marking it as an Accepted Solution!
- Our Solutions: Wishlist Plus | Swym Back in Stock Alerts | Swym Gift Lists and Registries