
【図解・Shopify基礎編】アプリのインストールと設定、liquidコード編集方法を解説
目次[非表示]
Shopify(ショッピファイ)の始め方~基礎編dya6~
この記事ではShopify(ショッピファイ)アプリの概要紹介の後、
具体的にアプリのインストール方法、
アプリの設定及びShopifyの特徴でもある「liquidコード」の設定方法も解説いたします。
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:全ての項目を入力して下さい
-----
プレビューを見てみると、英語だった場所が日本語に変更されています。
これでレビューの記入フォームも日本語化されました。
この記事のPDF版をダウンロードしたい場合はこちら