こんにちは
ディレクターの小坂です。
Shopifyでは、自分の好みやニーズに合わせてカスタマイズすることができます。
カスタマイズの方法には、テーマファイル(liquid)を編集する方法と、管理画面からカスタムLiquidを追加し編集する方法があります。
各追加方法のメリット・デメリット
テーマファイル(liquid)を編集
メリット
既存の処理に表示項目を追加したり、条件分岐などの高度なカスタマイズが可能
デメリット
liquidなどのコードの知識が必要で、コードを間違えるとレイアウトが崩れる危険性がある
管理画面からカスタムLiquidを追加し編集
メリット
管理画面から直感的に表示場所を追加できる。liquidを追加してもテンプレート全体への影響が少ない
デメリット
既存の処理に表示項目を追加できない。ページ全体に対する表示の変更はできない
・・・・・・
今回は、テーマファイルをいじる事なく、管理画面から簡単に追加できる、カスタムLiquidを利用し編集する方法について詳しくご紹介します。
カスタムLiquidとは、liquid以外にもhtml、css、javascriptなどを記述できるブロックです。
カスタムLiquidを使えば、メタフィールドなどで追加した情報を商品詳細ページに表示することができます。
カスタムLiquidの追加方法
1.Shopify管理画面の『カスタマイズ』ボタンをクリック
2.商品 > デフォルトの商品選択
3.左メニュー、商品情報の『ブロックを追加』をクリックし『カスタムLiquid』を選択。
4.下記コードを『カスタムLiquid』に追加
{% if product.metafields.custom.XXXXXX %}
<h3>説明文</h3>
<div>
{{ product.metafields.custom.XXXXXX | newline_to_br }}
</div>
{% endif %}
このコードは、商品にメタフィールド(ネームスペースとキーは「custom.XXXXXX」)がある場合に、その内容を説明文として表示するものです。コードを入力したら、保存ボタンをクリックします。
以上で、商品詳細ページにメタフィールドで追加した説明文が表示されるようになります。
まとめ
今回ご紹介したカスタムLiquidは、簡単にカスタマイズできる便利な機能です。
他にもいろいろな利用方法がありますので、ぜひ試してみてください。
もしカスタマイズについてご不明な点やご相談がありましたら、下記からお気軽にお問い合わせください。