Shopifyコーダーの備忘録

今回は、言語エディタ（デフォルトテーマのコンテンツを編集する）上で改行を入れる方法について解説します。

今回は例として、商品ページの「カートに追加する」ボタンに改行を入れてみます。

言語エディタ上でそのまま改行しようとしてもうまくいかない…

今回改行させたいのは、商品ページの「カートに追加する」なので
products > product > add_to_cart の箇所に追記していきます。

追記する内容は簡単で「add_to_cart」の後ろに「_html」をつけるだけです。

こうすることで、言語エディタ上でhtmlタグを使用できるようになります。

ただ、この状態ではまだボタンのテキストは「add_to_cart」を使ったままなので、次はそちらを変更していきます。

buy-buttons.liquid内にある{{ 'products.product.add_to_cart' | t }}の記述を{{ 'products.product.add_to_cart_html' | t }}に変更します。

これであとは、言語エディタ上で<br>タグを使えば完了です。

言語エディタの<br>が反映されるように

いかがでしたでしょうか。

この方法はカートボタンだけでなく全ての言語エディタで使えるので汎用性は高いです。また改行タグだけでなく、他のタグやクラスをつけることもできるので表現の幅を広げることもできます。