My Shopify app needs to edit storefront to change existing element. There are two ways to change storefront code in Shopify
- Edit liquid theme file
- Add client side JS with Asset API
However, different merchants use different themes in their stores. Is there any way my app works with every theme or how can I write a script which supports maximum themes? It would be very helpful if you can give some hints or share your thoughts about this issue.
2
Answers
After searching more about this issue I got some insights like Unfortunately we can't edit different theme with same script, because each theme might be very different. Some themes might even have different filenames for this sections or they might have completely different HTML structure.
There is no easy and universal way how to solve this problem. One of the ways:
You can do some heuristic in the theme files and try to find a correct place where to insert your code. For example, langify is doing that. It's scanning the whole theme and finding places where to insert their code.
You can ask a customer to add your code manually. Many apps are doing that because it will cause fewer errors. You just need to prepare detailed manual how to set it up properly.
You are wrong, exist more ways.
on storefront 2.0 you can create a theme app extension this is the recommended way today.
UPDATE: On 2.0 you should recommend your customer to replace their section with your section, this is currently the clean and recommended way to do.
On 1.0 well depends a lot on your project complexity or the part on the code your app touch…
Many apps use the theme Rest API, with that you can add on your app installation script a step for downloading the published theme. After that 2 options:
You can search and replace something specific, you can write a script then read the theme files and replace what you need to be replaced, then do the change automatically and republish your changes on the store. Faster no human intervention
use the downloaded code to easily read and replace manually the code using an IDE and after manually upload your changes using the same API. slow, need human intervention but more flexible.
You can start with option 2 now and continue to develop the script for option 1.