I am working on a custom app. Can anybody help me to explain how we can make custom settings for product page in our own app and used there value in our shopify website?
The easiest way for an app to add custom settings for a Shopify product is with metafields. Metafields act like extra fields on various Shopify data like products.
There's two parts to using them this way:
- Your app's administration area will need to read the Metafields for a product and provide Shopify admins a way to set and configure these settings.
- Your storefront will need its theme updated in order to display the settings.
You can think of #1 as "writing the settings" and #2 as "reading the settings".
1. Configuring the metafields
To create an admin panel for the metafields you'll need to:
- Use the Shopify APIs to get your products
- Save those products in your local database (optional, but recommended)
- Show whatever "setting" user interface you want. e.g. text field for visitors count, dropdown for products, etc
- When the user (Shopify admin) saves the form(s), your app will take their data and call the Metafield API to write those settings to the products
2. Showing the metafields
Then on the storefront, you'll need to edit your theme's templates to display those metafields where you want them (e.g. product page). These are the front-end and liquid parts.
For example, if you had a metafield in the
product_configuration namespace called
sizing_url that you want to convert into a link on your product page, you can use this:
<a href="">Sizing Information</a>
If you wanted to do more than just display the settings on the storefront, you can use a Shopify Application Proxy. These are powerful APIs that will let Shopify talk to your app and ask "what should I render to the page?" It's a lot more advanced and you have to worry about scalability but if you can build a high-performance, stable app it might be worthwhile.