Shopify themes, liquid, logos, and UX
Hi guys,
how can we include JS code in theme app extensions?
Below tag is not working in app block or snippet
{% javascript %} {% endjavascript %}
Thanks in advance 🙂
Girish | Shopify Expert
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- My Shopify Apps: App Store | Looking for a solution to a problem in your store? Send me an email
Solved! Go to the solution
This is an accepted solution.
Hi Girish_Rajwani,
I think you should remove the block, and deploy the new version of extension. Then add the block to your theme again.
I guess it's a caching issue.
Regards,
This is an accepted solution.
Hey @abhishek1108 copy extension folder, remove folder and then create extension and copy. It will work
Girish | Shopify Expert
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- My Shopify Apps: App Store | Looking for a solution to a problem in your store? Send me an email
Hi @Girish_Rajwani,
You can insert import file js, such as:
<script src="{{ 'custom.js' | asset_url }}" defer="defer"></script>
or insert code js:
<script>
// custom.js
console.log("Hello, Shopify!");
// Your JavaScript code goes here...
</script>
Girish | Shopify Expert
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- My Shopify Apps: App Store | Looking for a solution to a problem in your store? Send me an email
I am hoping you can follow. You should have a folder created extensions. You can create a js file in assets folder and call that inside the blocks.
You can then call the script code
You must add this inside your liquid file
<script src="{{ test.js | asset_url }}" defer="defer"> </script>
Yes i did the exact same but it is giving 404 error in console.
I did pushed my code and extension but after that as well
Let me know if i am missing something
Thanks
Girish | Shopify Expert
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- My Shopify Apps: App Store | Looking for a solution to a problem in your store? Send me an email
Please provide the screen shot to better understand what you have done
PFA Below
Girish | Shopify Expert
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- My Shopify Apps: App Store | Looking for a solution to a problem in your store? Send me an email
Hi Girish_Rajwani,
Please write your JS code in a file name app.js, put it in asset folder
Then declare javascript code for your block as below
{% schema %}
{
"stylesheet": "app.css",
"javascript": "app.js",
}
{% endschema %}
It would solves your problem.
Regards,
HI @vixnguyen
It's still showing 404 in console. I included file in asset folder, and added code in blocks liquid file as follows:
Girish | Shopify Expert
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- My Shopify Apps: App Store | Looking for a solution to a problem in your store? Send me an email
Hi,
Sorry, my bad. It should be assets. Please try again.
Regards,
Yes @vixnguyen it's assets folder only but still no luck 🙂 PFA.
Girish | Shopify Expert
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- My Shopify Apps: App Store | Looking for a solution to a problem in your store? Send me an email
This is an accepted solution.
Hi Girish_Rajwani,
I think you should remove the block, and deploy the new version of extension. Then add the block to your theme again.
I guess it's a caching issue.
Regards,
Thanks a ton @vixnguyen . It worked.
Girish | Shopify Expert
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- My Shopify Apps: App Store | Looking for a solution to a problem in your store? Send me an email
hey, I am facing a similar issue. Can you please elaborate If i just have to remove the entire block liquid file or just the inclusion of assets script from liquid file ?
This is an accepted solution.
Hey @abhishek1108 copy extension folder, remove folder and then create extension and copy. It will work
Girish | Shopify Expert
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- My Shopify Apps: App Store | Looking for a solution to a problem in your store? Send me an email
2m 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, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025