Search code examples
shopifyliquidshopify-template

How To Target Part Of Product Description?


I'm trying to translate the shipping section in my product description based on country and locale.

I already figured out how I can check for the country (localization.country.iso_code) and locale (request.locale.iso_code), but now I'm having issues targeting the part of my product description regarding shipping.

In main-product.liquid I have this part which is interesting to me:

{%- form 'product', product, class: 'ProductForm' -%}
    {%- render 'product-data', product: product -%}

    {%- for block in section.blocks -%}
      {%- case block.type -%}
        {%- when '@app' -%}
          {%- render block -%}

        {%- when 'product_meta' -%}
          {%- render 'product-meta', form: form, block: block, product: product -%}

        {%- when 'description' -%}
          {%- if product.description != blank -%}
            <div class="ProductMeta__Description" {{ block.shopify_attributes }}>
              <div class="Rte">
                {{- product.description | replace: 'data-section-type', 'data-section-type-placeholder' -}}
              </div>
            </div>                

My idea was to check for language and locale there, but I'm having issues targeting shipping, since the generated code for product.description looks like this:

<div class="ProductMeta__Description">
    <p>Product Number One</p>
    <p>Produt Number One Info</p>
    <p data-mce-fragment="1">Dimensions...</p>
    <p data-mce-fragment="1">Volume...</p>
    <h5 data-mce-fragment="1">Fabrics...</h5>
    <h5 data-mce-fragment="1">SHIPPING</h5>
    <p data-mce-fragment="1">Shipping info</p>
</div>

How can I set up my liquid code to achieve the the following but have only the shipping info change:

{%- if request.locale.iso_code == 'en' -%}
  {%- if localization.country.iso_code == 'US' -%}
    <div class="ProductMeta__Description">
      <p>Product Number One</p>
      <p>Produt Number One Info</p>
      <p data-mce-fragment="1">Dimensions...</p>
      <p data-mce-fragment="1">Volume...</p>
      <h5 data-mce-fragment="1">Fabrics...</h5>
     <h5 data-mce-fragment="1">SHIPPING</h5>
    <p data-mce-fragment="1">US Shipping info</p>
</div>
  {%- elsif localization.country.iso_code == 'JP' -%}
...

This will change the English translation only for Product Number One, for US market only. I would have to do it for each product, for each country and for each locale (but that is just too many if's , there has to be a better way).

Is there a way to select only the shipping section in product.description? Ideally my could would look like this:

{%- when 'description' -%}
  {%- if product.description != blank -%}
    <div class="ProductMeta__Description" {{ block.shopify_attributes }}>
      <div class="Rte">
        {%- if request.locale.iso_code == 'en' -%}
          {%- if localization.country.iso_code == 'US' -%}
            <h5>Shipping</h5>
              Custom US shipping info.
       {%- elsif -%}
         {{- product.description | replace: 'data-section-type', 'data-section-type-placeholder' -}}
      </div>
    </div>    

Solution

  • The Shopify FAQ provides information on localisation of all types of resources on Shopify, including Product descriptions. The process does require adding translations in bulk for every language and product with a CSV file. The information is here: https://help.shopify.com/en/manual/markets/languages/translate

    Alternatively, you could utilise product metafields (if you are planning on only a small amount of countries), and have Shipping Information per country - which you could then filter for in your product template & output the appropriate metafield.