Appifyで構築したアプリは、デザインページ、リソースページ、コレクション、ウェブの合計4種類のデザインで構築されます。
本ガイドでは、デザインページの作成方法をご案内します。
デザインページの作成上限は、1000件です。
デザインページは、ヘッタータブ、バナー、商品リスト（縦向き）、商品リスト（横向き）、コレクション（カルーセル）、コレクション（横向き）の5種類のブロックを組み合わせて作成します。
ブロック名 | 遷移先 |
ヘッダータブ | ・商品コレクション ・商品単体 ・デザインページ ・リソースページ ・リンク ・ページ |
バナー | ・商品コレクション ・商品単体 ・デザインページ ・リンク ・ページ ・画像（遷移先なし） ※画像サイズの上限は1MBです。 |
商品リスト（縦向き） | ・商品コレクション |
商品リスト（横向き） | ・商品コレクション |
コレクション（カルーセル） | ・複数の商品コレクション |
コレクション（横向き） | ・複数の商品コレクション |
Appify管理画面＞テーマ＞デザインページ＞新規ページを作成するから、名前を入力し新規ページを作成します。その次に作成したページ横にある[カスタマイズ]を選択します。
すでに作成済みのデザインページを修正する場合は、新規でページを作成せず[カスタマイズ]から修正してください。[・・・]を選択すると、名前の変更・複製・アーカイブが可能です。
ヘッタータブは複数作成可能です。ヘッタータブを追加する＞ヘッタータブを設定するより、実際に設定を進めていきます。
項目 | 説明 |
タイトル | 日本語タイトルと英語タイトルをそれぞれ記入してください。 |
カスタマータグで表示制限を行う | 顧客タグで表示制限が可能です。 特定の顧客に対するイベントや販売などに活用できます。 ※タグは ※未入力の場合は全ユーザー閲覧可能です。 |
コレクション、商品〜リンク、ページ | ヘッタータブからの遷移先を設定してください。 |
ヘッダータブを活用しよう
ヘッダータブを活用することで下記のような効果が期待できます。
キャンペーン施策の動線を作ることで施策利用率アップが期待できる
新商品やSALEなどピックアップしたい商品への動線を作ることでコンバージョン率アップが期待できる
ITEMカテゴリ毎のデザインページの動線を作ることでユーザーの利便性が高まる効果が期待できる
ブロックを追加する＞バナーを選択し、右の設定画面より実際に設定を進めていきます。
項目 | 説明 |
コンテンツ | バナーに設定する画像をアップロードして遷移先を各項から選択することができます。 ※画像を選択した場合は遷移先なしとなります。 |
画像比率 | 画像比率を指定します。画像比率は入力必須です。 |
表示期間の制限を行う | 表示開始と表示終了の日時を指定できます。 期間限定のイベントや販売などに活用できます。 |
会員ランクで表示制限を行う | VIPで登録したランクごとに表示制限が可能です。ランク限定のイベントや販売などに活用できます。 ※未チェックの場合は全ユーザー閲覧可能です。 |
カスタマータグで表示制限を行う | 顧客タグごとに表示制限が可能です。 特定の顧客に対するイベントや販売などに活用できます。 ※タグは ※未入力の場合は全ユーザー閲覧可能です。 |
会員ランクとカスタマータグの表示制限
会員ランクとカスタマータグはOR条件です。会員ランクとカスタマータグで表示制限を行っている場合はどちらかの条件を満たしていれば表示されます。
例1）会員ランクでシルバーとゴールドランクにチェックをいれている
会員ランクシルバー OR 会員ランクゴールドランクのユーザーに表示されます。
例2）会員ランクでゴールドにチェック、カスタマータグでテスト1のタグを指定している
会員ランクゴールド OR 顧客タグテスト1が付与されているユーザーに表示されます。
例3）会員ランクでシルバーとゴールドランクにチェック、カスタマータグでテスト1とテスト2のタグを指定している
会員ランクシルバー OR 会員ランクゴールド OR 顧客タグテスト1 OR 顧客タグテスト2が付与されているユーザーに表示されます。
ブロックを追加する＞商品リスト（縦向き）を選択し、右の設定画面より実際に設定を進めていきます。
項目 | 説明 |
コンテンツ | コレクションを選択してください。 |
表示設定 | 表示する商品数を選択できます。 |
分析 | 任意のタグを設定することで、ブロックがタップした時にトラッキングイベントのパラメーターに追加されます。 |
分析
デザイン設定時にタグをご入力いただくことで、FirebaseやGA4を用いてより細かい分析ができるようになります。
あとからタグを入力しても過去の数値実績は引き継げませんのでご注意ください。
ブロックを追加する＞商品リスト（横向き）を選択し、右の設定画面より実際に設定を進めていきます。
設定項目 | 説明 |
コンテンツ | コレクションを選択してください。 |
表示設定 | 表示する商品数を選択できます。 |
分析 | 任意のタグを設定することで、ブロックがタップした時にトラッキングイベントのパラメーターに追加されます。 |
分析
デザイン設定時にタグをご入力いただくことで、FirebaseやGA4を用いてより細かい分析ができるようになります。
あとからタグを入力しても過去の数値実績は引き継げませんのでご注意ください。
ブロックを追加する＞コレクション（カルーセル）を選択し、右の設定画面より実際に設定を進めていきます。
設定項目 | 説明 |
コンテンツ | コレクションを選択してください。 コレクションは複数選択できます。 |
コレクションにタイトルを表示する | チェックをいれることで、コレクションページに設定しているアイキャッチ画像がグレーアウトされその上にコレクションのタイトルが表示されます。 |
ブロックを追加する＞コレクション（横向き）を選択し、右の設定画面より実際に設定を進めていきます。
設定項目 | 説明 |
タイトル | このブロックのタイトルを記入してください。 |
コンテンツ | コレクションを選択してください。コレクションは複数選択できます。 |
コレクションにタイトルを表示する | チェックをいれることで、コレクションページに設定しているアイキャッチ画像がグレーアウトされその上にコレクションのタイトルが表示されます。 |
モバイルアプリに表示されるコレクション名をカスタマイズする
以下の手順に則ってメタフィールドを設定することで、コレクションタイトルを自由にカスタマイズできます。管理用のタイトルと表示用のタイトルとしてそれぞれ管理可能です。
Shopify管理画面＞設定＞カスタムデータ＞コレクション と進みメタフィールドの設定を行います。[定義を追加する]ボタンをクリックして各項に下記の内容を入力してください。
※日本語、英語それぞれメタフィールドを設定しないと表示されません。
項目名 | 内容（日本語） | 内容（英語） |
名前 | 日本語タイトルの表示（任意） | 英語タイトルの表示（任意） |
ネームスペースとキー |
|
|
説明 | 任意で入力してください | 任意で入力してください |
タイプ | 単一行のテキスト[1つの値] | 単一行のテキスト[1つの値] |
メタフィールドの設定が終わったら、Shopifyの商品管理からコレクションへ進み、対象コレクションをクリックして移動します。コレクション内のメタフィールドにタイトルを入力すると入力した値がモバイルアプリに表示されます。