Solved

Can I replace text with an image in Shopify Liquid code?

Andre_Borges
Excursionist
32 0 12

Hello, been searching everywhere for an answer but i got nothing.

 

{{ product.description | replace: 'THISWORD', 'this' }}

Im trying to replace THISWORD with this, but i want this to be an image.

How can i do this in code?

Accepted Solution (1)
Not applicable

This is an accepted solution.

Hi @Andre_Borges 

The error was that you can't reuse parentheses inside {{ }}.
Try the code below:

{% assign image = product.images[1] | img_url: 'large' %}
{% if product.media.size > 1 %}
{% capture image_html %}
  <img src="{{ image }}" alt="{{ product.featured_image.alt | escape  }}">
{% endcapture %}
{{ product_description | replace: 'Como Usar?', image_html }}
{% endif %}

View solution in original post

Replies 11 (11)

r8r
Shopify Expert
2555 327 940

@Andre_Borges does

{{ product.description | replace: 'THISWORD', '<img src="https://i.pinimg.com/originals/a2/c0/42/a2c04274c2e10bc712c0dc55500fb590.gif" alt="some kind of image">' }}

work?

Mario

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte
Andre_Borges
Excursionist
32 0 12

Hey r8r!

That doesnt work no.

To be more precise this is what im after:

{{ product_description | replace: 'THISWORD', 'this' }}

where this should be the [2] second image of the product

so it should work something like this:

{% assign image = product.images[1] | img_url: 'large' %}
{% if product.media.size > 2 %}
{{ product_description | replace: 'THISWORD', '<img src="{{ image }}" alt="{{ product.featured_image.alt | escape  }}">' }}
{% endif %}

     

 

But that doesnt work!!!!! There is something i cant figure out

r8r
Shopify Expert
2555 327 940

@Andre_Borges again … that's the same code that I posted. Debugging this without having the code to work with is pretty tedious though.

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte
Andre_Borges
Excursionist
32 0 12

That wasnt very helpful

What do you mean its your code? Its nothing like your code. It has liquid inside the img.

Does anyone has a take on this?!

Thank you!

r8r
Shopify Expert
2555 327 940

@Andre_Borges Liquid doesn’t work like that - you’d have to capture the replace-string in a variable first. And you‘re not very friendly to people who try to help out pro bono. I’m outta this discussion. 

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte
r8r
Shopify Expert
2555 327 940

@r8r wrote:

@Andre_Borges Liquid doesn’t work like that - you’d have to capture the replace-string in a variable first. 


¯\_(ツ)_/¯

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte
r8r
Shopify Expert
2555 327 940

Not sure why you're getting worked up like this – in my view, you were out of line with this response:


@Andre_Borges wrote:

That wasnt very helpful

What do you mean its your code? Its nothing like your code. It has liquid inside the img.

I'm not here to teach people netiquette – you got what you needed:
good that @Anonymous translated what I wrote into code you could use.


 

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte

Not applicable

Hi @Andre_Borges 

Aibek is here from Speedimize.io

If still relevant.

You had a problem with the condition. We corrected it, because previously if the product had 2 pictures, the condition did not work. Now, if you have at least two pictures, everything will work.

Try the code as below:

{% assign image = product.images[1] | img_url: 'large' %}
{% if product.media.size > 1 %}
{{ product_description | replace: 'THISWORD', '<img src="{{ image }}" alt="{{ product.featured_image.alt | escape  }}">' }}
{% endif %}
Andre_Borges
Excursionist
32 0 12

Hey!

@Anonymous 

Liquid syntax error: Unexpected character ' in "{{ product_description | replace: 'Como Usar?', '<img src="{{ image }}"

 

This is what i got.

Im sure there is something that is not well written i just cant figure out what.

Thank you anyways for the try

 

Not applicable

This is an accepted solution.

Hi @Andre_Borges 

The error was that you can't reuse parentheses inside {{ }}.
Try the code below:

{% assign image = product.images[1] | img_url: 'large' %}
{% if product.media.size > 1 %}
{% capture image_html %}
  <img src="{{ image }}" alt="{{ product.featured_image.alt | escape  }}">
{% endcapture %}
{{ product_description | replace: 'Como Usar?', image_html }}
{% endif %}
Andre_Borges
Excursionist
32 0 12

@Anonymous 

This is it!!!

This was what was missing, thank you!!

Its working!