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(ショッピファイ)購入制限アプリMin&Max Limits by Limitsifyを解説

【おススメのShopifyアプリ】Min&Max Limits by Limitsifyをご紹介いたします。特売品や限定品を「おひとり1つまで」に限定する集客施策を実施したり、最小注文数量を設定して出荷コストのバランスの調整や客単価を改善、あるいは個口割れを防ぐために最大注文数量を設定するなど、注文に様々な条件付けが実現できるとても実用的なアプリです。

Shopify(ショッピファイ)定期購入アプリRecharge Subscriptionsを解説(後編)

【おススメのShopifyアプリ】Shopifyの定期購入アプリの定番 Recharge Subscriptionsのダッシュボードや顧客ポータルについて紹介

Shopify(ショッピファイ)アクセスコントロールアプリ Locksmith を解説

【おすすめのShopifyアプリ】Locksmithは顧客に応じて最適なコンテンツ(商品)を提供することができるアプリです。ストアの顧客を増やしたり、顧客単価を上げるための施策におすすめしたいアプリです。

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

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

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



Shopify問い合わせフォーム

アップロードしています。少々お待ちください。
お気軽に
お問い合わせください

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

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

関連記事


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

2021年10月22日オンラインECセミナー動画【無料視聴】

今回のセミナーでは国内外で50以上のブランドを展開する株式会社TSI様に、オンライン接客ツール『HERO®』の効果について解説していただきます。

2021年09月29日オンラインECセミナー動画【無料視聴】

『製薬企業 第3極の販路圏 DXプリホールセラー企業はなぜ誕生した?』第2弾は「MRのノンコア業務アウトソース」をテーマにロート製薬株式会社再生医療事業開発部 部長 兼 メディカル事業開発部 部長西巻賢一様をお迎えし、鼎談スタイルで語り合っていただきます。

2021年09月28日オンラインECセミナー動画【無料視聴】

デジタルシフトが求められる今、D2Cへの関心が高まり、ダイレクトにお客様とつながる D2C ビジネスは注目を集めています。本セミナーでは、顧客視点で取り組むD2CとEC事業を成功させるために不可欠なプラットフォーム『Shopify』の歴史・メリットなど基本のすべてをお伝えさせていただきます。


EC関連サービス



採用情報(求人)

EC流通に関する新規サービス企画/セールス【正社員】【採用・求人情報】

激変する流通業界の中で、お客様企業の満足度を高めるサービスの実現のために、最適なロジスティクスシステムをデザインしていただく、裁量権が大きいポジションでのお仕事です。システム設計・構築・導入プロジェクトマネジメントを通して、お客様企業の事業拡大の支援をしていただきます。

ECロジスティクス運用システムマネージャー【正社員】【採用・求人情報】

激変する流通業界の中で、お客様企業の満足度を高めるサービスの実現のために、最適なロジスティクスシステムをデザインしていただく、裁量権が大きいポジションでのお仕事です。システム設計・構築・導入プロジェクトマネジメントを通して、お客様企業の事業拡大の支援をしていただきます。

EC物流センターのバックオフィス業務マネージャー【正社員】【採用・求人情報】

トランスコスモスの求人情報です。バックオフィス業務は、関連部署との調整やお客様企業の対応に至るまで、その業務プロセスの中核をなす重要なポジションとなりますが、今後ますます需要が伸びるECサービスにおいて、新規サービス導入に向けた体制・運用構築など、事業拡大に携わることで自身のキャリアアップを目指すことも可能です。


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

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

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

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

Shopify人気記事ランキング

 Tag(タグ)

 記事検索

 カテゴリー

 【無料】募集中セミナー

全4件中 1〜 4件を表示

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

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

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

フルフィルメント(ロジスティクス)サービス資料無料ダウンロード一覧

フルフィルメント(ロジステックス)サービス資料無料ダウンロード一覧になります。

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

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

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

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

全5件中 1〜 4件を表示

Shopify認定パートナー企業

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