Shopify Blog

【Shopify】Liquid基礎～オブジェクト～

オブジェクトの基礎について解説します。

【Shopify】Liquidの基礎

Liquidの基礎について解説します。

Shopify 商品の在庫数表示機能をカスタマイズ

今回はShopifyで商品の在庫数表示のカスタマイズについて解説します。無料テーマDawnでは在庫表示機能がありますが、ちょっとしたカスタマイズで使い勝手が向上します。Shopifyで在庫表示をしたい方は是非参考にしてみてください。必要なコードも一番最後に開示しています。※今回はDawn(ver.13.0.1)を前提に解説します。 今回の成果物(Before/After) 完成イメージ 完成イメージは以下です。 標準機能だと、在庫数を表示する場合、常に在庫数が見えてしまいます。在庫数が多い場合は在庫数を表示したくないという要望が多いため、このような要望に対応するためには、既存コードを編集して対応をします。 今回の実装ポイント 今回は既存の在庫数表示機能のコードをカスタマイズします。この際にポイントとなるのは以下2点です。 対象となるコードを探し出す 在庫数表示部分に設定されているclassをディベロッパーツールで探し、今回カスタマイズする部分のコードがどのファイルのどの部分に記載されているかを特定します。 既存機能を活かしながらカスタマイズする 今回は既存コードを活かしながらカスタマイズをします。必要な部分、不要な部分の線引きを正確にしましょう。今回は (1)低在庫基準値よりも在庫が多ければ在庫数を表示せず、「在庫：〇」と表示する (2)低在庫基準値よりも在庫が少なければ「在庫：△（残り〇個）」と表示する (3)在庫数が0の場合、「在庫：×（残り0個）」と表示する という仕様にしたいと思います。 コードの紹介 それではこれより、実際のコードを紹介していきます。 続きはログインすると閲覧できます無料で登録/閲覧できますので、会員登録・ログインをお願います。 会員登録（会員登録がまだの方はこちら） ログイン(会員登録済みの方はこちら) 対象箇所を特定する(main-product.liquid) 在庫表示機能で使用されているclassをディベロッパーツールで探し、ファイルを検索するとmain-product.liquidがヒットします。132行目以降に記載されているコードが対象箇所です(全文は長いので、冒頭のコードを添付) そして162-166行目の以下コードが「低在庫基準値よりも在庫が多い場合、在庫実数を表示させる」というコード部分なので、この部分を削除（もしくはコメントアウト）します。これで、在庫数が多い場合は実数を表示しないようにできます。 次に在庫数表示をする際の表現を変更します。これは翻訳部分の話になるので、ja.jasonファイルを編集することになります。まずは「inventory_in_stock」の翻訳部分を修正したいので、対象箇所を探します。 上記が対象箇所なので、この翻訳部分を好みの表示に変更します これで完成です。 まとめ 今回のポイント 今回のポイントは既存のコードを活かしながら、修正が必要な部分のみ編集を加える点がポイントでした。在庫数表示をしている方は、是非導入してみてください！

Shopify 商品ページに付属商品を紐づける

今回はShopifyで商品ページに付属商品(関連商品)を紐づける方法を解説します。アプリで簡単に設定ができますので、Shopifyで関連商品を表示したい方は是非導入してみてください。必要なアプリの設定方法も一番最後に解説しています。 今回の成果物(Before/After) 完成イメージ 完成イメージは以下です。商品購入ボタンのすぐ下に関連商品を表示しています。 このような要望はノーコードではできないので、今回はアプリで対応をします。 Dawnの標準機能について 商品ページの「商品情報⇒ブロックを追加⇒付属商品」で付属商品の設定ができそうですが、こちらを選択しても何も表示がされません。表示するためにはアプリの設定が必要なため、今回はその方法を解説します。 今回のポイント 使用するアプリを選定する 今回はSearch ＆ Discoveryというアプリを使用します。こちらのアプリは付属商品のみでなく、検索機能のカスタマイズなどもできるため、よく使うアプリです。 Search ＆ Discovery アプリを設定する 非常にシンプルなアプリなので、簡単に設定できます。是非マスターしましょう！ 具体的な設定方法 それではこれより、アプリの設定方法を紹介していきます。 続きはログインすると閲覧できます無料で登録/閲覧できますので、会員登録・ログインをお願います。 会員登録（会員登録がまだの方はこちら） ログイン(会員登録済みの方はこちら) Search ＆ Discoveryをインストールする 対象ストアでアプリをダウンロードします 付属商品の設定をする アプリの画面で「おすすめ」を選択します。初期設定は付属商品が「商品なし」となっていますので、この付属商品に商品を設定すればOKです。 設定したい商品を選択すると、付属商品を編集する欄があります。閲覧をクリックすると、登録商品が全て表示されますので、付属商品落として設定したい商品を選択します。 選択が完了すると、選択した商品が表示されます。最後に忘れず保存をしましょう。...

Shopify 会員登録の日本語仕様化（その2）

前回に引き続き、今回もShopifyの会員登録画面を日本語仕様にする方法を解説します。前回は会員登録の最初の画面について解説をしましたが、住所登録画面も海外仕様の順番になっているので、日本仕様にカスタマイズします。 必要なコードも一番最後に開示しています。※無料テーマDawn(ver.13.0.1)を前提に解説します。 今回の成果物(Before/After) 完成イメージ 完成イメージは以下です。 今回は会員登録の住所登録画面について、順番をカスタマイズします。このような要望はノーコードではできないので、対象箇所を探してコードの順番を入れ替えて対応します。 Dawnの標準仕様について まず、今回の編集対象箇所は「アカウントの詳細画面」にある2ヶ所です。 標準仕様は上の画像のように、住所登録の順番が海外仕様になっています。この仕様だと、日本人にとっては馴染みのない仕様で違和感があるので、順番を変更します。 今回の実装ポイント 今回はコードの追加は不要で、対象となるコード部分を探し、順番を入れ替えるだけでOKです。この際にポイントとなるのは以下2点です 編集すべきファイルを特定する 大きく「コンソールログを活用する」「ディベロッパーツールを活用する」の2パターンがあります。VSCode等のツールを使えない人は前者、使える人は後者で行うのが良いと思います(VSCodeを使える場合はディベロッパーツールでクラスを特定し、検索にかけると対象箇所がすぐに特定できます)。コンソールログを活用する場合は、theme.liquidのbodyタグの最後に以下コードを追記することで調べることができます(コンソールログについては、本題とずれるので別記事で解説予定です)。 console.log("{{ template }}"); 対象となるコードを特定する 姓名を出力しているコードがどこかを特定できれば、あとは順番を入れ替えるのみです。 コードの紹介 それではこれより、実際のコードを紹介していきます。 続きはログインすると閲覧できます無料で登録/閲覧できますので、会員登録・ログインをお願います。 会員登録（会員登録がまだの方はこちら） ログイン(会員登録済みの方はこちら) main-addresses.liquidを編集する 住所情報が記載されているのは「main-addresses.liquid」ファイルです。このファイルの42～160行目と201～325行目にあるコードが今回入れ替えるべきコードです。前者が「新しい住所を追加」のコード、後者が「住所編集」のコードで、両方とも同じ構成になっています。今回は201～325行目を例に解説をします。 名 姓 会社 住所1,2 市...

Shopify 会員登録を日本語仕様化（その1）

今回はShopifyで会員登録画面を日本語仕様にする方法を解説します。Shopifyは海外のサービスのため、会員登録の項目について、順番が日本語仕様になっていません。氏名や住所の順番が日本人に馴染みのない仕様になっており、違和感があります。Shopifyのサイトを扱っている方は、お客様が違和感なく、スムーズに会員登録できるように日本語仕様に修正しましょう！必要なコードも一番最後に開示しています。※無料テーマDawn(ver.13.0.1)を前提に解説します。 今回の成果物(Before/After) 完成イメージ 完成イメージは以下です。 今回は会員登録の最初の画面について、姓名の順番をカスタマイズします。このような要望はノーコードではできないので、対象箇所を探してコードの順番を入れ替えて対応します。 Dawnの標準仕様は名⇒性の順番で登録 標準仕様は完成イメージ左のような形式です。 海外仕様なので、姓⇒名の順番ではなく、名⇒性の順番で記入する仕様になっています。この仕様だと、日本人にとっては馴染みのない仕様で違和感があるので、右の仕様に変更します。 今回の実装ポイント 今回はコードの追加は不要で、姓名のコード部分を探し、順番を入れ替えるだけでOKです。この際にポイントとなるのは以下2点です 編集すべきファイルを特定する 大きく「コンソールログを活用する」「ディベロッパーツールを活用する」の2パターンがあります。VSCode等のツールを使えない人は前者、使える人は後者で行うのが良いと思います(VSCodeを使える場合はディベロッパーツールでクラスを特定し、検索にかけると対象箇所がすぐに特定できます)。コンソールログを活用する場合は、theme.liquidのbodyタグの最後に以下コードを追記することで調べることができます(コンソールログについては、本題とずれるので別記事で解説予定です)。 console.log("{{ template }}"); 姓名のコードを特定する 姓名を出力しているコードがどこかを特定できれば、あとは順番を入れ替えるのみです。 コードの紹介 それではこれより、実際のコードを紹介していきます。 続きはログインすると閲覧できます無料で登録/閲覧できますので、会員登録・ログインをお願います。 会員登録（会員登録がまだの方はこちら） ログイン(会員登録済みの方はこちら) main-register.liquidを編集する 今回姓名の情報が記載されているのは「main-register.liquid」ファイルです。このファイルの52行目付近にある以下コードが「名」の部分です。 次に67行目付近にある以下コードが「姓」の部分です。 このコードの順番を入れ替えれば完成です。 まとめ 今回の一番のポイントは「入れ替えるべきコードがどのファイルにあり、どこに記載されているのかを特定する」ことでした。特定には一定のスキルが必要ですが、作業自体はコピペで対応できますので、日本語仕様にしたい方は是非試してみてください！

Shopify 商品の割引率表示