トップページのデザインを編集する

トップページのデザインは「デザインエディター」を使って簡単に編集することができます。

アプリのトップページのデザインを編集するには、Shopifyのオンラインストアと同じようにブロックを追加したり入れ替えたりするようにして設定ができます。編集後は保存して管理画面から公開設定にすることで、顧客のアプリにリアルタイムで反映されます。

ブロックを追加する

左側のサイドバーにある「ブロックを追加する」をクリックして、画面上に追加したいブロックの種類を選択します。

ブロックの順番を並び替える

左側にあるサイドバーのブロックにマウスのカーソルを重ねて、表示された矢印をクリックすることで上下に移動できます (※1)。

※1.今後のアップデートでドラッグ&ドロップによる並び替えに対応する予定です。

ブロックを非表示にする

左側にあるサイドバーのブロックにマウスのカーソルを重ねると目のアイコンが表示されます。このアイコンをクリックするとブロックの表示/非表示を切り替えることができます。

ブロックを削除する

削除したいブロックをクリックして、右側にあるサイドバーの一番下にある「ブロックを削除する」をクリックしてください。

バナー

バナーのブロックは、表示するバナー画像と遷移先のページを設定することができます。遷移先の設定は、バナーブロックをクリックした後、右側に表示されるサイドバーの「コンテンツ」から行います。遷移するページは以下の4種類から設定でき、遷移先を無しにすることもできます。

• 商品ページ
• コレクションページ
• 外部ウェブサイト
• アプリ内のページ

なお、バナーはアップロードされている画像の比率に合わせてアプリ画面上に表示されます。

カルーセルバナー

カルーセルバナーを使うと、複数のバナー画像をスライド式に表示することができます。カルーセルバナーには、必ず遷移先を設定する必要があります。また、バナーブロックと異なり表示する画像のサイズを指定する必要があります。

商品リスト (縦向き)

このブロックを使うと、指定されたコレクションの商品を縦向きに表示することができます。商品の並び順には、Shopifyで設定されているコレクション内の商品のデフォルトの並びが適応されます。

列数と行数を変更することで表示する商品数を設定できます。デフォルトでは2列・2行で4つの商品が表示されます。例えば3列・5行で設定すると、15個の商品を表示することができます。もし、コレクション内の商品数が設定されている数より少なかった場合、取得できる数だけを表示します。

商品リスト (横向き)

このブロックを使うと、指定されたコレクションの商品を横向きに表示することができます。商品の並び順には、Shopifyで設定されているコレクション内の商品のデフォルトの並びがで適応されます。

表示する商品の数は1~30個の間で変更することができます。

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

このブロックを使うと、複数のコレクションをスライド式で表示することができます。表示される画像には、Shopifyのコレクションに設定されている画像が用いられます。表示される画像に重ねてタイトルを表示したい場合は「コレクションのタイトルを表示する」を選択します。

コレクション (横向き)

このブロックを使うと、複数のコレクションを横並びで表示することができます。表示される画像は、Shopifyのコレクションに設定されている画像が用いられます。表示される画像に重ねてタイトルを表示したい場合は「コレクションのタイトルを表示する」を選択します。

Coming soon - ボタン

利用できるようになり次第、ドキュメントがアップデートされます。

Coming soon - スペーサー

利用できるようになり次第、ドキュメントがアップデートされます。