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エンジニア
トランスコスモスは日本で7社しかない最上位の「Shopifyプラスパートナー」です。最上位認定を堅持しShopifyでのECサイト制作・Shopifyアプリ開発を担うのが、トランスコスモスShopifyエンジニアチームです。Shopifyアプリの解説・紹介、Shopify基本的な使い方など制作や開発の過程で得られら知見をご紹介します。

採用情報(求人)


Shopifyアプリ解説・紹介記事

ShopifyのECサイト制作ならトランスコスモス

トランスコスモスは、Shopifyのエンタープライズ版「Shopify Plus」の優れた成果を持つ提携企業として認定された、国内に7社しかいない(2021年9月時点)最上位の公式パートナーです。

Shopifyを使ったECサイト制作から、調査分析・戦略立案、WEB広告(SEM)、ECサイト制作、お客様サポート、受発注、フルフィルメントまで業務設計・運用代行いたします。


トランスコスモスのEC全領域を網羅するサービス



Shopify問い合わせフォーム

関連記事


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


EC関連サービス


数字で見るトランスコスモスの強み

お気軽に
お問い合わせください

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

トランスコスモスは日本に7社しかない最上位の「Shopifyプラスパートナー」企業です
shopify専用倉庫スピードロジ

【週間ランキング】Shopify人気記事

 Tag(タグ)一覧

 記事検索

 記事カテゴリー

 【無料】募集中セミナー

正社員募集(求人)

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

Shopify認定パートナー企業

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


ECソリューションをお届けするサービスサイト

トランスコスモス株式会社
デジタルトランスフォーメーション総括 ECX本部

〒150-0011
東京都渋谷区東1-2-20
渋谷ファーストタワー
050-1751-7700(代表)


経済産業省が定める「DX認定事業者」
トランスコスモスは経済産業省が定める「DX認定事業者」

トランスプラス
トランスコスモスの全社的な情報を発信するオウンドメディア

cotra
コンタクト/コールセンターに携わる方への情報サイト
shopify構築・制作・運用
shopify構築・制作・運用