Guidelines for modifying a shop's UI from a script tag

3 1 4

Hi, I'm very new and I'm trying to see if I can create an app that inserts a call to action on the cart page, something like "would you like to also add product XXX?".


The documentation for Script Tags is pretty thin, so I'm wondering if there is guidance on what should be done in these scripts around inserting/manipulating the DOM.


For example, to insert some HTML that renders my call to action, I'll need to locate the right place in the DOM and insert it.  That means coupling my script to the DOM in some way, but I'm not sure how reliable that is.  I would like to avoid merchants having to edit their templates to accommodate my app, but I don't know how "stable" the template markup is across merchants.


Hopefully this makes sense and someone can help me a bit?

Shopify Staff
Shopify Staff
1296 43 188

I've seen success from partners who edit the theme files directly via the assets API. You could find cart.liquid, use logic on your end to perhaps more accurately insert elements where you would intend to (including appending to an existing element by a new class you can define), and go from there. Due to how unique themes can be when compared against each other, it's absolutely not going to be easy, but I've seen it done.


Absolutely open to other community members chiming in though if they have a more explicit direction they can share.