SHOPLINEは、テーマテンプレート「Ultra Chic」を誇りを持って提供します。このテーマテンプレートを使用するビジネスオーナーは、オンラインストアのよりダイナミックなストアフロントをデザインすることができます。
*Note: 顧客が公式プランを使用している場合、ストアのレイアウトを変更することはできず、「ソーシャルコマース」プランのみが対象です。
1. ストアの色をカスタマイズする
SHOPLINE管理画面で、[オンラインストアデザイン]>[ページ]に移動し、+ 高度なページをクリックして新しいストアページを作成するか、SHOPビルダーをサポートする既存のページの隣にある編集ボタンをクリックします。
高度なページで、[ストア設定]>[色]に移動して、各ブロックの色をカスタマイズします。各ブロックのデフォルトの色は、最初に設定した色です。
ストア全体のボタン、重要な情報、下線の色をカスタマイズするために色コードを使用できます。6桁のHEXカラーコードを使用してください（可読性を高めるために明るい色の使用は避けてください）。色コードの参考：https://htmlcolorcodes.com/。色設定に関する詳細な指示については、ストア設定 | SHOPビルダーを参照してください。
2. ストアフロントの見た目を整える
i. バナー
[SHOPビルダー]>[レイアウト]>[ヘッダー]に移動し、+ パーツをクリックします。
ギャラリーをクリックし、画像を1枚だけ追加し、ヘッダーの上部にドラッグします。
ii. バナーでマーケティングプロモーションをより目立たせる
Ultra Chicでは、トップページのバナーが全幅で表示されます。ストアのロゴとメニューはバナー画像の上に表示されます。上部のエリアの色が視覚的な明瞭さに影響を与えるため、ロゴとメニューが目立つように、上部にはシンプルな色の画像を使用することをお勧めします。より複雑な色や構成の画像では、全体の外観が異なります。ブランドスタイルやデザインニーズに基づいて自由に画像を選択できます。
- シンプルな色のバナーの上部
- 複数の色のバナーの上部
顧客がページをスクロールすると、メニューは白い背景に表示され、テキストの明瞭さが向上し、読みやすくなります。
*Notes:
- フル幅のバナーを表示できるのは トップページとして設定されたページのみです。詳細はこの記事を参照してください。
- 画像をフル幅で表示するために、上下のパディングを削除し、フル幅の画像を有効にすることを忘れないでください。
iii. 推奨バナーサイズ
- PC版
- 長方形 – 2:1比率：推奨サイズ：2000 × 1000 px
- 長方形 – 3:4比率：推奨サイズ：1500 × 2000 px
- 正方形 – 1:1比率：推奨サイズ：2000 × 2000 px
- モバイル版
- 長方形 – 2:1比率：推奨サイズ：1080 × 540 px
- 長方形 – 3:4比率：推奨サイズ：810 × 1080 px
- 正方形 – 1:1比率：推奨サイズ：1080 × 1080 px
Ultra Chic テンプレートでは、ロゴとメニューがデフォルトで高度なページセクションの最初の画像パーツに表示されます。最初の画像パーツと重ならないようにしたい場合は、ページの上部に空のテキストパーツを追加してスペーサーとして使用できます。これにより、クリーンで整理されたレイアウトが作成されます。
iv. 商品詳細ページで商品説明を中央揃えにする
Ultra Chic テーマテンプレートでは、商品カテゴリにサイド列がないため、顧客の注意を大きく明確な商品画像の表示で引きつけます。
商品画像の幅が大きいため、商品説明を中央揃えにすることをお勧めします 。これにより、より美的に見えます。
v. Instagramの画像はより大きい！
SHOPLINEは、デスクトップ版とモバイル版の両方でInstagramの要素をリサイズして、より大きく明確な画像を表示します。
vi. 白いロゴに影やフレームを追加してください
白いロゴと黒いヘッダー背景は素晴らしい組み合わせを作ります。
しかし、ウェブサイトを共有したりメールを送信したりする際には、白いロゴは以下の例のように明確に表示されません。
したがって、最適な表示のために白いロゴに影やフレームを追加することをお勧めします。
この記事はAIを使用して翻訳されており、不正確な部分が含まれている可能性があります。最も正確な情報については、元の英語版を参照してください。
コメント