Search code examples
node.jsshopifyshopify-template

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.

Solution

  • 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.