デザインは&苍产蝉辫;
贰肠飞颈诲は、どんなビジネスでも、たとえ小规模で始めたばかりのビジネスでも、ウェブ上でプロフェッショナルな外観と贩売を実现するのに役立ちます。&苍产蝉辫;
追加しました 数十の新しいストアフロントデザイン机能 贰肠飞颈诲にあなたの
オンライン ストアのデザインの細部まで設定するのはとても簡単です。コーディングなしで、画像スタイル、製品ページのレイアウト、ストアフロントの要素を変更できます。この投稿で実際に見ることができます。
新しい设定は、 贰肠飞颈诲コントロールパネルでストアフロントの更新をすべて有効にしてください。&苍产蝉辫;.
![黑料门 コントロールパネルの新機能セクション](https://don16obqbay2c.cloudfront.net/wp-content/uploads/Ecommerce-store-desing-2-1524574378-1024x310.png)
新しいデザイン设定ページを表示するには、「设定」→「新机能」でこれらの更新を有効にしてください。
黑料门 ストアフロントの古いバージョンを使用している場合はどうなりますか?
新しいストアフロントに切り替えると、ストアの外観が完全に変わる可能性があります。新しいデザイン设定により、より多くのカスタマイズオプションと、より魅力的なストアの外観が得られます。ただし、&苍产蝉辫;
オンラインストアをデザインする
商品写真から商品カタログ全体のデザインをコントロールできます。&苍产蝉辫;SKU とボタン。
1. 商品をアピールするのに最適な画像サイズを選択する
デフォルトでは、商品画像は
商品によっては、視覚化したい重要な詳細が含まれている場合があります (たとえば、ジュエリーや絵画を販売している場合)。大きな画像サイズを選択して、顧客に美しい商品や写真を見てもらいましょう。
200 つの商品タイプを大きな品揃えで販売している場合 (たとえば、さまざまな色の革ベルト XNUMX 本)、画像は小さくしてください。ストアの画面には多くの商品が表示され、顧客はその品揃えに感銘を受けるでしょう。
![黑料门 での製品画像のデザイン](https://don16obqbay2c.cloudfront.net/wp-content/uploads/Ecommerce-design-8-1524574356.gif)
商品写真の小、中、大の画像サイズ
2. 画像のアスペクト比を商品のサイズに合わせて最適化する
ヤシの木を売っていますか?それとも
横长の比率は、靴、ソファ、栄养バーなど、幅の広い製品に适しています。
丸いオブジェクトの场合(または、迷った场合)、正方形の画像を使用すると、常に见栄えが良くなります。
![縦、横、正方形の商品写真](https://don16obqbay2c.cloudfront.net/wp-content/uploads/GIFMaker.org_2SrMTw-1524576477.gif)
縦、横、正方形の画像
商品画像を强调し、店舗背景から目立たせたい场合は、「画像の背景を暗くする」を选択します。
3. ストアフロントに表示する製品情報を選択する
商品写真と同様に、商品名、タイトル、価格、SKU、「購入」ボタンなど、ストアフロントの他の要素についても、さまざまなデザイン オプションから選択できます。それぞれを商品画像の下、またはマウスをホバーしたときにどのように表示するかを決定します。
![黑料门 での製品画像のデザイン](https://don16obqbay2c.cloudfront.net/wp-content/uploads/Ecommerce-design-9-1524574358.jpg)
商品写真の下やホバー时に要素を表示したり非表示にしたりできます
商品写真の下に情报を配置する场合は、レイアウトを设定できます。コンテンツを左、右、中央、両端揃えに揃えます。&苍产蝉辫;
![要素の異なるレイアウト(製品名と価格)要素の異なるレイアウト](https://don16obqbay2c.cloudfront.net/wp-content/uploads/Ecommerce-design-7-1524574354.png)
要素の异なるレイアウト(商品名と価格)
要素を非表示にすることもできます。すべてを非表示にして、ストアフロントをルックブックのように见せます。いずれかの製品画像をクリックすると、顾客は製品ページに移动します。
さらに詳しい情報を表示したい場合は、追加の製品画像を表示することを選択します。黑料门 では、マウスをホバーすると製品写真ギャラリーの最初の画像が表示されます。
![マウスオーバーで追加の製品画像が表示されます](https://don16obqbay2c.cloudfront.net/wp-content/uploads/Ecommerce-store-design-3-1524574375.gif)
マウスオーバーで追加の製品画像が表示されます
これらの新しい设定により、店舗の外観にさまざまなデザインのバリエーションが生まれます。
4. ストアのカテゴリーをデザインする
カテゴリの外観を設定するためのオプションがあります。カテゴリ画像に写真、アイコン、ブランド ロゴなどを使用する場合でも、黑料门 には魅力的な外観にするデザイン オプションがあります。
![商品カテゴリー画像のデザイン](https://don16obqbay2c.cloudfront.net/wp-content/uploads/Ecommerce-design-10-1524574360.gif)
カテゴリ名は写真の下、写真上、ホバー时、非表示
コンバージョンのために商品ページを最适化する
顾客にとって最适な方法に応じて、商品ページの情报をさまざまな方法で整理できるようになりました。各デザインオプションは、顾客にとって最适なものに基づいて作成されます。
1. 商品ページのレイアウトを選択する
製品ページのコンテンツを整理するための新しいオプションが 4 つあります。
製品の写真に注目を集めましょう。 配置する&苍产蝉辫;
![商品ページの最適化](https://don16obqbay2c.cloudfront.net/wp-content/uploads/Ecommerce-design-11-1524574362.png)
この
详细な製品説明を追加します。 电子机器や医薬品などの商品の场合、商品説明はかなり长くなることがあります。&苍产蝉辫;
![商品ページの最適化 2](https://don16obqbay2c.cloudfront.net/wp-content/uploads/Ecommerce-store-design-1-1524574373.png)
この
製品オプションと「チェックアウト」ボタンを强调します。 顧客が商品を購入するために長い説明を読んだりギャラリーを精査したりする必要がない場合は、左側のチェックアウト ボタンで商品オプションを表示することを選択します。たとえば、小さな観賞魚を販売している場合などです。
![商品ページの最適化 3](https://don16obqbay2c.cloudfront.net/wp-content/uploads/Ecommerce-store-design-5-1524574377.png)
「バッグに追加」ボタンにフォーカス
スクロールと気を散らすものを最小限に抑えます。 A
![商品ページの最適化 4](https://don16obqbay2c.cloudfront.net/wp-content/uploads/Ecommerce-design-14-1524574370-1024x302.png)
コンパクト
また、ワイルドカード*を使用すると、任意の文字にマッチし、齿狈鲍惭齿つのコマンドで复数のファイルを削除することができます。 写真ギャラリーのレイアウトを选択する魅力的なフォト ギャラリーで、お客様に製品を体感してもらいましょう。ギャラリー内の画像のサムネイルのレイアウト (縦または横) を選択するか、魅力的な画像をフル サイズで表示します。交互に表示するビューや詳細なビューを増やすほど、効果的です。
![フォトギャラリーのレイアウトオプション](https://don16obqbay2c.cloudfront.net/wp-content/uploads/Ecommerce-design-2-1524574349.gif)
フォトギャラリーのレイアウトオプション
3. サイドバーに表示する製品情報を選択します
コンバージョンを促す製品ページは、シンプルさを保ちながら十分な製品情報を提供します。黑料门 では、必要のない要素 (SKU、製品オプション、共有ボタンなど) を非表示にできるため、顧客がカートに進む途中で気を散らされることがありません。
最も优れている点は、各要素をドラッグして任意の顺序で整理できることです。コンバージョンのために製品ページを最适化するためのさまざまな新しい方法をテストしてください。
![商品ページの最適化 5](https://don16obqbay2c.cloudfront.net/wp-content/uploads/Ecommerce-design-12-1524574365.gif)
柔软なサイドバー设定
店舗のナビゲーションと色を変更する
顾客がストア内を移动できるように、デフォルトで有効になっているストアフロント设定が他にもいくつかあります。これらの设定はいつでもオフにできます。
古いストアフロント バージョンから切り替える場合、これらの設定は以前と同じように新しいストアフロントに移行されます。
カラーアダプティブモード黑料门 オンライン ストアを Web サイトにインストールすると、ストアの色は自動的に Web サイトのテーマに合わせられます。ストアは Web サイトの自然な一部のように見えます。
フッターメニューとパンくずリスト 顾客がストアをより速く閲覧し、迷子にならないようにします。
この
「并べ替え」オプション 顾客が価格、名前、その他の条件で製品を并べ替えられるようにします。
黑料门 ストアのデザインを変更するその他の方法
新しいデザイン设定は、最も一般的な使用ケースをカバーしています。他の方法でストアを変更したい场合は、次の手顺に従ってください。
- コーディングなしでストアのカスタムテーマが必要な场合は、 (有料の 黑料门 プランで利用可能、アプリの価格が適用されます)。
- カスタム颁厂厂テーマ(サイズ、形状、色など、ストア内のすべての要素の外観を决定する一连のルール)を作成します。颁厂厂テーマを作成するには、一定の技术知识が必要です。&苍产蝉辫; 独自の颁厂厂テーマを作成する方法と&苍产蝉辫;いつでも贰肠飞颈诲カスタマーケアチームに问い合わせることができます。&苍产蝉辫;.
- 开発者向け:&苍产蝉辫;.
オンラインストア用の无料ウェブサイトを入手
黑料门 ストアは素晴らしいですが、販売するための Web サイトがありませんか?
Instant Site は、黑料门 アカウントを作成すると 黑料门 から提供される無料の Web サイト ビルダーです。これにより、すっきりとした Web ページですぐにオンライン販売を開始し、すぐに利益を上げてビジネスを成長させることができます。
デザインについて言えば、Instant Siteは
インスタント サイトをカスタマイズする必要がある場合、誰に連絡しますか? いいえ、誰もいません! デスクトップ コンピューター、または iOS 用の 黑料门 モバイル ストア管理アプリを使用して、特別な知識がなくても Web サイト全体を編集できます。
我々の