デザインは
Ecwidは、どんなビジネスでも、たとえ小規模で始めたばかりのビジネスでも、ウェブ上でプロフェッショナルな外観と販売を実現するのに役立ちます。
追加しました 数十の新しいストアフロントデザイン機能 Ecwidにあなたの
オンライン ストアのデザインの細部まで設定するのはとても簡単です。コーディングなしで、画像スタイル、製品ページのレイアウト、ストアフロントの要素を変更できます。この投稿で実際に見ることができます。
新しい設定は、 設定 → デザイン Ecwidコントロールパネルでストアフロントの更新をすべて有効にしてください。 設定 → 新機能.
新しいデザイン設定ページを表示するには、「設定」→「新機能」でこれらの更新を有効にしてください。
Ecwid ストアフロントの古いバージョンを使用している場合はどうなりますか?
新しいストアフロントに切り替えると、ストアの外観が完全に変わる可能性があります。新しいデザイン設定により、より多くのカスタマイズオプションと、より魅力的なストアの外観が得られます。ただし、
オンラインストアをデザインする
商品写真から商品カタログ全体のデザインをコントロールできます。 SKU とボタン。
1. 商品をアピールするのに最適な画像サイズを選択する
デフォルトでは、商品画像は
商品によっては、視覚化したい重要な詳細が含まれている場合があります (たとえば、ジュエリーや絵画を販売している場合)。大きな画像サイズを選択して、顧客に美しい商品や写真を見てもらいましょう。
200 つの商品タイプを大きな品揃えで販売している場合 (たとえば、さまざまな色の革ベルト XNUMX 本)、画像は小さくしてください。ストアの画面には多くの商品が表示され、顧客はその品揃えに感銘を受けるでしょう。
商品写真の小、中、大の画像サイズ
2. 画像のアスペクト比を商品のサイズに合わせて最適化する
ヤシの木を売っていますか？それとも
横長の比率は、靴、ソファ、栄養バーなど、幅の広い製品に適しています。
丸いオブジェクトの場合（または、迷った場合）、正方形の画像を使用すると、常に見栄えが良くなります。
縦、横、正方形の画像
商品画像を強調し、店舗背景から目立たせたい場合は、「画像の背景を暗くする」を選択します。
3. ストアフロントに表示する製品情報を選択する
商品写真と同様に、商品名、タイトル、価格、SKU、「購入」ボタンなど、ストアフロントの他の要素についても、さまざまなデザイン オプションから選択できます。それぞれを商品画像の下、またはマウスをホバーしたときにどのように表示するかを決定します。
商品写真の下やホバー時に要素を表示したり非表示にしたりできます
商品写真の下に情報を配置する場合は、レイアウトを設定できます。コンテンツを左、右、中央、両端揃えに揃えます。
要素の異なるレイアウト（商品名と価格）
要素を非表示にすることもできます。すべてを非表示にして、ストアフロントをルックブックのように見せます。いずれかの製品画像をクリックすると、顧客は製品ページに移動します。
さらに詳しい情報を表示したい場合は、追加の製品画像を表示することを選択します。Ecwid では、マウスをホバーすると製品写真ギャラリーの最初の画像が表示されます。
マウスオーバーで追加の製品画像が表示されます
これらの新しい設定により、店舗の外観にさまざまなデザインのバリエーションが生まれます。
4. ストアのカテゴリーをデザインする
カテゴリの外観を設定するためのオプションがあります。カテゴリ画像に写真、アイコン、ブランド ロゴなどを使用する場合でも、Ecwid には魅力的な外観にするデザイン オプションがあります。
カテゴリ名は写真の下、写真上、ホバー時、非表示
コンバージョンのために商品ページを最適化する
顧客にとって最適な方法に応じて、商品ページの情報をさまざまな方法で整理できるようになりました。各デザインオプションは、顧客にとって最適なものに基づいて作成されます。
1. 商品ページのレイアウトを選択する
製品ページのコンテンツを整理するための新しいオプションが 4 つあります。
製品の写真に注目を集めましょう。 配置する
この
詳細な製品説明を追加します。 電子機器や医薬品などの商品の場合、商品説明はかなり長くなることがあります。
この
製品オプションと「チェックアウト」ボタンを強調します。 顧客が商品を購入するために長い説明を読んだりギャラリーを精査したりする必要がない場合は、左側のチェックアウト ボタンで商品オプションを表示することを選択します。たとえば、小さな観賞魚を販売している場合などです。
「バッグに追加」ボタンにフォーカス
スクロールと気を散らすものを最小限に抑えます。 A
コンパクト
また、ワイルドカード*を使用すると、任意の文字にマッチし、XNUMXつのコマンドで複数のファイルを削除することができます。 写真ギャラリーのレイアウトを選択する魅力的なフォト ギャラリーで、お客様に製品を体感してもらいましょう。ギャラリー内の画像のサムネイルのレイアウト (縦または横) を選択するか、魅力的な画像をフル サイズで表示します。交互に表示するビューや詳細なビューを増やすほど、効果的です。
フォトギャラリーのレイアウトオプション
3. サイドバーに表示する製品情報を選択します
コンバージョンを促す製品ページは、シンプルさを保ちながら十分な製品情報を提供します。Ecwid では、必要のない要素 (SKU、製品オプション、共有ボタンなど) を非表示にできるため、顧客がカートに進む途中で気を散らされることがありません。
最も優れている点は、各要素をドラッグして任意の順序で整理できることです。コンバージョンのために製品ページを最適化するためのさまざまな新しい方法をテストしてください。
柔軟なサイドバー設定
店舗のナビゲーションと色を変更する
顧客がストア内を移動できるように、デフォルトで有効になっているストアフロント設定が他にもいくつかあります。これらの設定はいつでもオフにできます。
古いストアフロント バージョンから切り替える場合、これらの設定は以前と同じように新しいストアフロントに移行されます。
カラーアダプティブモードEcwid オンライン ストアを Web サイトにインストールすると、ストアの色は自動的に Web サイトのテーマに合わせられます。ストアは Web サイトの自然な一部のように見えます。
フッターメニューとパンくずリスト 顧客がストアをより速く閲覧し、迷子にならないようにします。
この
「並べ替え」オプション 顧客が価格、名前、その他の条件で製品を並べ替えられるようにします。
Ecwid ストアのデザインを変更するその他の方法
新しいデザイン設定は、最も一般的な使用ケースをカバーしています。他の方法でストアを変更したい場合は、次の手順に従ってください。
- コーディングなしでストアのカスタムテーマが必要な場合は、 Ecwidアプリマーケットからアプリをデザインする (有料の Ecwid プランで利用可能、アプリの価格が適用されます)。
- カスタムCSSテーマ（サイズ、形状、色など、ストア内のすべての要素の外観を決定する一連のルール）を作成します。CSSテーマを作成するには、一定の技術知識が必要です。 Ecwid ナレッジベースの CSS テーマガイド 独自のCSSテーマを作成する方法と 特定の要素を変更するための手順いつでもEcwidカスタマーケアチームに問い合わせることができます。 独自のCSSテーマのカスタム開発を注文する.
- 開発者向け: Ecwid JavaScript API Ecwidストアフロントの機能を拡張できます。新しいCSSテーマやアプリを作成し、Ecwidアプリマーケットで販売できます。Ecwid Javascript APIを使用すると、ストアフロントの外観を完全に変更して、必要なだけ深い変更を加えることができます。準備ができたら、 開発者向けページに登録.
オンラインストア用の無料ウェブサイトを入手
Ecwid ストアは素晴らしいですが、販売するための Web サイトがありませんか?
Instant Site は、Ecwid アカウントを作成すると Ecwid から提供される無料の Web サイト ビルダーです。これにより、すっきりとした Web ページですぐにオンライン販売を開始し、すぐに利益を上げてビジネスを成長させることができます。
デザインについて言えば、Instant Siteは
インスタント サイトをカスタマイズする必要がある場合、誰に連絡しますか? いいえ、誰もいません! デスクトップ コンピューター、または iOS 用の Ecwid モバイル ストア管理アプリを使用して、特別な知識がなくても Web サイト全体を編集できます。
今すぐ無料のインスタントサイトを構築しましょう 我々の
