shopify(ショッピファイ)基礎編_図解_ページの作成方法PageFlyの使い方

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


目次[非表示]

  1. 1.Shopify「お問い合わせページ」の作成方法を図解(PageFly)
  2. 2.コレクションページのデザイン編集する方法を図解(PageFly)
  3. 3.ページの自由作成方法を図解(PageFly)

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

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

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

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

記事のPDF版をダウンロードするボタン


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


shopifyに関するお問い合わせをするボタン

shopify資料のダウンロードをするボタン

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で0からショップを開設し、商品の登録及びページの作成までを行えるようになったかと思います。

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

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

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

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

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

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


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

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


記事のPDF版をダウンロードするボタン


shopifyに関するお問い合わせをするボタン

shopify資料のダウンロードをするボタン

shopify構築サービスバナー

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

Shopify(ショッピファイ)ストア構築・制作、
運用代行について問い合わせ

Shopifyアプリ解説・紹介記事

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

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

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

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

関連記事


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


EC関連サービス


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

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

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

トランスコスモスは日本最上位の「Shopifyプラスパートナー」企業です
ECサイトを作るならShopify
ロジスティクスサービス

 記事カテゴリー

【週間ランキング】ECブログ人気記事

ロジスティクス関連 新着記事

【初心者必見!】Shopifyマニュアル

 Tag(タグ)一覧

正社員募集(求人)

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

Shopify認定パートナー企業

shopify plus partner
トランスコスモスは最上位の「Shopify Plus partner(ショッピファイプラスパートナー)」です。
Shopifyでのサイト制作ならお任せください!
ECソリューションをお届けするサービスサイト

トランスコスモス株式会社
CX事業統括
ECX本部

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

経済産業省が定める「DX認定事業者」
トランスコスモスは経済産業省が定める「DX認定事業者」
トランスプラス
トランスコスモスの全社的な情報を発信するオウンドメディア
cotra
コンタクト/コールセンターに携わる方への情報サイト
トランスコスモス株式会社
企業サイト(コーポレートHP)
Global Digital Transformation Partner.
お客様企業のデジタル・トランスフォーメーション・パートナー。
shopify構築・制作・運用