What is the correct way to automatically add content to a page from an App?

Highlighted
Tourist
4 0 2

I am new to building Shopify apps but very experienced with Rails. I am building a simple test app that inserts some content onto every product page. For example a coupon code.

I have my app set up and working and I have figured out how to load a custom js file onto the store using the ScriptTag API. However, I can't seem to find documentation on exactly how I can consistently locate a specific part of the theme's HTML. It seems that since every theme can use a different layout and class system then I cannot simply do a 'find by css' statement in the Javascript.

I've seen a lot of apps inserting dynamic content into specific parts of Shop themes. Is there some way to hook into the theme's layout to consistently add content to it?

Does an app always have to manually edit the Shop theme with the Asset API to insert a container div in a template e.g 

<div class='xyz-app-coupon'></div>


If so, what is the correct way to handle the Shop changing themes?
Also what protection is there for Shop owners from installing a buggy App that completely deletes their theme code?
How about when an app is uninstalled, is there a way to ensure the app cleans up all this extra cruft its added to the theme files?

I'm not sure if I'm completely missing an obvious solution to this or some standard way all apps insert dynamic content into a Shop.

If anyone could point me in the right direction I would really appreciate it. :)

Thanks

2 Likes
Highlighted
Tourist
4 0 2

I'm still trying to solve this.

 

I've been reverse-engineering some other apps and it looks like some of them are using Shopify classes and data attributes to identify different parts of the templates.

I'm not sure how we can do this reliably since isn't each theme going to have different classes and HTML? Are there some classes and attributes that Shopify forces into all themes? If so is this documented anywhere? So far I haven't found anything about this in the docs and tutorials.

0 Likes
Highlighted
Tourist
4 0 2

I just found this post: https://www.shopify.com/partners/blog/online-store-app-extensions

It seems to imply there is no existing solution to everything mentioned above. The apps are expected to ask the store owner to edit their theme or manually insert code via the Asset api. There doesn't seem to be any existing solution for cleaning this up on uninstall on theme change.

The new App Sections API: https://shopify.dev/tutorials/add-an-app-section-to-your-app

 

And the new App Snippets API: https://shopify.dev/tutorials/add-an-app-snippet-to-your-app

Seem to be designed to solve these issues, they are currently in dev beta and there is no word on exactly when they will be released to use on production Apps.

For now it seems we have to do the hacky solutions and the store owners have to deal with the cruft buildup of dead code from installing and removing apps.

If anyone knows of a better existing solution for this please let me know in a comment.

0 Likes