Manipulate Product Page & cart interface

Highlighted
Shopify Partner
1 0 0
I am trying to develop a new shopify app and I have a couple of questions. 
 
I followed the tutorial "Building a Shopify App with Node and React" which is very useful. I used the API to extract data from the store (e.g. products, orders, etc) and I implemented the entire business logic on server-side. However I do not understand how things work when I want to change the store interface dynamically. Let me give you some context of what I am trying to achieve:
 
1. The store owner will be able to set a new price for each product.
2. On each product page, I would like to add a new button (let' s call it X) under the "Add to Cart" button.
3. When the customer clicks on button X, the new price will replace the old price (+ we will display some more infos).
4. If the new customer decides to "Add to cart" the product, the new price will be displayed in the cart. The checkout process should be the same but the final order must contain the product's new price.  
 
Now my question is: how can I manipulate the interface to add that new button (X) and to change the price dynamically. May you provide me some pointers of which API endpoint should I use, or what is the best approach?
 
Thanks!

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
621 94 109

Hi @true-deals ,

 

I am not sure I completely understand the motivation behind implementing something like this. Updating the price of the product will make the new product's price available to everyone who visits the store. A more robust approach would be to have multiple product variants for the same product that have the different prices. So when the customer clicks button X, they will just get the product variant with the different price. This is better than allowing one product to be updated by anyone who visits your store.

 

If you are adamant about going with this approach, know that the only way to update the price of the product is through the Shopify Admin API (either in REST or in GraphQL). However the Shopify Admin API can not be accessed from the front-end browser of a Shopify store front, it can only be accessed either through an embedded app on the Shopify web Admin or through a private app running on a back-end server. So with this in mind, to accomplish this you will need to 1) Add a new button the Product page via Liquid code, 2) Make it so when the button is pressed, it sends an API request to an app/microservice you have running on a back-end server, 3) From the app/microservice running on your backend server, make a request to the Shopify Admin API to update the price of the product.

 

Hassain | Developer Support Specialist @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes