Whats the best way to include my aded file import to the theme?

shul
Tourist
6 0 0

Hi, 

Im trying to add `js` file to my theme on app install.

After successfully adding the file I need to add import link to the `layout/theme.liquid` to run that `js` file.

My question is what is the best practice to achieve this?

I know about getting the `layout/theme.liquid` as an asset and updating `asset.value` string by adding:
```

<link rel="preload" href="{{ 'myfile.js' | asset_url }}" as="script">

``` 

to it as a string.. but that seems very un elegant.. Is there a better way to achieve this?

Also, when I delete my app from the store will the added file will be removed? Same for the edited `layout/theme.liquid` file 
will go roll back to its original version (without my import line)

Thanks 

0 Likes
GrahamS
Shopify Staff
Shopify Staff
52 9 4

Hey @shul !

Have you considered using ScriptTags ? This will allow your app to inject a file to the storefront, and also circumvents the issue of persistent theme changes associated with app based modifications, as app modifications are not undone when uninstalling the app in question.

Alternatively, we have a great blog post that outlines some other methods for modifying themes via an installed app.

Graham S | API Support @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

0 Likes
shul
Tourist
6 0 0

Thanks @GrahamS,

Yea I saw that blog post already, it shows basically what I mentioned.. modifying the string value of of file manually and then updating it.
The script tag path seems more clean to me.
How should you achieve this?

Can you give an example who would you import using ScriptTags
Would you just create a new scriptTag with `<script src="{{ 'my_file.js' | asset_url }}" async="async"></script>`

Can you use the liquid syntax inside of ScriptTags? If not (Im assuming that not..) how would you get your file
full path? 

thanks 

0 Likes