デザインページ

デザインページとは、バナー、商品リスト(縦向き)、商品リスト(横向き)、コレクション(カルーセル)、コレクション(横向き)の5種類のブロックを組み合わせてブランディングを表現しながら印象的なページを作成することができます。

デザインページの作成上限は、1000件までです。

ブロック名

遷移先

ヘッダータブ

・商品コレクション

・商品単体

・デザインページ

・リソースページ

・リンク

・ページ

バナー

・商品コレクション

・商品単体

・デザインページ

・リンク

・ページ

・画像(遷移先なし)

※画像サイズの上限は1MBです。

商品リスト(縦向き)

・商品コレクション

商品リスト(横向き)

・商品コレクション

コレクション(カルーセル)

・複数の商品コレクション

コレクション(横向き)

・複数の商品コレクション

設定項目

説明

タイトル

日本語タイトルと英語タイトルをそれぞれ記入して遷移先を各項から選択してください。

ヘッダーは複数設定することが可能です。

カスタマータグで表示制限を行う

顧客タグごとに表示制限を行うことができます。

特定の顧客に対するイベントや販売などに活用できます。

※タグはテスト1,テスト2,テスト3のようにカンマ区切りで付与することで複数指定が可能です。

※未入力の場合は全ユーザー閲覧可能です。

ヘッダータブを活用しよう

ヘッダータブを活用することで下記のような効果が期待できます。

  • キャンペーン施策の動線を作ることで施策利用率アップが期待できる

  • 新商品やSALEなどピックアップしたい商品への動線を作ることでコンバージョン率アップが期待できる

  • ITEMカテゴリ毎のデザインページの動線を作ることでユーザーの利便性が高まる効果が期待できる

設定項目

説明

コンテンツ

バナーに設定する画像をアップロードして遷移先を各項から選択することができます。 ※画像を選択した場合は遷移先なしとなります。

画像比率

画像比率を指定します。画像比率は入力必須です。

表示期間の制限を行う

表示開始と表示終了の日時を指定できます。 期間限定のイベントや販売などに活用できます。

会員ランクで表示制限を行う

VIPでしたランクごとに表制限を行うことができます。 ランク限定のイベントや販売などに活用できます。 ※未チェックの場合は全ユーザー閲覧可能です。

カスタマータグで表示制限を行う

顧客タグごとに表示制限を行うことができます。 特定の顧客に対するイベントや販売などに活用できます。 ※タグはテスト1,テスト2,テスト3のようにカンマ区切りで付与することで複数指定が可能です。 ※未入力の場合は全ユーザー閲覧可能です。

会員ランクとカスタマータグの表示制限

会員ランクとカスタマータグはOR条件です。会員ランクとカスタマータグで表示制限を行っている場合はどちらかの条件を満たしていれば表示されます。

例1)会員ランクでシルバーとゴールドランクにチェックをいれている

会員ランクシルバー OR 会員ランクゴールドランクのユーザーに表示されます。

例2)会員ランクでゴールドにチェック、カスタマータグでテスト1のタグを指定している

会員ランクゴールド OR 顧客タグテスト1が付与されているユーザーに表示されます。

例3)会員ランクでシルバーとゴールドランクにチェック、カスタマータグでテスト1とテスト2のタグを指定している

会員ランクシルバー OR 会員ランクゴールド OR 顧客タグテスト1 OR 顧客タグテスト2が付与されているユーザーに表示されます。

設定項目

説明

コンテンツ

コレクションを選択してください。

表示設定

表示する商品数を選択できます。

分析

任意のタグを設定することで、ブロックがタップした時にトラッキングイベントのパラメーターに追加されます。

分析

デザイン設定時にタグをご入力いただくことで、FirebaseやGA4を用いてより細かい分析ができるようになります。

あとからタグを入力しても過去の数値実績は引き継げませんのでご注意ください。

設定項目

説明

コンテンツ

コレクションを選択してください。

表示設定

表示する商品数を選択できます。

分析

任意のタグを設定することで、ブロックがタップした時にトラッキングイベントのパラメーターに追加されます。

分析

デザイン設定時にタグをご入力いただくことで、FirebaseやGA4を用いてより細かい分析ができるようになります。

あとからタグを入力しても過去の数値実績は引き継げませんのでご注意ください。

設定項目

説明

コンテンツ

コレクションを選択してください。コレクションは複数選択できます。

コレクションにタイトルを表示する

チェックをいれることで、コレクションページに設定しているアイキャッチ画像がグレーアウトされその上にコレクションのタイトルが表示されます。

設定項目

説明

タイトル

このブロックのタイトルを記入してください。

コンテンツ

コレクションを選択してください。コレクションは複数選択できます。

コレクションにタイトルを表示する

チェックをいれることで、コレクションページに設定しているアイキャッチ画像がグレーアウトされその上にコレクションのタイトルが表示されます。

モバイルアプリに表示されるコレクション名をカスタマイズする

以下の手順に則ってメタフィールドを設定することで、コレクションタイトルを自由にカスタマイズすることができます。

管理用のタイトルと表示用のタイトルとしてそれぞれ管理することが可能になります。

Shopify管理画面 > [設定] > カスタムデータ > コレクション と進みメタフィールドの設定を行います。

[定義を追加する]ボタンをクリックして各項に下記の内容を入力してください。

※日本語、英語それぞれメタフィールドを設定しないと表示されません。

項目名

内容

名前

日本語タイトルの表示(任意)

ネームスペースとキー

appify-mobile.title_japanese

説明

任意で入力してください

タイプ

単一行のテキスト[1つの値]

項目名

内容

名前

英語タイトルの表示(任意)

ネームスペースとキー

appify-mobile.title_english

説明

任意で入力してください

タイプ

単一行のテキスト[1つの値]

メタフィールドの設定が終わったら、Shopifyの商品管理からコレクションへ進み、対象コレクションをクリックして移動します。

コレクション内のメタフィールドにタイトルを入力すると入力した値がモバイルアプリに表示されます。

ボタン

説明

・・・

名前を変更デザインページ名を変更することができます

複製デザインページを複製することができます

アーカイブデザインページをアーカイブすることができます

カスタマイズ

作成済みのデザインページをカスタマイズすることができます。

アーカイブのエラー

デザインページやリソースページなどで利用しているブロックをアーカイブした場合、エラーになりアーカイブが出来ません。該当ブロックを外してからアーカイブをしてください。