Shopify - Does Liquid Process Before JavaScript?

- 1 answer

I'm trying to call shopify asset urls using javascript, dynamically concatenating a string into the liquid code, but it throws an error. I think that the Liquid must be processing before the JS.

function loadProductThumbnails(size) {
  $(".hammock-thumbnail1 img").attr("src", "{{ \'"+size+"-side-main-image.png' | asset_img_url: '150x150' }}");

Is this possible? I'm working with over a thousand images and had to type each liquid image url to generate separately. If I could do this dynamically, I cut the code down quite a bit. Thanks!



Liquid is rendered server side so you cannot integrate a JS var into your Liquid string.

You might make something like capturing part of your Liquid var with {% capture %} then use it in your function as var.