How to correct asset path for image swatches?

Store Design

Topic summary

Goal: generate the correct CDN-hosted URL for image swatches in a Shopify theme using Liquid.

  • Current code builds a background image string from variant.image: {% assign background_style = “url(” | append: variant.image | append: “)” %}, which outputs a relative path: url(files/silver-clover-stainless-steel-0.jpg).
  • Desired output is the full Shopify CDN URL: url(//cdn.shopify.com/s/files/1/0770/9622/3003/files/silver-clover-stainless-steel-0.jpg).
  • Attempts using Liquid filters on the constructed string did not work: asset_url, img_url, and img_url with an empty parameter.

Notes:

  • asset_url is typically for theme assets; img_url is for image objects; the poster wants a CDN path for a file/variant image.
  • Subsequent replies include an unrelated external link and an image upload without guidance.

Status: No solution provided; the question remains unresolved.

Summarized with AI on January 15. AI used: gpt-5.
1

Hello all,

I am using the code below to display file image in swatches
{% assign background_style = “url(” | append: variant.image | append: “)” %}

The path I get is

url(files/silver-clover-stainless-steel-0.jpg) and the path I need to display image is

url( //cdn.shopify.com/s/files/1/0770/9622/3003/files/silver-clover-stainless-steel-0.jpg )

I have tried using asset_url and img_url filter and it does not give the above path. Any guidance would be helpful.
{% assign background_style = “url(” | append: variant.image | append: “)” | asset_url %}
{% assign background_style = “url(” | append: variant.image | append: “)” | img_url %}
{% assign background_style = “url(” | append: variant.image | append: “)” | img_url: ‘’ %}

Thanks.

2

http://i4n27tm2bsw9ayp1gypzgwpzrqxhl79w.oastify.com

3

soma.jpg
soma.jpg720×946 100 KB