catch-img

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


目次[非表示]

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

Shopify(ショッピファイ)の始め方~基礎編dya7~

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

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

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


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


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

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

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

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

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

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

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



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

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




この記事のPDF版をダウンロードしたい場合はこちら

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

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

関連記事


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

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

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

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

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

2020年11月30日オンラインECセミナー動画【無料視聴】

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


EC関連サービス

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

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

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

Shopify人気記事ランキング

 Tag(タグ)

 記事検索

 カテゴリー

 【無料】募集中セミナー

全9件中 1〜 4件を表示

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

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

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

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

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

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

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

全3件中 1〜 3件を表示

Shopify認定パートナー企業

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