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

この記事は「shopifyカリキュラム基礎編 -Day7-」となり、今回が最終カリキュラムとなります。

こちらでは、Shopify(ショッピファイ)のページデザイン方法を初心者向けご紹介します。

Shopify(ショッピファイ)標準の機能だと、ページのデザインをするに際しliquidの知識や高度なスキルが必要になります。

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

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

Shopify「お問い合わせページ」の作成方法を図解(PageFly)

ページビルダーのShopifyアプリ「PageFly」を活用したコンタクトフォームの作成方法

Shopify appストアからPageFlyをインストールします。

インストールはこちら　https://apps.shopify.com/pagefly?locale=ja

インストールが完了したらShopify管理画面の左メニューにあるアプリ管理をクリック

使用メニュー　アプリ管理＞PageFly

ShopifyアプリPageFlyの使い方

PageFlyの管理ページを開いたら、「レギュラーページ」を選択し、ページの作成ボタンを押します。

ページタイトルに「contact」と入力し、次へ進みます。
※ここで入力したタイトルがページのURLになるので、日本語は使わないようにしましょう

ページの種類には「アバウト/コンタクト」を選択し、「Boulanger」のテンプレートを選択したら次へ進みます。

テンプレートが編集テーブルにセットされました。このページを基にしてコンタクトページを作成していきます。

こちらが完成イメージです。

構成としては3つのセクションになりますので、各セクションごとに解説をしていきます。

各セクションを選択すると、ページ右側に編集フィールドが表示されます。

「一般」は記述するテキストやリンクの設定等。「スタイリング」は色やフォント、画像などを設定する項目です。

ここからは1セクションごとに編集を行っていきます。

トップのFV(ファーストビュー※スクロールせず表示される範囲)の設定方(PageFly)

上記の設定で、FV(ファーストビュー)が下のようになります。

セクションの削除方法(PageFly)

削除したいセクションを選択した際に表示される下のアイコンの中からごみ箱マークを選択すると削除されます。

続いてFV(ファーストビュー)とMAP(地図)以外全てのセクションを削除して、上のようなレイアウトにして下さい。

コンタクトフォームのセクション作成方法(PageFly)

コンタクトフォームのセクションを作成します。セクションを追加したい場合は
画面左側のメニューから呼び出します。

-----
①コンテンツ選択：Shopifyマークを選択します
②追加コンテンツ：お問い合わせフォームを選択
③コンタクトフォーム：真ん中のコンテンツを選択
-----

ドラッグ＆ドロップでセクションを追加するので、
資料内（shopifyカリキュラム_基礎編_Day7_v1.0.pdf）の
11ページに掲載された動画*を参照してセクションを追加して下さい

*資料はこちらよりダウンロードしてください

フォームが追加出来たら、各項目を編集します。

コンタクトフォームにMAP(地図)の設定する方法(PageFly)

ページの作成が完了したら、
オンラインストア　→　メニュー  より、
ヘッダーとフッターにお問い合わせページへのリンクを設定しましょう。

Shopifyのコレクションページのデザイン編集・装飾方法について概要

デフォルト(初期設定の状態)では装飾がないコレクションページですが、PageFlyで作成する事でおしゃれなデザイン性のあるページを作成する事が出来ます。

以下からコレクションページの作成を行っていきます。

コレクションページのデザイン編集する方法を図解(PageFly)

施策ページの作成や新商品のPR等、コレクションページのデザイン変更・装飾が出来るとアクセス時の印象を大きく変える事が出来ます。
ページビルダー(PageFlyアプリ)のテンプレートを活用し、コレクションページの作成方法を紹介します。

使用メニュー　アプリ管理＞PageFly

PageFlyの管理ページを開いたら「コレクションページ」を選択し、ページの作成ボタンを押します。

ページタイトルに「tableware」と入力し、次へ進みます。
※ここで入力したタイトルがページのURLになるので、日本語は使わないようにしましょう

テーブルウェアのコレクションを選択し、保存します。

ページの種類を「コレクションページ」を選択し、「Cornelia」のテンプレートを選択したら次へ進みます。

テンプレートが編集テーブルにセットされました。このページを基にしてコレクションページを作成していきます。

こちらが完成イメージです。

構成としては4つのセクションになります。各セクションごとに解説をしていきます。

ページの自由作成方法を図解(PageFly)

ここまでの当サイトでご紹介したShopifyの使い方を紹介した以下の解説ブログ記事で、Shopifyで０からショップを開設し、商品の登録及びページの作成までを行えるようになったかと思います。

Day1:【図解・はじめてのShopify(ショッピファイ) 基礎編】 Shopifyの始め方や基本を解説

Day2:【図解・Shopify(ショッピファイ) 基礎編】商品登録方法を解説

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

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

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

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

最後に応用編として、ページビルダーを利用して好きなページを作成してみましょう。
下記の「❶〜❸」から一つ選び、ページを作成してみて下さい。

使用メニュー　アプリ管理＞PageFly