カテゴリー
デザインページ
Appifyで構築したアプリは、デザインページ、リソースページ、コレクション、ウェブの合計4種類のデザインで構築されます。 本ガイドでは、デザインページの設定方法についてご案内します。
デザインページとは?
概要 Appifyで構築したアプリ「デザインページ」「リソースページ」「コレクション」「Web ページ」の4種類のページで構築できます。また、これらに加えて「カートページ」と「マイページ」もご用意しています。 本ガイドでは、デザインページの作成方法をご案内します。 デザインページの作成上限は、1000件です。 --- ブロックの種類 デザインページは、アイコン、ヘッタータブ&サブタブ、バナー、商品リスト、コレクション、バナー、色付きテキストバナー、スタッフ&コーディネート一覧のブロックを組み合わせて作成します。 推移先が設定できるブロックは、それぞれ設定できる推移先について以下からご確認ください。 ブロック名 遷移先 ヘッタータブ ・商品コレクション ・商品単体 ・デザインページ ・リソースページ ・リンク ・ページ バナー ・商品コレクション ・商品単体 ・デザインページ ・リンク ・ページ 商品リスト ・商品コレクション コレクション ・複数の商品コレクション --- 設定方法 1. デザインページの設定画面を開く Appify管理画面>テーマ>デザインページ>新規ページを作成するアイコン
概要 デザインページ上部に、設定する画像を「アイコン」といいます。 アイコンには、ブランドロゴなどを設定されるブランドが多いです。 本ガイドでは、アイコンの設定方法をご案内いたします。デザインページについてのガイドを確認されていない方は、まずはデザインページに関するガイドをご確認ください。(→デザインページのガイドはこちら) ヘッダータブでデザインページが選択されていて、フッターでアイコンを設定した対象のデザインページが選択されている場合に表示されます。 --- 設定方法 デザインページを開いた後、まずは「ブロックを追加する」からアイコンを選択してください。右の設定画面より任意のアイコン画像を設定してください。ヘッタータブ&サブタブ
概要 デザインページ内では、「ヘッタータブ」を使ってページを切り替えることができます。また、ヘッダータブの配下には「サブタブ」を設定でき、さらに細かくページを切り替えることも可能です。 また、ヘッタータブにお客様がお気にいり登録したページを表示できる「お気に入り制御設定」も設定可能です。 本ガイドでは、「ヘッタータブ」と「サブタブ」「お気に入り制御設定」の設定方法をご案内いたします。デザインページについてのガイドを確認されていない方は、まずはデザインページに関するガイドをご確認ください。(→デザインページのガイドはこちら) ヘッタータブは10個まで作成可能です。 --- ヘッタータブの設定方法 デザインページを開いた後、ヘッタータブを追加する>ヘッタータブを設定するより、実際に設定を進めていきます。 表示された設定画面に以下表の内容を参考に情報を入力します。 項目 説明 タイトル 日本語・英語・台湾語(繁体字)のタイトルをそれぞれ記入してください。 カスタマータグで表示制限を行う 顧客タグで表示制限が可能です。 特定の顧客に対するイベントや販売などに活用できます。 ※タグは「テスト1,商品リスト
概要 デザインページに、商品の一覧を設定できます。一覧は、縦向き・横向きの設定が可能です。 本ガイドでは、商品リストの設定方法をご案内いたします。デザインページについてのガイドを確認されていない方は、まずはデザインページに関するガイドをご確認ください。(→デザインページのガイドはこちら) --- 商品リスト(縦向き)の設定方法 デザインページを開いた後、まずは「ブロックを追加する」から商品リスト(縦向き)を選択してください。表示された設定画面に以下表の内容を参考に情報を入力します。 項目 説明 管理画面表示用のタイトル 管理画面上のブロックタイトルを任意で設定してください。 コンテンツ コレクションを選択してください。 サブタイトル コレクションタイトルの下に表示されるサブタイトルを表示したい場合に日本語・英語・台湾語(繁体字)で設定してください。 表示設定 表示する商品数を選択できます。 分析 任意のタグを設定することで、ブロックがタップした時にトラッキングイベントのパラメーターに追加されます。 表示期間の制限を行う 表示開始と表示終了の日時を指定できます。 期間限定のイベントや販売バナー
概要 バナーとは、アプリ内で画像や文字を使ってページを表現する機能です。キャンペーン情報やブランドイメージ、商品の紹介などを伝えるために活用します。 本ガイドでは、「バナー」の設定方法をご案内いたします。デザインページについてのガイドを確認されていない方は、まずはデザインページに関するガイドをご確認ください。(→デザインページのガイドはこちら) --- 設定方法 デザインページを開いた後、ブロックを追加する>バナーより、実際に設定を進めていきます。 表示された設定画面に以下表の内容を参考に情報を入力します。 項目 説明 管理画面表示用のタイトル 管理画面上のブロックタイトルを任意で設定してください。 コンテンツ バナーに設定する画像をアップロードして遷移先を各項から選択することができます。 ※画像を選択した場合は遷移先なしとなります。 画像比率 画像比率を指定します。画像比率は入力必須です。 カルーセルインジケーター バナーを複数設定した際のバナー下に表示される丸い点(インジケーター)を設定することができます。 ※色は16進数のカラーコードで設定できます。(→カラーコードについて確認す商品検索
概要 検索バーをタップすると、キーワード入力欄と、あらかじめ作成した検索条件の一覧が表示されます。検索バーに入力したキーワードと検索条件はAND検索で組み合わせて利用可能です。 本ガイドでは、検索バーの設定及び条件の設定方法をご案内いたします。 商品情報などの条件を追加したい場合は、Search and Discoveryでの設定が必要になります。Search and Discoveryをインストールしていない場合は、まずはこちらからインストールしてください。 検索条件の種類 検索条件は、Shopifyの商品管理画面上で設定できる以下項目より選択できます。 - 標準で「商品タイプ」「販売元」「商品タグ」「価格帯」「在庫有無」 - 商品オプション - 商品メタフィールド 検索条件は最大250件まで登録でき、検索条件のみでの検索も可能です。 設定方法 1. 検索バーの設定 以下を設定することで、検索バーが表示され、商品の検索か可能です。 1. Shopify管理画面>販売チャネル>Appify>テーマ>商品検索・検索条件の「トップページに検索バーを表示する」にチェック 2. 検索対象>商品コレクション
概要 デザインページに、コレクションの一覧を設定できます。 コレクションは、カルーセル表示か、横向き表示か設定が可能です。 本ガイドでは、コレクションの設定方法をご案内いたします。デザインページについてのガイドを確認されていない方は、まずはデザインページに関するガイドをご確認ください。(→デザインページのガイドはこちら) --- コレクション(カルーセル)の設定方法 デザインページを開いた後、まずは「ブロックを追加する」からコレクション(カルーセル)を選択してください。表示された設定画面に以下表の内容を参考に情報を入力します。 設定項目 説明 管理画面表示用のタイトル 管理画面上のブロックタイトルを任意で設定してください。 コンテンツ コレクションを選択してください。 コレクションは複数選択できます。 タイトル コレクションタイトルを表示したい場合に日本語・英語・台湾語(繁体字)で設定してください。 サブタイトル コレクションタイトルの下に表示されるサブタイトルを表示したい場合に日本語・英語・台湾語(繁体字)で設定してください。 コレクションにタイトルを表示する チェックをいれることで色付きテキストバナー
概要 色付きテキストバナーとは、アプリ内で任意のテキストをバナーとして表示し、ページをデザインする機能です。バナーとは違い文字のみの設定が可能で、文字色・背景色を自由に設定できます。 本ガイドでは、「色付きテキストバナー」の設定方法をご案内いたします。デザインページについてのガイドを確認されていない方は、まずはデザインページに関するガイドをご確認ください。(→デザインページのガイドはこちら) --- 設定方法 デザインページを開いた後、まずは「ブロックを追加する」から色付きテキストバナーを選択してください。表示された設定画面に以下表の内容を参考に情報を入力します。 設定項目 説明 タイトル タイトルを表示したい場合に日本語、英語、中国語 繁体字それぞれ設定してください。 サブタイトル サブタイトルを表示したい場合に日本語、英語、中国語 繁体字それぞれ設定してください。 テキスト テキストを200文字以内で入力してください。 背景色 16進数のカラーコードで色を設定できます。(→カラーコードはこちら) 文字色 16進数のカラーコードで色を設定できます。(→カラーコードはこちら) 遷移先設スタッフ&コーディネート一覧
概要 STAFF STARTと連携している場合、デザインページにスタッフやコーディネートの一覧を表示できます。 本ガイドでは、「色付きテキストバナー」の設定方法をご案内いたします。デザインページについてのガイドを確認されていない方は、まずはデザインページに関するガイドをご確認ください。(→デザインページのガイドはこちら) こちらの機能のご利用にはSTAFF START連携が必要です。(→STAFF START連携についてはこちら) --- スタッフ一覧の設定方法 デザインページを開いた後、ヘッタータブを追加する>スタッフ一覧より、実際に設定を進めていきます。 表示された設定画面に以下表の内容を参考に情報を入力します。 設定項目 説明 管理画面表示用のタイトル 管理画面上のブロックタイトルを任意で設定してください。 コンテンツ STAFF STARTのブランドID(レーベルID)を指定してください。 タイトル タイトルを表示したい場合に日本語、英語、中国語 繁体字それぞれ設定してください。 サブタイトル サブタイトルを表示したい場合に日本語、英語、中国語 繁体字それぞれ設定してください。