2023.10.11[Wed]

ShopifyのカスタムLiquidの設定方法

  • Shopify

目次

こんにちは
ディレクターの小坂です。

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は、簡単にカスタマイズできる便利な機能です。
他にもいろいろな利用方法がありますので、ぜひ試してみてください。

もしカスタマイズについてご不明な点やご相談がありましたら、下記からお気軽にお問い合わせください。

お問い合わせはこちら

Share

Shopifyのコレクションリストで、コレクションの表示順を変更するNextAuth.jsでAzure AD B2C認証のログアウトを実装する