BigCommerce にテンプレート ファイルを追加する方法
公開: 2021-01-07
BigCommerce は、ウェブサイトのデザインが世界に大きな変化をもたらす可能性があることを知っています。 平均的なユーザーの生活は多忙です。
e コマースでは、ショッピング カートが放棄されることは前例のないことではありません。 しかし、Web サイトが顧客の注意をより適切に維持できれば、顧客はタブを切り替えたり、用事を済ませるために出かける前に購入を完了する可能性があります。
つまり、すべてはストアで使用するデザインとテンプレートにかかっています。
BigCommerce を使用して e コマース ストアのデザインを制御する方法をご覧ください。
BigCommerce にテンプレート ファイルを追加する方法
クイックリンク
次の方法でテンプレートを BigCommerce に追加できます。
ビッグコマースストア
BigCommerce は、すぐにインストールできるさまざまなテーマを備えたストアをホストしています。 価格は無料から最大 300 ドルまであります。 テーマは、コレクション、業界、無料、プレミアム コンテンツごとに並べ替えることができます。
気に入ったものが見つかったら、「インストール」または「購入」ボタンをクリックします。 各テーマのプレビューには、機能のリストとその最適化の対象が含まれています。 「インストール」ボタンをクリックする前に、各テーマのプレビューを取得することもできます。
ステンシルによるカスタマイズ
ステンシルは、BigCommerce テーマが構築されるフレームワークです。 ただし、あなたのビジネスに必ずしもこれらのテーマの 1 つを使用する必要はありません。 次のようなストアのさまざまな部分にカスタム レイアウト テンプレートを割り当てることもできます。
- 製品
- ブランド
- カテゴリー
- ページ
カスタマイズが必要な場合は、BigCommerce の Stencil CLI ツールを使用してカスタム テンプレートを作成し、バンドルすることから始める必要があります。 準備ができたら、Stencil CLI 経由でファイルをアップロードできるようにするためのオプションがいくつかあります。
1. バンドルのみ
「ステンシル バンドル」コマンドを使用して、BigCommerce ストアにアップロードできる zip ファイルを作成します。 ファイルの進行状況と完了を確認したい場合は、「bundle」コマンドを使用します。 このコマンドは、ファイルのバンドルを妨げる可能性のあるエラーについても通知します。
BigCommerce ではファイル サイズに 50 MB という厳しい制限があることにも注意してください。
2. バンドルとプッシュ
Stencil CLI トークンを使用して初期化した場合のみ、「stencil Push」コマンドを使用してください。 このコマンドを使用すると、1 つのプロセスでバンドルとアップロードが行われます。 ただし、ファイルが「バンドルとプッシュ」の対象となるかどうか不明な場合は、まず次の要件を確認してください。
- 「テーマ: スコープの変更」で Stencil CLI トークンを使用して初期化されたテーマ
- Stencil CLI 1.12.0 以降のバージョンがインストールされている
コマンドラインで「stencil -V」または「stencil -version」プロンプトを使用して、Stencil のバージョンを確認できます。
誰もが 1 つのプロセスでテーマをアップロードできるわけではありません。 別のプロセスでバンドルしてアップロードする場合、テーマを BigCommerce にプッシュする方法は次のとおりです。
- アップロードが成功したら、「Y/N」を選択してストアフロントにテーマをアップロードします
- 「はい」の場合は、矢印キーを使用してバリエーションを選択します
「Y」を選択したら、すぐにバリエーションを選択する必要があります。 後で新しいアップロードをストアに適用したい場合は、代わりに「N」を選択してください。
BigCommerce テンプレートをカスタマイズするにはどうすればよいですか
従来のブループリント テーマをカスタマイズするには、次の手順を確認してください。
- ストアフロントに移動
- 「マイテーマ」をクリックします
- 「HTML/CSSの編集」を選択します。
- Default.htmlエディタ画面で色の変更を行う
- 変更内容を保存
この方法を使用する場合、ブループリント テンプレート ファイルがストアフロントに公開されている場合にのみアクセスできることに注意することが重要です。
Stencil テーマを使用している場合は、次の手順に従ってカスタマイズしてください。
- ストアフロントに移動
- 「マイテーマ」をクリックします
- 「カスタマイズ」を選択します
- 変更を加える
- ストアフロントに変更を反映するには、「公開」を選択します
Page Builder を使用してステンシル テーマをカスタマイズする場合、テキスト サイズや色などのさまざまな側面を変更できます。 ユーザーフレンドリーなドラッグ アンド ドロップ方法を使用して、バナー、カルーセル、画像などのさまざまな視覚要素を追加することもできます。 あるいは、カスタム HTML のブロックを使用して、必要な変更を加えることができます。
ストアフロントに表示する変更を公開せずに保存できることを覚えておいてください。
BigCommerce テンプレートの入手先
新しい BigCommerce テンプレートを見つける最も簡単な場所の 1 つは、ストアです。 ほとんどのニーズに合わせてさまざまなテーマ スタイルが用意されており、最も人気のあるスタイルの多くは 1 円もかかりません。
一部のサードパーティ Web サイトでは、BigCommerce と互換性のあるテンプレートも販売しています。 ただし、これらのテンプレートの価格には幅があるため、この方法を使用する場合は、ある程度の出費を覚悟してください。
もちろん、いつでもストア用にカスタムデザインされたテンプレートを使用できます。 これは断然最も高価なオプションなので、これを検討する前に、まず他のすべての方法をチェックしてみるとよいでしょう。
BigCommerce の HTML テンプレートを編集する方法
ブループリント テーマを使用している場合、HTML テンプレートを編集するには、いくつかの方法があります。 ブラウザでライブテーマを編集するには:
- ストアフロントに移動
- 「マイテーマ」をクリックします
- 「HTML/CSSの編集」を選択します。
ブラウザでの編集は、迅速かつ簡単に変更を加えるのに最適な方法です。 エディターに保存したものはすべて、すぐに有効になります。
ステンシルを使用して BigCommerce に単一のカスタム テンプレート レイアウト ファイルを追加する方法
Stencil フレームワーク内でカスタム テンプレートが必要な場合は、BigCommerce を使用してそれも行うことができます。 まず、ローカル コピーをセットアップする必要があります。
- 「templates/pages」ディレクトリにカスタムサブディレクトリを作成します。
- HTML テンプレート ファイルを作成し、カスタム サブディレクトリに配置します。
- URL を編集して「.stencil」ファイルにマッピングする
ローカルでテーマの作成が完了したら、ファイルをバンドルして BigCommerce にプッシュできます。
追加のよくある質問
BigCommerce 用の新しいテンプレートを作成するにはどうすればよいですか?
Stencil CLI をインストールしてテンプレートをローカルにカスタマイズし、ストアにアップロードするためにバンドルすることができます。
BigCommerce ホームページを更新するにはどうすればよいですか?
ホームページにはウィジェットとバナーの組み合わせが含まれています。 それらを有効にするか無効にするかを選択できます。 または、「マーケティング」、「バナー」の順に移動して、ホームページのバナーを作成することもできます。
さらに、新しい Web ページを作成し、ストアのホームページとして表示することを確認するボックスにチェックを入れるだけです。
BigCommerce のステンシルとは何ですか?
ステンシルは、ユーザーが e コマース テンプレートを使用するか、サイトを完全にカスタマイズするかを選択できるようにするために BigCommerce が使用するテーマ フレームワークです。
BigCommerce テーマを編集するにはどうすればよいですか?
使用しているテーマの種類によって異なります。 従来のブループリント テーマを使用している場合は、次の手順で編集します。
• ストアフロントから、「My Themes」をクリックします。
• [HTML/CSS の編集] ボタンをクリックします。
• Default.html エディタ画面で色の変更を行う
• 変更が完了したら、「保存」ボタンをクリックします。
Stencil テーマを使用している場合は、代わりに次の手順に従ってください。
• ストアフロントに移動
• 「マイテーマ」を選択し、「カスタマイズ」を選択します。
• 変更を加える
• [公開] をクリックしてストアフロントに変更を反映します。
BigCommerce テンプレートをカスタマイズするにはどうすればよいですか?
カスタマイズ オプションは、使用しているテンプレートの種類によって異なります。 通常、ストアフロントに移動してから、マイテーマに移動できます。 そこから、「HTML/CSS の編集」または「カスタマイズ」を選択して変更を加えることができます。
ジェネリックストアで満足しないでください
確かに、テンプレートを使用してストアを立ち上げて実行することはできます。 ただし、他の店舗と同じように見えるリスクもあります。 さらに悪いことに、競合他社のオンライン ストアのように見える可能性もあります。
ただし、いくつかの簡単な調整を行うことで、ストアフロントをカスタマイズして、ビジネスと同じくらいユニークなものにすることができます。 色、フォント、画像をいろいろ試して、誇りを持って自分のものと言えるストアを見つけてください。
BigCommerce テンプレートをカスタマイズしましたか? 以下のコメントセクションでそれについて教えてください。