[FIXED] How to edit different shopify storefront with one script from Shopify app

Issue

My Shopify app needs to edit storefront to change existing element. There are two ways to change storefront code in Shopify

1. Edit liquid theme file
2. 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.

Solution

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.

Answered By - Yash Soni

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)