How do I assign a variable to an element in Shopify?

Technical Q&A
1

I am rendering an image snippet in Shopify and I am passing the url of the image inside the snippet.

I want to create a variable and assign it to an element. I want to use the variable as an object to be able to output the src or access the image object properties

Snippet code:

{% comment %}
product.metafields.naturederive.image is image url.
for example: //cdn.shopify.com/shopifycloud/shopify/assets/nature-image-800x.png
{% endcomment %}

{% render 'image-container', image:product.metafields.naturederive.image %}

\snippets\image-container.liquid:

{%- assign img_global = '' -%}
{{ img_global.src }}

{{ img_global.src }} does not output anything.

Aside outputting src I want to also get the height and width through the image object for lazy loading purposes.

Any help is greatly appreciated. Thanks.

2

Hey Redshot, you can’t use the {{ }} when assigning something to a variable. If the {{image}} variable already exist, you just type image. Also when calling a variable, you would just call it like {{img_global}}…however since you have strings attached I think you will need to type something like:

{% assign img_global = '' %}

I would recommend breaking these into pieces so that you can make sure you’re outputting right variable and you can test it when developing it. If I were developing this from scratch I would do something more like :

{% assign img_prefix = '' %}
{{img_suffix}}

{% assign img_global = img_prefix | append:img | append:img_suffix %}

{{img_global}}

This allows you to write out each piece of the string and ensure you are getting the correct output each step of the way. When you write it all at once, sometimes it’s hard to know where your error is coming from

3

Sorry for my late reply. But your answer definitely helped me.

1 Like