Seeking Code to Modify Studio Theme’s Footer Menu into Dropdown Format with Arrows

Store Design
,

Topic summary

Goal: convert the Studio theme’s footer menu into a collapsible dropdown with arrow indicators for submenus (per attached sample image).

Requests: looking for code snippets and, critically, exact placement instructions for HTML, CSS, and JavaScript—e.g., which theme files to edit and whether code should go at the bottom, before/after , etc.

Attempts so far:

  • HTML added at the bottom of footer.liquid (footer template).
  • CSS added at the bottom of base.css (theme stylesheet).
  • New JavaScript file created in the assets folder.
    Result: not working; unsure what is missing or where code should be inserted.

Latest status: author followed up after limited guidance, asking precisely where each code block belongs (file names and locations). No confirmed solution yet.

Notes: the provided image is central to understanding the desired dropdown behavior. Link to store shared for context. Discussion remains open; awaiting clear implementation steps and file-placement guidance.

Summarized with AI on January 1. AI used: gpt-5.
1

Hello,

I am reaching out to seek assistance in customizing the footer menu of my Studio theme. I aim to enhance the user experience by converting the current footer menu into a dropdown format, complete with intuitive arrows to indicate expandable sections.

If anyone has experience with this type of customization or can provide guidance on how to implement this feature, I would greatly appreciate your input. Code snippets would be incredibly helpful. I have provided a Sample picture, Please check it out!

Thank you in advance for your support and collaboration!

Footer menu and sub menu.png
Footer menu and sub menu.png315×479 47.8 KB

2

@Saheedfly21 @Thank you so much for your help!
Could you please tell me where to exactly insert the first code, style code and JavaScript code?
Please let me know the names like footer.liquid where the code has to be placed & will these be right in the bottom of the code page?

3

1.I Inserted HTML in the bottom of footer.liquid

  1. CSS inserted in the bottom of base.CSS

  2. Created new file for JavaScript in asset folder

its not working

is there something I’m missing?

4

Re: Help Needed - Customizing Footer Menu in Studio Theme

Hi everyone,

I’m following up on my previous post regarding customizing the footer menu in the Studio theme. I’d like to convert the current menu into a dropdown format with arrows for a more user-friendly experience (similar to the attached sample image above).

I haven’t received any responses yet, but I’m hoping someone in the community might have some experience with this type of customization. Any guidance on achieving this or code snippets to get me started would be greatly appreciated!

Thanks again for your time and support!
Please help me where to Insert the code in the Store! for example in the bottom or before or after
please help me with the exact place

Best,

www.xaffine.com