Shopify Question posted in
The Shopify help center can be found here.

How to develop a shopify application that make change in product page?

I’m trying to develop a Shopify recommendation app that will embed recommended bundle products to the shop’s product page as similar as Shopify official product review app that embeds a review section (Customer Review) to the product page by adding the following section to the template:

<div id="shopify-product-reviews" data-id="{{product.id}}">
    {{ product.metafields.spr.reviews }}
</div>

:

Customer Reviews

My question is about the way of implementing a Shopify application that works as a widget in the product page. As far as I understand Shopify App Proxy is doing a similar thing but it renders the template on a new page, I can’t find any approach to embed my liquid template to the existing theme.

Tags:

2

Answers


  1. 0

    You are missing a beautiful and most useful aspect of App Proxy. With it you can do the following pattern, answering your needs perfectly.

    • send the App Proxy the product being viewed using a Javascript GET
    • The App Proxy will securely get any information you deem important for you based on the incoming product information
    • You can return pure JSON data as the answer from the Proxy, back to the request
    • Using any old template pattern you want, you can take the JSON returned from the Proxy and render useful HTML for the customer

    While it is true the App Proxy can be used to return Liquid, this will indeed mean a re-rendering of the screen chrome and layout, so you might prefer the JS and template method. However, I have used both, and both are super for their own purposes. Returning Liquid is cool as it lets you write Liquid in the Shopify Theme that you can populate in your App, and Shopify will then populate the Product info allowing for you to have Theme Designers and the merchant change the HTML the customer sees, without the HTML template limits the JSON approach has.

    Login or Signup to reply.
  2. 0

    I am also developing a custom product page. I guess the process should be like this:

    1. When a merchant installs your app, use ScriptTag API to add your js to the product page
    2. When a product page is loaded, use js to send GET request to App proxy
    3. App proxy redirects to your app. Your app will return the JSON response
    4. your js get and parse the response, dynamically add the widget on the product page
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search