[FIXED] how can i create Shopify APP that interact with user from product detail page

Issue

Hello i am tring to create a shopify app, after installing the app, the button will display on the selected product detail page, that will ask some question to user and those data will stoee in the DB.

i know we have to use shopify script tags.

I have done so much R&D,but every reseach goes to the app with admin detail, i want the app to be interact with user from front end.

Please guide me, a link, or resouse or any videos.

i have following link but none of this did not help to give me some idea, like how can i display button on product detail page not on whole website.

https://github.com/iskurbanov/shopify-next.js-tailwind

https://github.com/learnwithjason/jamstackconf2021

Solution

Yes, you would need to use the ScriptTag API to embed a script in the store front end, and using JS you can manipulate the HTML DOM and add a new element. The tricky part here is the exact position since the elements would be different per theme used. Regarding adding the button only on one page, that can be easily checked with JS, making sure to execute the code (adding the new element) only on the pages that contain

products/

in the URL.

window.location.href

or

document.URL

would help here.

Also note that you would need to set up the theme app extension (app embed blocks) for Online Store 2.0 themes (ref. https://shopify.dev/apps/online-store/theme-app-extensions/extensions-framework) Setting up the app embed blocks will allow loading scripts on specific pages too.

Answered By - Jonida Mersinllari

Answer Checked By - Katrina (PHPFixing Volunteer)