Collapsible menu shopify. Open your section -> footer.

Collapsible menu shopify I have attached a picture of what it currently looks like and how I want it to ideally turn out afterwards. liquid file and paste the following code at the bottom: Jun 5, 2023 · Hi You need to create a page template and assign that template to a certain page. 0. Finally, hit Save . Having collapsible areas are useful for adding lots of text to a single page and making it easier for visitors to find the information that they want quickly. mysh Jul 18, 2024 · Hello @Us1256 ,. I can add separate collapsible rows but not for each product descri Jun 5, 2023 · Hello, I have a collapsible menu for my help section pages eg: privacy policy, terms & conditions, F&Q ECT This menu is showing on other pages such as my About page, blog page . But on the SENSE Template, there are no customizable settings to do that. Sep 10, 2020 · Hyde here from Shopify. How would i achieve this? I am using dawn 13. HTML, JavaScript, CSS, and Liquid), then you can try to follow the custom coding provided by Mobile Code or this modification on footer Jun 22, 2023 · Hello, I'm looking to make my footer categories collapsible on mobile in the Dawn theme. If you have any further questions, please feel free to tell me. If our Answer is helpful then please Like and Accept Solution! I am an eCommerce and Marketing Technology consultant based in India. However it looks very awkward and messy on mobile, so am hoping to clean it up by making all 3 of the menu's collapsible/accordion with a plus/minus sign that can expand the menu as needed (collapsed by default). liquid file and paste the following code at the bottom: Apr 12, 2023 · Go to Themes > Online Store > Click on drop-down menu of Published Theme - Edit Code > in the Assets > find Component-menu-drawer. liquid file and paste the following code at the bottom: Dec 17, 2023 · Hi @Amandalman, This is Theodore from PageFly - Shopify Page Builder App. Can someone please help? This is my store. com Password: hello Nov 4, 2024 · Shopify Theme Advanced Backend Developer and Debugger Want to modify or develop new app, Hire us. Jul 5, 2024 · Hello, Can anybody help me in making the menus of my footer collapsible, I use a 3rd party theme (Unicorn) and would like to display accordion-style menu on Mobile for my website. Nov 4, 2024 · Shopify Theme Advanced Backend Developer and Debugger Want to modify or develop new app, Hire us. I want to add 2 columns in one row in flex design. Aug 2, 2022 · Hello, I'm looking to make my footer categories collapsible on mobile in the Dawn theme. How I want it to be collapsed: Aug 30, 2023 · Go to Themes > Online Store > Click on drop-down menu of Published Theme - Edit Code > in the Assets > find Component-menu-drawer. On resize, the ::after icon shows up but the actual collapsing doesn't work. com Any help is greatly appreciated Apr 11, 2023 · Hello , Go to Themes > Online Store > Click on drop-down menu of Published Theme - Edit Code > in the Assets > find Component-menu-drawer. . How to do that? 2) How can I make the footer menus collapsable? theme: impulse, thestateplate. liquid. Technical Q&A. There's a lot of empty space between each menu when its closed. no-js-hidden { margin: 0 auto !important; } Thanks Sep 2, 2024 · Go to Themes > Online Store > Click on drop-down menu of Published Theme - Edit Code > in the Assets > find Component-menu-drawer. liquid file and paste the following code at the bottom: Mar 30, 2022 · Hello, I'm looking to make my footer categories collapsible on mobile in the Dawn theme. Dec 17, 2023 · Hi @Amandalman, This is Theodore from PageFly - Shopify Page Builder App. Follow these steps: 1. Hi, I changed some code and need to fix this. The collapsible content should now be displayed on those pages. 0 for my website. I want the corners of the light gray May 26, 2023 · Solved: Hey everyone, I followed the advices from another Q&A on shopify community about making images in slideshow block clickable instead of adding a button, on the DAWN theme. Jul 18, 2024 · I would like to change the current menu into collapsible tabs with a plus and minus icon. So when I open the hamburger menu, the navigation items should be collapsible tabs. liquid file. escape }} columns widget--menu 5 days ago · @media screen and (min-width: 1024px){ . It is working, yet when in open the collapsible menus on top or on the left (when on mobile) it is behind the slideshow, as if it was in a Oct 27, 2021 · thanks for for its do you need same as mobile view on desktop right yes its possible to customization code Apr 27, 2023 · Hi sandy again. Dec 29, 2024 · Hey guys, I need some help tweaking the "collapsible content" section on my site. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. I have stylized descriptions for @media for mobile and desktop view with img src along with <hr>'s. I've managed to make the schema Jan 21, 2025 · Hi, how can I add a simple animation for smooth sliding in and out of collapsible content on mobile? The animation already works on desktop, but for some reason, it only works there. How can this one icon be removed? The code is below the image. Thank you! How it's looking right now . Asset->/ theme. How can I make it work similarly on mobile? Throught some javascript? Here’s my store: https://1049xn-ya. Instead of making filter groups collapsible, I'd like them to scroll. Jul 18, 2024 · Thank you , but it's not exactly what I was looking for. Sep 6, 2024 · Hi I was hoping to get help on changing my footer menus to become collapsible, add separator lines and make the icons being +/- when closed and opened. Save the footer. Oct 25, 2024 · Hello and thanks for reading! I have these Quick add buttons enabled in my Complimentary productt metafield. Shopify Apps. so I put Apr 12, 2023 · Go to Themes > Online Store > Click on drop-down menu of Published Theme - Edit Code > in the Assets > find Component-menu-drawer. Sep 25, 2024 · Hello again, I updated @Guleria's code, - now the menu if you press the menu it can also close - and it stays open till closed by the user. I would appreciate your help. liquid file and paste the following code at the bottom: Jul 18, 2024 · Thank you , but it's not exactly what I was looking for. menu-drawer__submenu Jun 24, 2022 · Hello again, I updated @Guleria's code, - now the menu if you press the menu it can also close - and it stays open till closed by the user. Jan 4, 2022 · The design for desktop looks fine for the footer, there are 3 menus and a newsletter section and it lines up really well. On top, go to Pages > Create a template 3. With the Trade theme is there a way I can use a collapsible menu item (with an icon) but use HTML in the text editor? If I try adding HTML code to the current text editor section all the code is automatically removed once I save the page. footer-block__heading Dec 16, 2022 · So I'm having a bit of difficulty trying to add a new icon into the list of available icons for a collapsible row in the product template in the Dawn theme. Any tips of what modifications need to be made to the code? Thanks Hello everyone, I would like to make my Footer Menus collapsible on Mobile view only! (see screenshots below) I am using Trade Theme 15. I want the text on desktop menu product page collapsible triggers aligned Left. Sep 27, 2023 · I'm working on a site with Dawn V11 and this doesn't seem to work. menu-drawer__submenu Apr 11, 2023 · Hi Nice question but this is not simple to archive for that need to change html,css and Js code to make it working for that you need coding knowledge, you can simple get html, css and js code from here and adjust code in header. It is working, yet when in open the collapsible menus on top or on the left (when on mobile) it is behind the slideshow, as if it was in a Drop-down menus are used to organize products, collections, and pages in the main menu of your Shopify store. Go to Online Store -> Theme -> Edit code Jul 22, 2022 · So I'm having a bit of difficulty trying to add a new icon into the list of available icons for a collapsible row in the product template in the Dawn theme. Oct 16, 2024 · In this article, you will learn how to add an accordion in your Shopify store and convert the content tan so that it can accept all types of content, including images. Place the collapsible content immediately after the button that controls it, so merchants with vision or attention issues can easily discover what content is being affected. Hi everyone, do you know how to add an FAQ-style dropdown menu on the product page? (see comments for example screenshot). Also maybe change the font or lettering. myshopify. I hope this helps. 179 Views Dec 19, 2023 · Solved: Hi, I have collapsible menus on my product pages and I am trying to figure out how I can add each individual product description as a dynamic source so when someone clicks on the &quot;Description&quot; collapsible menu it will bring up the description of that particular product. Jun 24, 2022 · Hello again, I updated @Guleria's code, - now the menu if you press the menu it can also close - and it stays open till closed by the user. 2. Thank you for the prompt response and sharing those screenshots. I'm trying to make the footer menu's collapsible, especially on mobile devices, so that my customers won't have to scroll all the way down to find what they are looking for. Now inside the Customization menu where you originally added the text to the collapsible row, click the round stack icon and select Product from the Current Template drop down menu, and pick the Description metafield. Kind regards Mar 4, 2022 · In this video, I'm going to show you how to create collapsible accordions for your product descriptions using HTML and CSS. As you're looking for a theme customization, I'd encourage you to connect with us directly. 3 days ago · Hello @Us1256 ,. Displaying Image in the Collapsible Tab Mar 16, 2024 · If you're referring to the way that your menu in your header is collapse-able, this is reflected across all of the pages in your store that your header appears on, so you've already got this achieved! Aug 30, 2023 · I want to remove the collapsible menu from the footer on the mobile screen only. May 26, 2023 · Solved: Hey everyone, I followed the advices from another Q&A on shopify community about making images in slideshow block clickable instead of adding a button, on the DAWN theme. Sep 10, 2022 · Within the sidebar menu, click on the Collapsible Row section > Row content > click on the Insert Dynamic Source as the photo attached below > Select the associated metafield Finally, hit Save I hope this helps. liquid and paste the code above the . Shopify Scripts. * it works on mobile still Mar 20, 2021 · HELLO, 1) I want to center align my footer on desktop version. menu-drawer__navigation . com Please help. I would like to styleisze them and have them stretch out plus add some margins to the inner text. banned Dec 19, 2023 · Solved: Hi, I have collapsible menus on my product pages and I am trying to figure out how I can add each individual product description as a dynamic source so when someone clicks on the &quot;Description&quot; collapsible menu it will bring up the description of that particular product. liquid file and paste the following code at the bottom: Jan 6, 2025 · Hello @Us1256 ,. How I want it to be collapsed: Sep 10, 2022 · Within the sidebar menu, click on the Collapsible Row section > Row content > click on the Insert Dynamic Source as the photo attached below > Select the associated metafield . js . I have minimal coding experience, but google got me about half way, but my problem is that in the code of the theme, I can't figure our where the icons for the collapsible menu are. Jul 5, 2022 · You can edit the Collapsible Row in Online Store > Theme > Customize. Aug 2, 2022 · Hi Ketan, the codes in the link you have shared, where do these codes have to be placed in the Shopify code? Best regards, Daniel Aug 26, 2020 · Hey Hyde, Just responded to your PM, thanks! Sep 10, 2020 · Hi! Piggybacking here since similar threads elsewhere are abandoned. 1 Thanks! Dec 26, 2024 · I would like to make my Footer Menus collapsible on Mobile view only! (see screenshots below) I am using Trade Theme 15. The only way i seem to be a Nov 28, 2023 · Hello, I'm looking to make my footer categories collapsible on mobile in the Dawn theme. liquid file and paste the following code at the bottom: Jan 4, 2022 · The design for desktop looks fine for the footer, there are 3 menus and a newsletter section and it lines up really well. This is a great way to add some e Mar 18, 2024 · yes please follow the below instructions. Kind regards Jan 4, 2025 · Hello, Please try this code in the footer. Help would be appreciated 🙂 Dec 9, 2022 · Hi , As we are not coders in Support I can not teach you how to create or build a collapsible menu. This would be for the Description part. Dec 26, 2024 · I would like to make my Footer Menus collapsible on Mobile view only! (see screenshots below) I am using Trade Theme 15. Where and how do I make overflow tweaks to handle this? Thank you. Help would be appreciated Thank you! Mar 3, 2024 · IM having trouble with the Collapsible Content on the product pages. Apr 11, 2023 · Go to Themes > Online Store > Click on drop-down menu of Published Theme - Edit Code > in the Assets > find Component-menu-drawer. collapsible-content-wrapper-narrow > . 1. other info pages I want to add a collapsible menu to certain pages without it showing on every page Please le Sep 10, 2022 · Hi , In order to have different Collapsible Row content for each product, you first need to create metafield and then connect it with your theme setting to display metafield on your product pages: Create Metafield by going to Setting &gt; Metafields &gt; Products &gt; Add definition &gt; fill out the required info. can someone help me with this issue? here is the link for my store's product page. Oct 25, 2024 · Hello , Follow these steps: 1. liquid file and paste the following code at the bottom: Aug 28, 2024 · Settings, Custom Data, Products and Add definition. <style> @media (max-width: 749px) { . Is there a general code I can add or would this require a developer to have this made? Hello everyone, I would like to make my Footer Menus collapsible on Mobile view only! (see screenshots below) I am using Trade Theme 15. grid. collapsible-content__grid { width: 577px !important; margin-inline: auto; } } Please let me know if it works. accordion summary, . Go to Online Store->Theme-> Edit code 2. however, in the screenshot, the Brand should have sub-menus(COLLECTION NEWS ABOUT CONTACT) and arrow like 'BY ITEM' or 'BY SEASON'. menu-drawer__submenu 3 days ago · Hello @Us1256 ,. Go to Online Store -> Theme -> Edit code 2. Mar 25, 2024 · If you're referring to the way that your menu in your header is collapse-able, this is reflected across all of the pages in your store that your header appears on, so you've already got this achieved! Aug 24, 2021 · Hello, Empire Theme currently does not have a collapsible sidebar menu so everything is shown as a long-winded list. Mar 31, 2024 · Hello, In the mobile version, i feel like the footer menu's are too spaces out vertically, I would like to have drop down menu's. grid . Feb 8, 2020 · Here is a step-by-step guide on how to install an accordion jQuery widget to create a collapsible panel on any Shopify page. quick-add. Is there a general code I can add or would this require a developer to have this made? Nov 15, 2022 · Hi guys, Gabriel here, pretty new to the shopify world 🙂 I have a small problem that I couldn't find a solution to it, maybe you guys can help sort it out. now I can put several additional menu and edit their style. I would like to change the current menu into collapsible tabs with a plus and minus icon. Dec 20, 2023 · I have collapsible menus on my product pages and I am trying to figure out how I can add each individual product description as a dynamic source so when someone clicks on the "Description" collapsible menu it will bring up the description of that particular product. How I want it to be collapsed: Dec 21, 2023 · I have collapsible menus on my product pages and I am trying to figure out how I can add each individual product description as a dynamic source so when someone clicks on the "Description" collapsible menu it will bring up the description of that particular product. footer-block__heading::after,. collapsible-row-layout . Go to Online Store -> Theme -> Edit code Dec 28, 2023 · I recently put a code for a collapsible menu for mobile only, but theres one unwanted icon that shouldnt be there as seen in picture. Go to the front end of your Shopify store and check the pages that you added collapsible content to. I end up in the footer menu and I have to scroll up to see the collapsible row. It would probably be easier and simpler for you to simply pick a theme that already has a collapsible menu in it from our theme store. This type of organization makes it easier for c Hello everyone, I would like to make my Footer Menus collapsible on Mobile view only! (see screenshots below) I am using Trade Theme 15. https://eb00a5-ab. Is there a general code I can add or would this require a developer to have this made? My website is skiptheopticians. Go to Online Store -> Theme -> Edit code. After that go to the last line of the code press Enter and paste below code - @media (max-width: 989px){. footer-block. Managed Markets. Please paste it at the bottom of the file. Retail and Point of Sale. com pass jordan Jan 6, 2025 · Hello @Us1256 ,. footer-block__heading Jan 4, 2025 · Hello @Us1256 ,. Aug 15, 2023 · In each collapsible-content block, update the content with the content that you want to display. Mar 14, 2021 · Shopify Education and Credentials. liquid file and paste the following code at the bottom: Aug 30, 2022 · Add custom liquid block inside "Collapsible tab" section inside product information form Dec 21, 2023 · I have collapsible menus on my product pages and I am trying to figure out how I can add each individual product description as a dynamic source so when someone clicks on the "Description" collapsible menu it will bring up the description of that particular product. Mar 4, 2022 · Do you want to create collapsible accordions / tabs for your product descriptions on Shopify? You're in luck! In this video I'll show you how to do just that. menu-drawer__submenu Dec 28, 2023 · Hi This is Richard from PageFly - Shopify Page Builder App Please add this code to your theme. or hire any expert for that Best regard Jul 18, 2024 · Hello @Us1256 ,. If the content of the collapsible row is the same for all product pages, simply click on Add block > Collapsible row and insert the content in Row content. For each description, make it collapsable or accordion. For me, this is the FAQ section. Is there a general code I can add or would this require a developer to have this made? Nov 14, 2024 · In Dawn theme, is there any way to make collapsible tabs/accordions function so that only 1 stays open a time? At the moment they can all be opened at once. 2. Best regards, Theodore | PageFly Dec 26, 2023 · I recently put a code for a collapsible menu for mobile only, but theres one unwanted icon that shouldnt be there as seen in picture. I've used the code provided for Dawn, but it seems that the footer code lacks some of the structure to make it work. I am trying to make all of my footer navigation menus to be made into accordions instead of listing out all the links. 9eb30b. Sep 6, 2024 · Hi, I tried using your code and it works but it looks like this. css and open it. Otherwise, in order to add different content for each product, you first need. Open your base. grid__item {margin: 0;}. liquid above the to get this solved Step 1 : Online Stores > Themes >; More Actions &gt; Edit code Step 2 : click on theme. footer-block__heading Dec 28, 2023 · I recently put a code for a collapsible menu for mobile only, but theres one unwanted icon that shouldnt be there as seen in picture. Great question! If you are referring to the filter tags on a collection page, then I may be able to escalate your request to our theme team to help you out with that by possibly creating a collapsible feature like this: If this is what you're looking for then I will send you a direct email about this to get the ball rolling. International Commerce. collection__filter-container { overflow: visible; opacity: 1 !important; height: auto !important; Jan 6, 2025 · Hello @Us1256 ,. After that go to the last line of the code press Enter and paste below code - @media (max-width: 989px){ . It's really easy and it will make 5 days ago · . menu-drawer__submenu Nov 14, 2022 · Hi guys, Gabriel here, pretty new to the shopify world 🙂 I have a small problem that I couldn't find a solution to it, maybe you guys can help sort it out. When I click on one of the collapsible row lets say I click on description and then click on next collapsible row (specifications). 0 for my website . Help would be appreciated Thank you! Mar 15, 2024 · @dave1212,. Nov 14, 2022 · Hi guys, Gabriel here, pretty new to the shopify world 🙂 I have a small problem that I couldn't find a solution to it, maybe you guys can help sort it out. @media screen and (min-width: 1280px) { . submenu-open{visibility: visible;}. Dec 6, 2023 · Hi. css file and paste the following code at the bottom: . Checkout Extensibility Upgrade. Thanks URL: https://basicbastard. Give it a Name of Description and a Type of Multi line text and hit Save. css ->paste below code at the bottom of the file. menu-drawer__submenu With the Trade theme is there a way I can use a collapsible menu item (with an icon) but use HTML in the text editor? If I try adding HTML code to the current text editor section all the code is automatically removed once I save the page. Online Store > Theme > Customize. Im having trouble getting the descriptions into the Accordions. Nov 8, 2023 · Hello, I'm looking to make my footer categories collapsible on mobile in the Dawn theme. accordion . menu-drawer__submenu Dec 17, 2023 · Hi @Amandalman, This is Theodore from PageFly - Shopify Page Builder App. How can I implement a collapse/toggle function to the sidebar menu? Thank you. Jul 5, 2022 · Within the sidebar menu, click on the click on Add block > Collapsible row > click on the Insert Dynamic Source as the photo attached below > Select the associated metafiled I hope it helps. grid__item Aug 2, 2022 · yes, sure If you're comfortable working with coding languages (eg. I know some themes have it integrated, but in this case I'm using debutify and it looks like it doesn't have the function integrated. All of the previously provided codes are no longer working on the new Dawn theme. New GraphQL Product APIs Aug 30, 2022 · Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type. I have an image of what I'm looking to do attached. <style> @media (max-width: 749px) {. submen Nov 14, 2024 · Hi guys, I'm having issue with my store. Thanks for helping me a lot. collection__filters--left . From you Admin page, go to Online store > Themes > Customize 2. Nov 4, 2024 · Shopify Flow App. Nov 14, 2024 · In Dawn theme, is there any way to make collapsible tabs/accordions function so that only 1 stays open a time? At the moment they can all be opened at once. The Supply theme is one of our vintage themes and as such is Sep 6, 2024 · I was hoping to get help on changing my footer menus to become collapsible, add separator lines and make the icons being +/- when closed and opened. Dec 26, 2024 · Within the sidebar menu, click on the click on Add block > Collapsible row > click on the Insert Dynamic Source as the photo attached below > Select the associated metafiled - If you need any technical assistance, feel free to send me a DM. Add the collapsible menu 4. Open your section -> footer. Ecommerce Marketing Jan 10, 2023 · Hello people! I want my product description on each of my product pages appear into a collapsible row. Here’s what it looks like on my store: And here’s what I’d like: I don’t want the headings inside the light gray containers to be bold or emphasized. liquid section. Metafields and Custom Data. Go to Online Store -> Theme -> Edit code Dec 26, 2024 · Within the sidebar menu, click on the click on Add block > Collapsible row > click on the Insert Dynamic Source as the photo attached below > Select the associated metafiled - If you need any technical assistance, feel free to send me a DM. Otherwise, in order to add different content for each product, you first need I recently put a code for a collapsible menu for mobile only, but theres one unwanted icon that shouldnt be there as seen in picture. 1 Thanks! Jan 8, 2023 · Hi guys, I would like to make the footer menu item collapsable only on phone version. grid May 29, 2022 · I'm just getting used to liquid and can't for the life of me figure out how to input the code to assign a color for each row in an accordion style collapsible menu. footer-block__heading W3Schools offers free online tutorials, references and exercises in all the major languages of the web. add code in arrow files I’ll be so happy if my suggestion can help to solve your problem. Anybody have a quick and easy CSS for me? THank Jan 6, 2025 · Hello @Us1256 ,. Help would be appreciated 🙂 . This will allow our support team to get you authenticated and see if this is something that our Theme Support can assist with. Shopify Flow App. Sep 10, 2022 · Why is the collapsible menu under my product duplicating everything I put under every product? These "care" instructions will be the exact same under every product that I have, I can not make it unique to each product for some reason. Based on code you gave me, I tried to edit my menu, but I got stucked. co/ Jul 18, 2024 · Hello @Us1256 ,. Is there a general code I can add or would this require a developer to have this made? Mar 18, 2024 · yes please follow the below instructions. You need to publish the theme before you can see this template in yo Apr 7, 2024 · Hello Everyone one, Could anyone assist me in implementing a dropdown menu or collapsible accordion similar to the one described at How to Add an Accordion to Your Shopify Footer , which is tailored for the Dawn theme, but for the Prestige theme instead? 3 days ago · Hello @Us1256 ,. liquid file and paste the following code at the bottom: Oct 25, 2024 · Hydrogen, Headless, and Storefront APIs. Jul 18, 2024 · Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type. Thank you! Dec 17, 2023 · Hi @Amandalman, This is Theodore from PageFly - Shopify Page Builder App. liquid file and paste the following code at the bottom: Sep 23, 2022 · yes, please try this code 1. It has no function for the follow us section. accordion__content padding-left: 21px !important; Please let us know if our reply is helpful by giving it a Like or marking it as a Solution! Use the collapsible component in conjunction with a button. eboe hxcxja pbxsh tqol kuoz dtcgc jnlmi weyam bbnj vcqymklc