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エンジニア

トランスコスモスは日本で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でのサイト制作ならお任せください