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

Technical Q&A

Topic summary

Need: show a different product image in product.template.liquid depending on the store language, with Dutch using USP_NL.png and French using USP_FR.png.

Early replies suggested this might require JavaScript tied to the language selector, because the active language appeared to be managed by an app and stored in local storage, making first-load detection harder.

A working Liquid-based solution was later provided using content_for_header to capture the current page URL, extract pageUrl, and check whether it contains /fr/.

Suggested logic:

  • If pageUrl contains '/fr/' → output the French image.
  • Else → output the Dutch image.

This avoids relying on JavaScript clicks and instead switches the image based on the translated URL structure (https://cantata.be/ vs https://cantata.be/fr/).

Outcome:

  • The proposed code worked for the original poster.
  • The thread was resolved and the answer was accepted as the solution.
  • A side question about paid Shopify coding help was answered: support was offered informally, but no dedicated coding service was provided.
Summarized with AI on March 7. AI used: gpt-5.4.
5

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/’-%}

{%- else -%}

{%- endif -%}

Hope it helps!

1 Like