How can I use an uploaded image as an asset in a Shopify theme's liquid code?

Technical Q&A
1

Hello,
I am coding a section in a shopify theme. I have a snippet ‘responsive-image’ that is supposed to display an image in a mobile-friendly way.
So far this snippet always has an input like

{% assign image = product.media[0].preview_image %} or {% assign image = product.image %}.> > …> > {% render ‘responsive-image’ with image, alt: image.alt, styles: styles, allow_stretch: true %}

Now I’d like to instead use an image that was uploaded as an asset or as a file in the shopify admin.

I have tried for example replacing {%assign image = …%} by
{% capture image%}{%endcapture%}

However the snippet doesn’t recognize this as a valid input and shows the “no image” placeholder.

How do I need to change the declaration of the image to match the “type” of product.images?

Best wishes,
Vincent

1 Like
2

If you want to use an asset from the assets folder you should do

src="{{ 'image-name.jpg' | asset_url }}"

Or if you want to make use of Shopify’s image scaling:

src="{{ 'image-name.jpg' | asset_img_url: '300x' }}"

For a files URL it’s similar

src="{{ 'image-name.jpg' | file_url }}"

src="{{ 'image-name.jpg' | file_img_url: '300x' }}"

Give this a read for context on the above:

https://shopify.dev/api/liquid/filters/url-filters

2 Likes
3

Hi @VincentPreiss ,

I would resolve this by doing the following:

  1. Adding an image picker setting on the schema for the section you are building. Something like so:
{
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.your-section.settings.image.label"
},
  1. You can then reference it using the following:
{{ section.settings.image }}

NOTE: when developing this first it will be empty as you will need to first push your code up to Shopify Admin and upload an image to that setting you have made. Therefore, you will need to account for the empty case. You could have a conditional like this:

{% if section.settings.image != blank %}

{% endif %}

Let me know if you need anymore assistance, I’ll be happy to help.

1 Like
4

I agree that this would be the easiest option, but unfortunately I am using pagefly to build this section, so I can’t change the schema.

5

Ah right - sorry I’m not familiar with pagefly.