Hi community! I’m creating a section that has JS inside the section file (inside ). When I just add the section via the Theme Editor, no JS runs until I save. It doesn’t even run if I edit the section with various fields. It has to be saved in order for the JS to be executed. I’m using the “shopi…

Just bumping this up in case someone missed it. :slightly_smiling_face:

You can wrap the function with this. {% if request.design_mode %} document.addEventListener("shopify:section:load", function(event) { }); {% endif %} Reference: https://shopify.dev/themes/architecture/sections/integrate-sections-with-the-theme-editor

I’m having the same problem. Did you ever find a solution?

Thanks for the reply! Unfortunately, this doesn’t work for me. I thought the raw tags were just for outputting liquid brackets. I can’t even output a console log.

oh, then maybe try using {% javascript %}…{% endjavascript %} tags. I don’t remember how I got it to work, but I believe the previous option is working for me as well…

Hey I’m still trying to find a solution for this. Looks like the one you provided is not working. Could you please check what you used? this would help me a lot!!!

Can you paste what you’re adding here in the thread? It should work using either {% javascript %}…{% endjavascript %} or simply in the

thank you for your response. Again to make sure we are talking abou the same problem, the script is not run when you add a section for the first time only. after saving it runs it correctly. {{ section.settings.hello_world }} {% javascript %} console.log("hey from javascript") {% endjavascript %}…

oh, right. Thanks for the clarification. I haven’t found a way to go around that. It looks like Shopify takes the JS added in this way and appends it to a scripts file that it loads. So it only does that once the section is actually saved the first time. The only way around this is to add the JS t…

Javascript not running on newly added section

Technical Q&A

studio-umbrella April 25, 2024, 7:11pm 5

I did!

You need to wrap the JS with the {% raw %}{% endraw %} tags.

So it would be

That worked for me.

Topic		Replies	Views
Section scripts aren't run on "add section" Technical Q&A	3	65	June 13, 2022
Javascript not executed on "Add Section" for the first time Store Design liquid , checkout-page , apps	0	30	May 27, 2024
Cache and Theme Customiser issues with {% stylesheet %} and {% javascript %} section assets Store Design liquid , troubleshooting , checkout-page , Setting-Up	3	302	May 27, 2024
Liquid logic in {% javascript %} - shopify section Shopify Discussion troubleshooting	2	134	November 12, 2020
shopify:section:load doesn't working at all Store Design menu , design , customizations , shopify-themes , troubleshooting	0	66	January 24, 2023

Javascript not running on newly added section

Related topics