catch-img

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


目次[非表示]

  1. 1.shopifyの特徴・アプリケーションによる機能拡張
  2. 2.shopifyアプリケーションのインストール方法を図解
  3. 3.shopifyアプリケーションの設定方法を図解
  4. 4.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版をダウンロードしたい場合はこちら

トランスコスモスShopifyエンジニア
トランスコスモスShopifyエンジニア

トランスコスモスは日本で5社しかない最上位の「Shopifyプラスパートナー」です。最上位認定を堅持しECサイト制作・Shopifyアプリ開発を担うのが、トランスコスモスShopifyエンジニアチームです。Shopify構築によって得られた知見などをブログ記事にて発信していきます。

関連記事

【図解・Shopify(ショッピファイ)基礎編】配送設定と決済テスト方法を解説

Shopify(ショッピファイ)の管理画面から配送・決済の設定方法と決済のテストを実施する方法を図解で紹介

【図解・Shopify基礎編】いろいろなページの作成方法PageFlyの使い方を解説

Shopify(ショッピファイ)の始め方。ページビルダーアプリケーションを活用する事で、任意のページを好きにデザインする事が出来ます

【図解・Shopify(ショッピファイ)基礎編】ヘッダー・フッタのメニュー作成・編集方法を解説

Shopify(ショッピファイ)の始め方紹介。サイトにヘッダー・フィッタメニューを作成・編集する方法を解説します。

【図解・Shopify(ショッピファイ)基礎編】ページデザインの編集方法を解説。テーマのインストール~設定・編集

TOPページや商品ページのデザインは「テーマ」と呼ばれるテンプレートを主に活用して制作していきます。テーマを切り替える事で簡単にTOPや商品詳細ページのデザインを変更する事が出来ます

全33件中 1〜 4件を表示


【無料】セミナー動画視聴

本セミナーでは、トランスコスモスのEC支援に対する豊富な実績をもとに今後の変革に必要と考えられる「CRM、データドリブン、生産性向上」をテーマとした当社コンサルティングサービスについて、講義形式のセミナー開催

【Shopify構築・運用セミナー】拡大するEC市場に不可欠なバックエンド業務の最新トレンド。EC事業を成功させるために『効率化に向けたバックエンド業務の最新トレンド』と題して、Shopify構築・運用に連携できるサービスをご紹介。

トランスコスモス主催のオンラインセミナー!EC事業を成功させるために『効率化に向けた最新テクノロジー』を丸紅情報システムズならびにグーグルクラウドジャパンをお招きしRPA,AI-OCRなど最新事例を交えてお伝えさせていただきます。

全11件中 1〜 3件を表示
お気軽に
お問い合わせください

Shopify(ショッピファイ) ECストア構築・運用代行

トランスコスモスは日本に5社しかない最上位の「Shopifyプラスパートナー」企業です

Shopify人気記事ランキング

 Tag(タグ)

 記事検索

 カテゴリー

 【無料】募集中セミナー

 【無料】資料ダウンロード

Shopify操作マニュアルのダウンロード一覧

ショッピファイの管理画面の使い方を図解で開設した操作マニュアル資料をPDFにてダウンロード頂けます。

ECサービス紹介資料無料ダウンロード一覧

トランスコスモスのEC関連のサービス資料の一覧ページです。PDFにて概要のわかる資料を「無料」でダウンロードして頂けます。

セミナー発表資料の無料ダウンロード一覧

トランスコスモスのEC関連のWEBセミナーで使用した資料一覧ページです。PDFにてセミナーの内容がわかる資料を「無料」でダウンロードして頂けます。

全3件中 1〜 3件を表示

Shopify認定パートナー企業

トランスコスモスは日本に5社しかない最上位の「Shopifyプラスパートナー」です。
Shopifyでのサイト制作ならお任せください