テーマテンプレートSangriaはアパレルショップ向けにデザインされています。衣服の写真を素晴らしいレイアウトで表示するのに適しています。レスポンシブレイアウトは、どの画面サイズにもフィットする画像を特徴としています。

*Note: あなたのストアが公式プランを使用している場合、または「ソーシャルコマース」プランのみを使用している場合、ストアのレイアウトを変更することはできません。

• カスタマイズされたテーマの色とフォント
• レスポンシブレイアウト
• カテゴリーバナー
• 商品詳細ページの2列
• ブログページ

1. カスタマイズされたテーマの色とフォント

SHOPLINE管理画面で、[オンラインストアデザイン] > [デザイン]に移動し、Sangriaテーマテンプレートをクリックして適用します。

A. テーマカラー

ブランドアイデンティティに合わせて、テーマカラーは色の16進数コードを入力することで編集可能です。色はボタンや重要な情報に表示されるため、可読性のために明るい色の使用は避けてください。

カラーコードはhttps://htmlcolorcodes.com/で参照できます。

B. テーマフォント

このテーマは、ストアをスタイライズするために2つのフォントを提供します。適用されると、ウェブサイト全体が選択したフォントに置き換わります。

• Lato - 現代的でシンプルなスタイルに適しています、
• Nanum Myeongjo - セリフフォントで、クラシックで文学的なスタイルの感覚を表現します

2. レスポンシブレイアウト

Sangriaはレスポンシブデザインで、商品画像は画面サイズに応じてスケールします。商品画像のデフォルト比率は3:4で、衣服の写真を表示するのに適しています。「商品ボックスに商品画像をフィットさせるためにトリミングする」を適用することで、すべての写真を同じサイズに統一できます。

ロケーション：ショップデザイン > デザイン > 高度な設定

推奨写真サイズ：825px (W) x 1100px (H)

アップロード前に画像を圧縮することをお勧めします。大きな画像はウェブサイトの読み込み速度に影響を与えます。

圧縮ツール：https://tinypng.com/

3. カテゴリーバナー

各カテゴリにカバーバナーを追加することでコレクションを表示できます。より良いブラウジング体験のために、高さの大きいバナーは使用しないことをお勧めします。

管理画面の[商品 & カテゴリ] > [カテゴリ]に移動します。バナーを使用したいカテゴリの横にある編集をクリックし、「カテゴリーバナー」セクションまでスクロールします。

推奨サイズ：1800px (W) x 400px (H)

4. 商品詳細ページの2列

A. 商品画像の2列

商品画像は2列で表示され、多くの商品画像を持つストアに適しています。より良いブラウジング体験のためにデザインされています。

B. インスタントリンク

画像が多いときに、商品情報が簡単に無視されることを心配していますか？「カートに追加」ボタンの下にアンカーリンクを設置することでこの問題を解決しました。これにより、顧客は関連セクションに直接移動できます！

C. スティッキーボタン

さらに、ページが下にスクロールされると、「カートに追加」ボタンが上部に固定され、顧客は常にそれを見つけてチェックアウトに進むことができます。

5. ブログページ

Sangriaはブログページの新しいレイアウトを提供し、2つのセクションに分かれています：

• セクションA - 最新に公開された記事を1つの大きな画像で表示し、注目を集めます。
• セクションB - 目を引くタイトルの4つの記事を含めます

画像は1:1の比率で表示され、トリミングする必要はありません。Sangriaは記事の最初の画像を表示し、記事内で全画像を見ることができます。

Sangriaをあなたのストアに適用してみましょう！