Injecting Liquid Into All Stores Consistently

Hello

 

I'm looking to inject some liquid code consistently across all of my users' stores. The problem is that each store has different themes, meaning that there is no real consistent structure from the stores to inject an element based upon.

 

What are some recommended solutions for this? I'm looking to inject a piece of code into the product page template specifically.

 

Thank you. Any advice is greatly appreciated.

Check out our newest app Daily Deals: https://apps.shopify.com/daily-deals-6
0 Likes
Highlighted
Shopify Partner
1658 48 168

You can't "inject" liquid with a naive approach to an arbitrary line in an arbitrary template for an arbitrary theme.

 

Liquid isn't a fully formed language with introspection tools and there are just too many variations in themes, even within shopify store themes.

There is no standard nor even reliable conventions for reliably telling themes apart quickly and efficiently.

A massive painpoint is you cannot confidently rely on the theme title, info in config files,  or name info returned by the api to establish which theme the user is actually using. Even to tell if a theme is non-sectioned or sectioned is pretty much a separate thing.

 So any automatic "injection" of template code into a template language like liquid needs static analysis over the entire theme files and building up theme fingerprints which would be alot of work for app developers. And even then that would always hit edge cases like when two themes get kitbashed together.

 

This is why you'll see most apps that need to "inject" either some mix of the following:

  • Support staff setup free or for a fee
  • Exclusively use script_tag and frontend javascript to hook into either A) merchant added code, B) code added by your apps support team, or C) shoot and hope on JS|CSS exact|fuzzy matching html elements rendered by most liquid themes ( like [id^="addtocart"] or [action^="/cart/"] ,see docs liquid form tag)
  • Add a snippet and give user an {%include 'snippet' %} piece of code and documentation support describing the general case of where to put that code for most themes.
  • Create a page template using {% layout 'none' %} and some iframe,ajax scheme again needing JS|CSS hooks or user intervention. (if there was transclusion in liquid this would be the way but alas)
  • Proxy app and iframe or ajax fetch and javascript injection for the frontend, again need reliable JS|CSS hooks
  • Do some hinky code injection automatically inserting stuff into arbitrary template files then wait for merchant complaint then have support staff fix it

Hyperbole and WIP opinion: In the future possibly this might ⚠ be a saner process with the new online store design experience having a different way for apps to interact with section themes with "app sections"|"app extensions". 

Introducing: A New Store Design Experience (Shopify Unite Track Session 2019)

       (Timestamps - "App Sections" 6:27 product reviews widget , 18:10 app devs & themes, 31:42 question -app section category on app store? ,33:38 question - app installs mess up themes will app sections help with clean code during install?)

https://community.shopify.com/c/New-Online-Store-Design/Shopify-Unite-Track-Session-Recording-for-th...

https://community.shopify.com/c/New-Online-Store-Design/App-generated-product-sections/m-p/538644

 

Problem Solved? ✔️Accept the solution so you can help others.
Confused? Busy? ? Get me to solve it paull.newton+shopifyforum@gmail.com.
Buy me a coffee? ☕ paypal.me/paulnewton or donate to eff.org
1 Like