On this page
- Create new currency switcher
- Add language value for product property
- Use sections only for certain language
- Show content only for default language
- Include different snippets per each language
- Replace product image output with localized version
- Use image ALT localization
- Load Facebook SDK with localization parameter
Create new currency switcher
<footer>
...
{% render "ls-currencies-switcher", id: 82289733 %}
...
</footer>
Add language value for product property
{% form "product", product %}
<input type="hidden" name="properties[Language]" value="{%- render "ls-language" -%}">
...
<input type="submit" value="Add to cart" />
{% endform %}
Use sections only for certain language
<div id="PageContainer">
...
{%- capture LS_LANGUAGE -%}{%- render "ls-language" -%}{%- endcapture -%}
{% if LS_LANGUAGE == "fr" %}
{% section "footer" %}
{% endif %}
...
</div>
Show content only for default language
<div id="PageContainer">
...
{%- capture LS_LANGUAGE -%}{%- render "ls-language" -%}{%- endcapture -%}
{%- capture LS_DEFAULT_LANGUAGE -%}{%- render "ls-default-language" -%}{%- endcapture -%}
{% if LS_LANGUAGE == LS_DEFAULT_LANGUAGE %}
{% render "content" %}
{% endif %}
...
</div>
Include different snippets per each language
{%- capture LS_LANGUAGE -%}{%- render "ls-language" -%}{%- endcapture -%}
{% assign snippet_name = "snippet-for-" | append: LS_LANGUAGE %}
{% render snippet_name %}
Replace product image output with localized version
Default usage
<meta itemprop="image" content="{ { product.featured_image | img_url: "600x", scale: 2, crop: "center" } }">
<!--
<meta itemprop="image" content="//cdn.shopify.com/s/files/1/0087/0462/products/image_600x_crop_center@2x.jpg?v=1309278311">
-->
Localization
<meta itemprop="image" content="{%- render "ls-img-url", image: product.featured_image, img_url: "600x", scale: 2, crop: "center" -%}">
<!--
<meta itemprop="image" content="//cdn.shopify.com/s/files/1/0057/5317/6131/t/130/assets/image-for-current-language_600x_crop_center@2x.jpg?86920">
-->
Use image ALT localization
Default usage
<img src="..." alt="{ { product.featured_image.alt } }">
<!--
<img src="..." alt="Original alt">
-->
Localization
<img src="..." alt="{%- render "ls-alt", image: product.featured_image -%}">
<!--
<img src="..." alt="Alt originale">
-->
Load Facebook SDK with localization parameter
{%- capture LS_LANGUAGE -%}{%- render "ls-language" -%}{%- endcapture -%}
{%- assign FB_LANGUAGE = LS_LANGUAGE | replace: "-", "_" -%}
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/{ { FB_LANGUAGE } }/sdk.js#xfbml=1&version=v3.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>