Brooklynのヒント

この記事では、オンラインストアでBrooklynを設定するために役立つヒントやベストプラクティスを紹介します。

メニューのヒント

ドロップダウンメニューの追加

メインメニューにドロップダウンメニューを追加するには、[ナビゲーション] ページにメニューを作成する必要があります。詳細については、「オンラインストアにドロップダウンメニューを設定する」を確認してください。

メインメニューをサイドバーメニューに変換する

多くのスペースがメインメニューによって使用されている場合、ヘッダーセクションのボタンをクリックすると開くサイドバーメニューにメインメニューを変換できます。

メインメニューをサイドバーのスタイルに変更することを防ぐには、以下の手順を実行します。

• メインメニューに追加するリンクは最大で4～5個までとする。
• メインメニューのリンクには幅の狭いフォントを使用する。タイポグラフィー設定から [強調文字] のフォントを変更できます。
• メニュー項目を作成する際に文字数を限定する。たとえば、「よくある質問」の代わりに「よくある質問」、「お問い合わせください」の代わりに「お問い合わせ」とすることができます。

画像のヒント

Brooklynに最適な商品画像のタイプ

• 高解像度な画像によって洗練されたプロフェッショナルな印象を与えられるため、最低でも1,024 x 1,024ピクセルの商品画像が必要です。商品画像に最適なのは、正方形です。

• 背景が単一色の写真が理想的です。単一色とは、濃淡やハイライトのない1色のみのことです。すべての画像の背景が単一色であることが必要です。

• 商品画像から縁を削除するには、色の設定から [商品の背景] の色を透明に設定します。

スライドショー画像に最適なサイズ

Brooklynデモストアに表示される2種類の画像スライドは、いずれも1200 x 800ピクセルです。画像スライドはすべてサイズを揃えることをおすすめします。

小さな画面でトリミングされる画像

小さいデバイスの場合、画面の上端から下端まで画像スライドで埋まります。スライドの高さがデバイスの画面の高さに合うように、スライドのサイズが変更されます。画像をゆがめずにスライドを画面全体に表示するために、スライドの左右がトリミングされます。

大きい画面の場合、ブラウザーのウィンドウの幅に合うように、画像スライドのサイズが変更されます。画像をゆがめずにスライドをウィンドウ全体に表示するために、スライドの下部がトリミングされます。

以下に表示されている例は、同じオンラインストアのデスクトップ版とモバイル版です。

ブログ記事の画像を設定

ブログ記事の最初の画像は、ブログページの記事のサムネイルとして使用されます。ブログ記事に画像を追加する方法については、「ブログ記事の執筆」で説明されています。

商品のヒント

商品に販売バッジを追加する

通常料金よりも高い割引前価格を設定することで、商品に販売バッジを追加できます。バッジはコレクションページでその商品の画像に表示されます。

コレクションページで拡大表示される商品を設定する

コラージュスタイルで商品を表示するためにコレクションページを設定している場合、一部の商品が大きい画像、他の商品が小さい画像で表示されます。コレクション内の商品の順番で画像のサイズが決まります。管理画面のコレクションページで、商品の順番を変更できます。編集するコレクションをクリックし、商品エリアで [並び替え] ドロップダウンメニューから [手動で] を選択します。次に、オンラインストアに表示する順番で商品をドラッグアンドドロップします。

6個の商品ごとに、最初の商品と6番目の商品の商品画像が拡大表示されます。たとえば、1、6、7、12、13、18番目の画像がコレクションで拡大表示されます。

すべて同じサイズの商品画像のグリッドで表示するには、グリッドスタイルで商品を表示するためにコレクションを設定します。

バリエーションを選択する際のスクロールアニメーション

商品ページで、スクロールする必要がない程度に商品説明が短いため画面に収まる場合、画像付きバリエーションを選択するとスクロールアニメーションが表示されます。スクロールする必要がない程度に画面に収まりきらないほど説明が長い場合、最上部の画像がバリエーション画像に置き換えられ、スクロールアニメーションは作成されません。

スクロールアニメーションを使用する場合、商品説明を短くします。