Add modal script for products to theme.js or product page template.. and how?

Store Design
1

I’ve got more info modal for product pages setup and working perfectly - if I place the below script in the actual product description. This is (obviously) onerous, but I don’t know how to get it to run when placed in the theme’s JS file, or the product template. Would greatly appreciate some advice on how to make this work, and which placement is more ideal. Thanks in advance.
2

The js code for a theme is pretty solid, and maybe it will be safer not to interfere with it and to keep your custom code separately. More than that, I have the impression that your theme actually loads a minified, very compact version of the main js file, so even if you modify the non-minified file of it, it might still not be imported in theme.liquid. I suggest two options:

  • you can create your own separate custom js file (modal.js or whatever) in your assets folder and load it in your theme.liquid. In order to avoid some errors, you might condition this import based on the template. If you only want the script to be loaded on the product page, you can insert this piece of code in theme.liquid, inside the tag, bellow other scripts:

{%- if template contains ‘product’ -%}

{%- endif -%}

  • the second solution is to copy paste the code that you have on the product page (product.liquid probably) before the schema at the bottom of the file. It is not a great solution, but i have seen multiple scripts loaded as such, and if nothing else works for you, and you don’t have sensitive info in the script, it should be fine.

I hope it helps, and good luck!

1 Like
3

Worked a perfect treat - thank you!