Image_picker pulls from assets instead of files

Technical Q&A

Topic summary

A developer is experiencing an issue where the image_picker setting type pulls images from the assets folder instead of the files/uploads folder, regardless of which Liquid filter is applied (img_url or file_img_url). The code attempts to use an uploaded image as a CSS background image.

Attempted Solutions:

  • Adding parameters to the img_url filter (e.g., "master" or specific dimensions like "1290x")
  • Using inline styles with the style attribute instead of external CSS

Current Status:

  • The original poster tried the suggested parameter approach without success
  • Another user encountered the same problem and is also seeking a solution
  • The discussion remains unresolved with no confirmed fix

Technical Context:
The issue involves Shopify’s Liquid templating and the image_picker schema setting, which appears to default to the assets directory rather than respecting uploaded files when rendered as background images.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hey guys,

I am trying to pull pics thorugh image picker, displaying as background image. I have put the code below to pull the pics from “files”, but no matter what filter I use(img_url, file_img_url), it keeps trying to pull from assets which lead to have a no image there. I put the code below for you to understand:

{
              "id": "one-third-image",
              "type": "image_picker",
              "label": "Select Image"
}

.AboutUs__one-third-image {
  background: url('{{ section.settings.one-third-image | img_url }}');
    max-width: 920px;
    display: block;
}

Ekran Alıntısı.PNG
Ekran Alıntısı.PNG710×188 5.55 KB

Hope someone can help me with that.

Thanks

2

I think it’s probably because you’re not providing it any parameters. Try giving it like this:

.AboutUs__one-third-image {
  background: url('{{ section.settings.one-third-image | img_url: "master" }}');
    max-width: 920px;
    display: block;
}

That’ll output whatever the image’s intrinsic dimensions are. You can provide it a size though:

.AboutUs__one-third-image {
  background: url('{{ section.settings.one-third-image | img_url: "1920x" }}');
    max-width: 920px;
    display: block;
}

That would give you a 1920px wide version of whatever image you’re referrencing.

3

I tried it out with giving parameters as well but no hope…

4

I’m trying to figure this out now too. Did you ever find the solution? I’ve been looking everywhere. Who would have thought just trying to display a background image using img_picker in a block would be so tricky.

5

Set this in within the inline style tag like this
style=“background-image: url(‘{{ section.settings.one-third-image | img_url: ‘master’ }}’);”