Search code examples
shopifyshopify-app

Shopify Interact with product page HTML via app

We plan to create a Shopify app but we face some problems to find in documentations how to interact with pages.

I`m not sure we must ask every time users to add codes and etc, so I need to know if I miss something.

I need to interact with the product pages in Shopify from an app.

I search and read all the web for this and everything is how to start but not the actual examples.

I know for the ScriptTags and how to include them but that is. If someone can give me a simple example of how for example to hide the Buy button and insert something on instead.

I know how to select it with the default theme with JQuery but what about all other themes?

Solution

  • There are two ways to interact with the front page:

    1) Inject some code in the page ( the live one )

    2) Use ScriptTag as you mentioned.

    The code injection script will modify the product template for example and inject your code if you like to do this automatically or you can instruct the user to do so on their own, but if they are not code savvy there might be issues.

    In addition this code will live only on the live theme in most cases. And if the user likes to delete your app at a specific time you must be sure to write the logic in such way that it won't affect the site if your app is no longer present ( since it will be really hard to clean up the files once you add the code automatically )

    For this approach you will need to use the Asset API.

    You will need to get the content of the file with a GET request to the file and make a put request in order to update it.

    The better approach is to use ScriptTag API.

    This will allow the use of a script file that will be attached on EVERY theme. This will not modify the theme files in any form or shape.

    It seems that this is the approach that you are looking for.

    Please have in mind that you will be the one hosting the file from your app so pretty much you can write what ever you like there. So if you like to use jQuery you must be sure that the themes have included jQuery or you will have to add the jQuery core code inside your script.

    As for how to write a script tag, there is a pretty straightforward documentation here: https://help.shopify.com/en/api/reference/online-store/scripttag#create-2020-01