【Shopify】「カートに追加する」ボタンの文言変更についての注意点

shopify最近触ってます。

表題の件ですが、現在無料テーマの「Supply」をカスタマイズしていて、開発はthemeKitでやってます。

で、商品詳細ページでカートに追加するボタンがデフォルトでは下記のように記載されています。

<button type="submit" name="add" id="addToCart-{{ section.id }}" class="{{ btn_class }} btn--add-to-cart">
    <span id="addToCartText-{{ section.id }}">{{ 'products.product.add_to_cart' | t }}</span>
</button>

「'products.product.add_to_cart'」の部分を変えればいけそうですよね。

ということで、この定義は「locales/ja.json」に定義されているので、下記のように変えました。

 "product": {
      "sold_out": "売り切れ",
      "will_not_ship_until": "{{ date }}まで配送できません",
      "quantity": "個数",
      "add_to_cart": "カートに入れる", 　//カートに追加する から変更した
      "unavailable": "お取り扱いできません",
      "will_be_in_stock_after": "{{ date }}入荷予定",
      "unit_price_label": "単価",
      "only_left": {
        "one": "残り{{ count }}個！",
        "other": "残り{{ count }}個！"
      },
      "full_details": "詳細"
    }
  },

さて完了、と思っていると他の部分は変更した通りに文言が変わっていたのですがなぜかボタンだけ変わっていない...

なんかリロードした時に書き換わるような挙動だったので、theme.js.liquidを見ると下記の記述が。

// We have a valid product variant, so enable the submit button
this.settings.selectors.$addToCart.removeClass('disabled').prop('disabled', false);
this.settings.selectors.$addToCartText.html({{ 'products.product.add_to_cart' | t | json }});
$(this.settings.selectors.$shopifyPaymentButton, this.$container).show();

書き換えてますね。

でも読み込み方は同じなので、なんで更新されないんだろうと思ってました。

とりあえず、適当に変更して更新したところ、文言が変更されていました。
まああれです、ビルドしなおさないといけないってことですね。
「theme watch」コマンドはあくまでshopifyのサーバーに都度ビルド→アップするコマンドなので、そりゃそうかという感じですが...

以上です。