How to implement a French language-specific image in product.template.liquid?

[pieterlauryssen]

Hello fellow-Shopify'ers

I have implemented an image in the product.template.liquid like this :

<div>
<img src="https://cdn.shopify.com/s/files/1/1862/5785/files/USP_NL.png?v=1622205204">
</div>

Here is the result : https://cantata.be/products/ogusto-irish-cream

As you can see, the webshop is also translated into French. 

What is the code for implementing a French image (https://cdn.shopify.com/s/files/1/1862/5785/files/USP_FR.png?v=1622207380)

if the French language is selected? 

Thank you

[Anonymous]

Hi @pieterlauryssen 

For Implementing, you have to write a js code from where language change selector is triggering and you have to show and hide images on the basis of that.

Thanks

[LitExtension]

Hi @pieterlauryssen, 

Because your language convert is saved as local storage and added by the application, so it will be hard to tell if the first load is Netherlands or French.

So to be able to set all cases, you need to contact the app, I can only help you to change when I know the exact loaded language. If you know the loading language, you can use JS to catch the click and display the image. The additional code will be executed in the theme.js file. Hope it clear to you.

[pieterlauryssen]

Hi @LitExtension , @Anonymous ,

First of all thank you very much for the quick reply. 

Wouldn't it be possible to make the image visible through this line of code (see below)? And then add some code to make it URL-depending. So for the Dutch version the URL starts with https://cantata.be/ and for the French translation this is https://cantata.be/fr/ . Would it be an option to add a piece of code in the product.template.liquid like 'if url is  https://cantata.be/fr/ then add image https://cdn.shopify.com/s/files/1/1862/5785/files/USP_FR.png?v=1622207380. If not, than https://cdn.shopify.com/s/files/1/1862/5785/files/USP_NL.png?v=1622205204. ? The only issue here is that I don't know which code to use? 🙂 

<div>

<img src="https://cdn.shopify.com/s/files/1/1862/5785/files/USP_NL.png?v=1622205204">

</div>

[LitExtension · Accepted solution]

Hi @pieterlauryssen, 

You can refer code:

{%- capture contentForQuerystring -%}{{ content_for_header }}{%- endcapture -%}

{%- assign pageUrl = contentForQuerystring | split:'"pageurl":"' | last | split:'"' | first | split: shop.domain | last |

   replace:'\/','/' |

   replace:'%20',' ' |

   replace:'\u0026','&'

-%}

{%- if pageUrl contains '/fr/'-%}

<div>

<img src="https://cdn.shopify.com/s/files/1/1862/5785/files/USP_FR.png?v=1622207380">

</div>

{%- else -%}

<div>

<img src="https://cdn.shopify.com/s/files/1/1862/5785/files/USP_NL.png?v=1622205204">

</div>

{%- endif -%}

Hope it helps!

[pieterlauryssen]

Hi @LitExtension ,

Great. It worked. Much appreciated for the excellent service and great support. 

Can you please tell me more about LitExtension? Every now and then I have some Shopify 'code-work' to do. Do you provide such services? And what is the hourly rate for such support / services? Feel free to reply directly to my mail : info@e-connectservices.com. 

Again, thank you very much.

Gr 

Pieter

[LitExtension]

Hi @pieterlauryssen, 

We are very happy when seeing our comments can solve your problems. If you find our answer is helpful, feel free to Accept as a Solution and hit Like for them. It absolutely encourages us. 

Regarding LitExtension, we specialize in data migration including orders, customers, products from the old store to Shopify. We have performed 150,000+ migration projects for over 50,000+ customers worldwide. Actually, we don't provide Shopify 'code-work' service, but you can reach me via private message or posts on Shopìy Community. I and my team will try our best to support you. 

Have a great day! 

LitExtension Team. 

[pieterlauryssen]

Hi @LitExtension 

Gladly liked your solution and accepted the reply as a solution.

Good luck overthere 

And again, thank you for your support.

Pieter