Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi everyone!
Hope you're all doing well - wanted to ask a quick question regarding our shopify store. I've created a FAQ template on the pages section such that, I'm able to edit it through shopify itself (as you can see from the screenshot).
'
The only thing that isn't working is the event listener to open the accordion. I followed this youtube video for tutorial: https://www.youtube.com/watch?v=DhvllxGMg4E. He adds the event listener under the script.js file but I can't seem to locate it and when I tried creating a new .js file under 'asset' but nothing is working. Does anyone know the potential solution to this?
Hi @daniel1491 , Can you please provide your Javascript code for this section?
Hey there!
The event listener code is :
const questionHeaders = document.querySelectorAll(".faq-page-question-header");
questionHeaders.forEach((header) => {
header.addEventListener("click", () => {
header.parentElement.classList.toggle("active");
});
});
For all other codes that you may need:
https://github.com/Coding-with-Robby/faq-page/tree/main
Please check this
Hi @daniel1491 , I checked that the code is working. While I inspected your code I found that your preview URL is added in the script. Which is causing the error so please check your file and remove the URL from the code. Please review the below screenshot.
If the above doesn't help please try removing your JS and adding the below code into your faq.liquid section file.
<script>
document.addEventListener("DOMContentLoaded", function(event) {
const questionHeaders = document.querySelectorAll(".faq-page-question-header");
questionHeaders.forEach((header) => {
header.addEventListener("click", () => {
header.parentElement.classList.toggle("active");
});
});
});
</script>
Hi @daniel1491 You can edit the FAQ design from the theme itself, as themes usually have a page where you can edit the design of some predefined pages. If you have created this page with the help of code then you can only edit it through code files itself then you will not be able to edit it from the theme.
Usually you find the page here:
Online Store-> Theme-> Customize-> Homepage-> Pages-> FAQ.
If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the changes so that this will work well for you.
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
Best Regards
Sahil
- Your
Learn what's possible with customizing Shopify Checkout beyond what's available out of...
By Shopify Feb 19, 20252m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025