How can I add Javascript into shopify theme with App - shopify

I see multiple scopes on Shopify API likes write_themes or write_script_tags to add content in differents files of the theme.
I would like to create an app to add a marketing pixel in differents pages like checkout, index or add_to_cart.
I will need to add a script like :
<script>
...PixelCode...
init('API_KEY', VIEW)
</script>
I will need to set the API_KEY variable dynamique and editable from the panel of the app.
What is the best scope and way to do that ?
Thank you in advance.

Have your App installed in the merchant shop. They approve your App to add script tags. Next up, have your App install the needed script tags. Finally, profit from your hard work.
As for the scopes, writing a script tag only requires that scope. You are not modifying the merchant's theme, so you do not need that scope.

Related

The injection Of A Theme App Extention Block Into A Section That Has No Objects In An Editor

I'm creating an app similar to a whishlist in Shopify, and I want users to select products for later on a product listing page.
This is why I created an app block which allows users to do this when it's cliked.
However, I do not understand how I can integrate this block inside the product-grid card component of the theme using just an editor without changing a shop's code directly.
Any help is massively appreciated :-)

How to make a shopify app/theme extension which would get displayed in the brand's store UI?

We have an application which integrates with Shopify Clothing stores. We run our application in an iframe inside the shopify store where it interacts with the store's user.
Right now this application gets integrated with Shopify manually by inserting our script tag inside the store's product page. Can someone tell me how I can do this using a shopify app or theme extension?
Edit after David's answer
Is it also possible for me to get information about standard buttons in the theme like the Add to Cart button or Change Variants input. Ideally I would like to get the selector for these.
You would create a Shopify App that asks for permission to write ScriptTags. The Apps simply installs a script tag pointing to your App. So when the merchant installs your App, they get the script tag. Depending on what your App does in that iframe, you may need your Shopify App to provide other support, but that is not detailed in your OP, so I leave it at that.

How to change in template through the Shopify application

I am trying to write a Shopify application and I want to add a section to the product page when the store owner installed my app. I tried this by adding a custom script tag in the shop template and this tag will load and inject my desired HTML into the page. It's work but it needs to force the store owner to change the product page template and its not user-friendly.
I see some apps in the Shopify app store that can change the product page after you install them without needs add any part to the product page template. How they do this work? I can't find the correct way in the Shopify documents.
You can change the Shopify theme of the shop using The API for Assets:
However as drip mentioned this is not a good idea:
If you change the theme auto-magically via code, you are looking for trouble. A lot of things can go wrong - simply you cannot cater for all themes and their changes over time! So you could possibly leave a broken page after the change. The e-shop owner won't be impressed! Actually a lot of the 1* reviews of apps are for that reason!
What would happen if the eshop owner removes your app? He won't know what code to remove.
So, most apps ask the user to add the app code. They provide detailed instructions of course.
Fyi, another problematic approach is the following:
Some apps may attempt to change the DOM "on the fly", by first locating an existing DOM element (a lot of theme-specific if statements to do that with any degree of success) and, then insert the app's DOM elements.
That's very messy and problematic as well, but at least you do not risk ruining the owner's theme files. In the worst case he can uninstall your app and he 'll be ok.

Shopify: Change metafields for store

My problem is that when you login on my store - you (not necessarily registered) could add your e-mail and other information.
In this topic:
https://ecommerce.shopify.com/c/shopify-apps/t/allowing-a-customer-to-edit-their-profile-and-metadata-186665
I see that there is a possibility to change the metafields of the customer.
But I need to change the metafields of the store.
Does someone know where to find a list of requests or is there any options to change Metafields?
If you, as somebody with admin access to the store, needs to manually set or modify metafields on your store and either don't want to (or cannot) use a custom app to do so:
Get the (free) ShopifyFD extension for your browser (Link to the extension on the Chrome store)
Log in to your store and go to the 'Settings' (gear icon)
Click ShopifyFD's green '+' icon in your browser to load the extension on the page. You should now see your store metafields appear
You can now add metafields by filling in the boxes, or select existing metafields to manually edit their values.
Note: Metafields that are set by any of the apps that your are using should generally not be edited manually - changing an auto-generated field could really confuse the app that relies on it!

Shopify api: add a link

I am developing a shopify app.
Is it possible to add a new link to the main menu via the shopify API?
Thanks
If you log in to your partner account and then create an App you can edit the created App and you will see all the resources at your disposal where you can add a new link.
If you notice also, using the API you can pull and rewrite any asset in a shop to contain a new link. This is discouraged as bad practice. Instead, inject a script tag that does the dirty work.
Soon as I know the API itself cannot change something inside the theme files... some APPs ask you to apply some code manually in the theme, with proper instructions... maybe this code could add the new menu or dynamically interact to get it.