Re: JS code in theme app extensions

Solved

How can I include JS code in theme app extensions?

Girish_Rajwani
Shopify Partner
82 3 8

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 🙂

*If my answer was helpful, then please click like and accept solution
*Looking for a solution to a problem in your store? Email me at: appsbygirish@gmail.com
*My Shopify Apps: https://apps.shopify.com/partners/girish-rajwani
Accepted Solutions (2)
vixnguyen
Shopify Partner
45 4 5

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,

View solution in original post

Girish_Rajwani
Shopify Partner
82 3 8

This is an accepted solution.

Hey @abhishek1108  copy extension folder, remove folder and then create extension and copy. It will work

*If my answer was helpful, then please click like and accept solution
*Looking for a solution to a problem in your store? Email me at: appsbygirish@gmail.com
*My Shopify Apps: https://apps.shopify.com/partners/girish-rajwani

View solution in original post

Replies 15 (15)

Ryo14
Shopify Partner
79 6 34

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>
- Was your question answered? Mark it as an Accepted Solution
- Want to modify or custom changes on store contact me.
Email: shopify.xteam@gmail.com, Whatsapp: +84384998762

Girish_Rajwani
Shopify Partner
82 3 8
It's not working. giving 404 error.

Below is the code & test.js file is in assets folder of theme app extension



*If my answer was helpful, then please click like and accept solution
*Looking for a solution to a problem in your store? Email me at: appsbygirish@gmail.com
*My Shopify Apps: https://apps.shopify.com/partners/girish-rajwani

made4Uo
Shopify Partner
3839 716 1177

Hi @Girish_Rajwani 

 

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

made4Uo_0-1686158146649.png

 

You must add this inside your liquid file

<script src="{{ test.js | asset_url }}" defer="defer"> </script>

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
Girish_Rajwani
Shopify Partner
82 3 8

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 

*If my answer was helpful, then please click like and accept solution
*Looking for a solution to a problem in your store? Email me at: appsbygirish@gmail.com
*My Shopify Apps: https://apps.shopify.com/partners/girish-rajwani
made4Uo
Shopify Partner
3839 716 1177

Please provide the screen shot to better understand what you have done

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
Girish_Rajwani
Shopify Partner
82 3 8

PFA Below 

Girish_Rajwani_0-1686202507448.png

Girish_Rajwani_1-1686202529407.png

 

*If my answer was helpful, then please click like and accept solution
*Looking for a solution to a problem in your store? Email me at: appsbygirish@gmail.com
*My Shopify Apps: https://apps.shopify.com/partners/girish-rajwani

vixnguyen
Shopify Partner
45 4 5

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,

Girish_Rajwani
Shopify Partner
82 3 8

HI @vixnguyen 

 

It's still showing 404 in console. I included file in asset folder, and added code in blocks liquid file as follows:

 


{% schema %}
{
"javascript": "test.js",
"name": "Star Rating",
"target": "section"
}
{% endschema %}
 
Is there anything missing?
*If my answer was helpful, then please click like and accept solution
*Looking for a solution to a problem in your store? Email me at: appsbygirish@gmail.com
*My Shopify Apps: https://apps.shopify.com/partners/girish-rajwani
vixnguyen
Shopify Partner
45 4 5

Hi,

Sorry, my bad. It should be assets. Please try again.

Regards,

Girish_Rajwani
Shopify Partner
82 3 8

Yes @vixnguyen  it's assets folder only but still no luck 🙂 PFA.

 

Girish_Rajwani_0-1686844636613.png

Girish_Rajwani_1-1686844657528.png

 

 

 

*If my answer was helpful, then please click like and accept solution
*Looking for a solution to a problem in your store? Email me at: appsbygirish@gmail.com
*My Shopify Apps: https://apps.shopify.com/partners/girish-rajwani
vixnguyen
Shopify Partner
45 4 5

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,

Girish_Rajwani
Shopify Partner
82 3 8

Thanks a ton @vixnguyen . It worked.

*If my answer was helpful, then please click like and accept solution
*Looking for a solution to a problem in your store? Email me at: appsbygirish@gmail.com
*My Shopify Apps: https://apps.shopify.com/partners/girish-rajwani
abhishek1108
Shopify Partner
6 0 1

How did you do it @Girish_Rajwani . I am facing a similar issue

abhishek1108
Shopify Partner
6 0 1

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 ?

Girish_Rajwani
Shopify Partner
82 3 8

This is an accepted solution.

Hey @abhishek1108  copy extension folder, remove folder and then create extension and copy. It will work

*If my answer was helpful, then please click like and accept solution
*Looking for a solution to a problem in your store? Email me at: appsbygirish@gmail.com
*My Shopify Apps: https://apps.shopify.com/partners/girish-rajwani