I want to have a Shopify app that allows me to automatically (so that the user doesn't have to edit the code) add code into one of a user's .liquid files. I can't seem to figure out how to do this.
Related
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.
I check this and it wasn't the same as my question:
Editing JSON data from within a shopify liquid page
Currently I have a file settings_data.json in my theme. This file has a specific field called "product_form_style" there is a specific field I need to edit here from one product template titled: product_custom_liquid
According to some scarce resource I read this would work:
{% settings.product_form_style == 'my value' %}
This however gives an error: "Liquid syntax error: Unknown tag 'settings'"
The official documentation says I can access it with ajax or jquery from js however it doesn't give any examples. It only says it can be done but I have no idea how.
The basic idea is if product template is 'product_custom' then change settings product_form_style == true.
Obviously the above is not correct syntax. Just an example.
You can't modify the settings_data.json from the front-end without using an APP.
If you could modify it without any authentication this would have been a huge security issue and anyone could modify it.
settings_data.json is modified only when you save something in your Customize panel. For any other way you will need a Private app or some App to do so.
In addition you can't modify files in any way from the liquid code as well. The liquid template language only outputs data, it can't modify that data without the use of some kind of an APP.
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.
Is it possible to access section data with the shopify API?
I want to pull things from section.settings.whatever to build custom storefront functionality. I would prefer not to pass them all as DOM variables in the template.
Yes you can get all the settings and you don't need to update all the liquid files. I will show you how to do in python you need to do it in your preferred language.
settings_schema = shopify.Asset.find('config/settings_schema.json')
#edit the file and the parameters and push it back to shopify
settings_data = shopify.Asset.find('config/settings_data.json')
#edit the file and the parameters and push it back to shopify
These 2 files contain all your theme settings and can be found in Config directory of your Shopify Theme.
Is there any way to publish a test template page? For example, if I have a template file called "cart-test.liquid," is there anything I can modify so I can navigate to "http://shopname.com/cart-test" in order to test it out?
I'm currently developing an widget that'll be included on Shopify cart pages, and one of my clients wants to test it out before it's published on their real cart page.
The best way to test a theme without editing the live theme is to duplicate the current theme and use the preview function.
From within the Shopify admin (using Shopify Admin 2) goto the "Themes" section. Here you can "duplicate" the published main theme. It will create a copy of the theme within the "Unpublished themes" section. Here you can edit it and also get a preview of this theme (click on the link preview).