Shopify App: Rendering Full Store Page Instead of Liquid Template in App Proxy Response

Shopify Apps
1

Hello Shopify Community,

I’m currently developing a Shopify app using the Remix template and have encountered an issue with my backend setup. I’ve built my backend using Express.js to serve a Liquid response on the “/api/liquid” endpoint. To fetch data from my backend, I’ve set up an app proxy.

app.get('/api/liquid', (req, res) => {

    res.set("Content-Type", "application/liquid");

    const liquidTemplate = `
        {% assign avg_rating = block.settings.product.metafields.demo.avg_rating.value | round %}
        <span style="color:{{ block.settings.colour }}">
        {% render 'stars', rating: avg_rating %}
        </span>
    `

    res.send(liquidTemplate)
})

The problem arises when I call the “/api/liquid” endpoint from the home page of my development store. Instead of receiving the expected Liquid template, I’m getting the entire HTML content of the home page as the response.

I’m puzzled as to why I’m not getting the specific Liquid template I’m sending from my backend.
Could someone shed light on this issue and help me understand why the full store page is being returned in the response?

Your insights and suggestions are highly appreciated. Thank you!

2

I am facing the same issue. The server returns the right response, but the final response contains the whole page’s HTML code. I am using Express.

3

Because you’ve set the response header to “application/liquid”, Shopify will automatically render your Liquid template within the context of the shop. If you want to return regular non-liquid HTML information, you can omit this header. For more information, refer to https://shopify.dev/docs/apps/online-store/app-proxies

4

Hi,

Did you work out how to fix this?

Thanks!