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
Topic summary
A user wants to keep their footer’s last menu item permanently expanded on mobile devices because it contains an image.
Proposed Solutions:
Two different approaches were offered:
Solution 1 (PageFly-Noah):
- Add custom code to the theme’s code editor
- Involves editing theme files through Online Stores > Themes > Edit code
- Specific implementation details appear corrupted/unreadable in the original post
Solution 2 (swym/Abhishek):
- Create a custom snippet called ‘custom-footer-script.liquid’
- Include this snippet in the theme.liquid file using
{% render 'custom-footer-script' %} - Add JavaScript code to target and keep the last accordion item open
- Recommends creating a theme copy first to preview changes safely before applying
- Suggests using Shopify’s theme editor versions for rollback if needed
Status: The discussion provides technical CSS/JavaScript solutions but the conversation appears incomplete, with no confirmation whether either solution successfully resolved the issue.
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
Hope my solution will help you resolve the issue.
Best regards,
Noah | PageFly
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:
- Open the code editor, as shown in the screenshot below.
- Create a snippet called ‘custom-footer-script’ and add the below code:
- 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:
- 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