【図解・Shopify基礎編】アプリのインストールと設定、liquidコード編集方法を解説

この記事は「shopifyカリキュラム基礎編 -Day6-」となります。

具体的なアプリのインストール方法、
アプリの設定及びShopifyの特徴でもある「liquidコード」の設定方法を解説いたします。

導入必須のShopify（ショッピファイ）アプリについてはこちらの記事がおすすめです。↓

■あわせてよく読まれている記事：shopifyカリキュラム基礎編 - Day1～Day5 -
→【Day1】Shopifyの始め方や基本を解説
→【Day2】商品登録方法を解説
→【Day3】ページデザインの編集方法を解説。テーマのインストール～設定・編集
→【Day4】ヘッダー・フッタのメニュー作成・編集方法を解説
→【Day5】配送設定と決済テスト方法を解説

shopifyの特徴・アプリケーションによる機能拡張

shopify(ショッピファイ)の大きな強みの一つが、アプリケーションによる機能拡張です。難解なプログラミングや高額な構築費用を必要とせず、多様な機能を追加出来ます。今回は下記2つのアプリケーションをインストールして使っていきます。

アプリケーション名：PageFly Advanced Page Builder

ノーコードでページ作成やフォームの作成を行えるアプリケーションです。フリーページやLP、商品ページのカスタマイズなど、様々なページのデザインを行えます。

アプリケーション名：Product Reviews

ユーザーレビュー用のアプリケーションです。口コミを集めてページに表示させる事が出来ます。

shopifyアプリケーションのインストール方法を図解

Shopifyアプリストアへアクセスし、今回は開発モードでも使える2つのアプリケーションをインストールして実装していく手順を図で解説します。

使用メニュー　アプリ管理＞アプリストアに行く

ストアに入ったらインストールしたいアプリケーションを検索しましょう。
まずはPageFly Advanced Page Builderを検索します。
検索窓にキーワードを入力して下さい。

検索結果からPageFlyを見付けたら選択して下さい。

この画面で「Add app」を選択して下さい。
（日本語では「アプリを追加する」と表示されています）

この画面に来たら右下の「アプリをインストール」を選択し、インストールします。

同じ要領で「Product Reviews」もインストールして下さい。

shopifyアプリケーションの設定方法を図解

アプリケーションの中にはインストールしただけでは使用出来ず、Shopify特有のliquidコードの編集が必要になるアプリも有ります。liquidの詳細な説明は割愛しますが、この章でliquidの触り方を知っておきましょう。

liquidファイルの編集方法を図解

レビューアプリの埋め込みを行います。指定の場所にコードを入力していきましょう。

使用メニュー　テーマ＞アクション＞コードを編集

※コードの編集を行う前にバックアップ（複製）をしておきましょう。

まずはアプリに記載されているコードを取得します。

アプリ管理　→　Product Reviews＞Settings＞
Installation instructions を開いて左の画面が出たら、枠内のコードをコピーします。
このタグをこれから解説する場所に埋め込みます。

（コピーしたコードはテキストエディタなどに張り付けておきましょう）

次に、テーマ　→　アクション　→　コードの編集でコード一覧を表示させます。

Sections　→　product-template.liquid を選択して下さい。

38行目に<div class=“grid product-single__hero”>というタグが有ります。

ここをクリックすると、

このように色が付きます。
この色は閉じタグの</div>にも反映されています。

下にスクロールすると256行目に閉じタグが有ります。
この閉じタグのすぐ下に先程アプリで取得したコードを書き込んで下さい。

書き込みが完了したら右上の「保存する」を選択して下さい。

商品を見てみると、ページ下部にレビュー項目が追加されているのが確認出来ます。

但し、この状態だと英語で使いにくいので修正します。

アプリ管理　→　Product Reviewsを選択し、右上の「Settings」を選択して下さい。

この中の「Review listing text」の中を日本語に修正していきます。
-----
Review headline：カスタマーレビュー
Write a areview link：カスタマーレビューを書く
Review summary with no riviews：まだレビューは有りません
-----

「Review from text」の項目も修正していきます。
-----
Author’s emall：Typeをhiddenに変更
Author’s name ：お名前
Help message：お名前を入力して下さい
Auther’s location：Typeをhiddenに変更
Review from title：空欄に
Review rating：評価
Review title：レビュータイトル
Help message：タイトルを入力して下さい
Review body：ここにレビューを記入して下さい
Help message：コメントを入力して下さい
Submit button：送信
Success message：ありがとうございます！
Error message：全ての項目を入力して下さい
-----

プレビューを見てみると、英語だった場所が日本語に変更されています。

これでレビューの記入フォームも日本語化されました。

■「shopifyカリキュラム基礎編」その他の記事はこちら↓です。併せてご覧ください。
前の記事↓
【Day1】Shopifyの始め方や基本を解説
【Day2】商品登録方法を解説
【Day3】ページデザインの編集方法を解説。テーマのインストール～設定・編集
【Day4】ヘッダー・フッタのメニュー作成・編集方法を解説
【Day5】配送設定と決済テスト方法を解説

次の記事↓
【Day7】いろいろなページの作成方法PageFlyの使い方を解説