Colour swatch url not evaluating correctly

[the_rvh]

Hi all,

Seems like a redundant question but I didn’t find a solution in existing posts. I’m adding colour swatches for product variants on a collections page and the evaluation of the .png url doesn’t seem to happen correctly. I’ve hard-coded the url in a sub-element and that renders correctly as can be seen in the screenshot.

page: https://pamir-lifestyle.com/collections/new-arrivals

Test page:

code:

variant colour definition:

I’ve noticed there are white spaces around the evaluated “color” which can be seen in the alt definition, I’m not sure where these are from or how to remove them.

Thanks for the help,

[the_rvh]

So just in case someone has the same issue, using “capture” to define the colour was adding a whitespace to either side of the string. Not sure why this is but using “assign” instead solved it…

[Jason]

The whitespace existed in the captured variable because there was literal whitespace characters in between the starting and closing capture tags. If you didn’t want the whitespace you’d either need to make sure there’s no gaps (the whitespace!) or remove it with an additional string filter.

Glad you found a working path regardless.