Rendering a product card via Shopify App Proxy

[Danh11]

I am using the app proxy to make requests to my app and I'd like to push a product to the store and render it using the theme's product card.

If I use the product-card liquid markup from the theme (copy it into the app files), am I able to assign a particular product to the product in the card? 

For example:

const liquidTemplate = `
    {% assign product = ... %}

    // rest of product-card template
`;

Or is this not possible?

[Liam · Accepted solution]

Hi Danh11,

You can indeed use Liquid to assign a product to a particular variable and then use that in your product card markup. However, it's important to note that this would only work if the product data is available in the context where the Liquid code is being executed.

Here's an example of how you could do this:

{% assign product = all_products['your-product-handle'] %}

<!-- rest of product-card template -->

In this example, 'your-product-handle' would be the handle of the product you want to assign to the product variable.

Remember, Liquid is a rendering engine used by Shopify, so the context of the data matters. If this Liquid code is being executed on the Shopify server (i.e., in a Shopify theme), it will have access to the all_products object.

If you're executing this Liquid in your app and simply passing it to Shopify via an app proxy, your app won't have access to the all_products object because that's a Shopify-specific object that doesn't exist outside the Shopify environment. In that case, you would need to fetch the product data from the Shopify API, and then pass the data to your Liquid template.

Hope this helps!

[Danh11]

Ah of course! I was way over thinking it lol. 

[DodoDev]

This is a great solution! Thanks.
Could you possibly extend you solution for rendering multiple product cards at once? Similarly to product recommendations block, i would like to have a liquid handle that support my array of products

{% for recommendation in recommendations.products %}
<li class="grid__item">
{% render 'card-product',
card_product: recommendation
%}
</li>
{% endfor %}