Boundless
Boundlessは、全画面の写真を特色とする、ミニマルなUIを備えた写真優先のテーマです。Boundlessはモバイルファーストで、中規模から大規模の在庫があるストアに適しています。
テーマエディタ
テーマエディタを使用して、テーマをカスタマイズします。テーマエディタツールバーは、セクションとテーマ設定に分かれています。
セクションを使用して、ストアの各種ページのコンテンツとレイアウトを変更できます。テーマ設定を使用して、ストアのフォントと色をカスタマイズし、ソーシャルメディアのリンクやチェックアウトの設定を変更することができます。
セクションは、オンラインストアの各ページのレイアウトを決定するカスタマイズ可能なコンテンツブロックです。
ホームセクションでは、スライドショーやニュースレターの登録といった機能が含まれており、追加、再配置、削除することができます。ホームページには最大25個のセクションを追加できます。
各ページタイプには、独自のセクションが含まれています。たとえば、商品ページセクションで、オンラインストアの各商品ページのレイアウトを決定します。
ページセクションは常に、オンラインストアの特定の場所にあります。カスタマイズ可能ですが、再配置および削除することはできません。
各テーマには、ヘッダーやフッターなどの固定セクションが含まれており、オンラインストアの各ページに表示されます。
Boundless独自のセクションの選択、およびビジネスに適したカスタマイズ方法を詳しく知ることができます。
Boundlessには、以下の静的セクションが含まれます。
- ヘッダー
- Sidebar menu
- 告知バー
- スライドショー
- アクションバー
- フッター
- 商品
- コレクション
- コレクションリストのページ
- 記事
動的セクション
動的セクションを追加、並べ替え、あるいは削除して、ホームページのレイアウトをカスタマイズすることができます。各テーマには、選択可能な固有の動的セクションがあります。
Boundlessには、以下の動的セクションが含まれます。
- ブログ記事
- コレクションリスト
- 特集コレクション
- テキスト付き画像
- おすすめ商品
- ニュースレター
- マップ
- リッチテキスト
- ビデオ
- HTMLをカスタムする
ヘッダー
テーマのヘッダーは、ストアの各ページの上部に表示されるセクションです。
ヘッダーセクションには、以下の設定が含まれます。
- ロゴ - ヘッダーにロゴ画像を追加します。
- ホームページロゴ - ホームページにのみ表示されるロゴを追加します。ホームページのロゴがスライドショーに表示されるので、画像の上部で見やすいロゴのバージョンを選択してください。
- カスタムロゴの幅 (ピクセルで) - ロゴのサイズを設定します。
ヘッダーをカスタマイズする
- 管理画面から [オンラインストア] > [テーマ] の順に移動します。
- Shopifyアプリで [ストア] をタップします。
- [販売チャネル] セクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
- Shopifyアプリで [ストア] をタップします。
- [販売チャネル] セクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
Boundlessの隣にある [カスタマイズする] をクリックします。
[ヘッダー] をクリックします。
設定でヘッダーをカスタマイズします。
保存をクリック
Sidebar menu
サイドバーメニューは、ストアの目次として機能します。顧客がどのページを参照していても、メニューボタンにはストアのメインメニューおよびフッターメニューが表示されます。
サイドバーメニューには2つのメニューが表示されます。上部にはプライマリメニューが大型タイプで、プライマリメニューの下には追加メニューが小型タイプで表示されます。
サイドバーメニューをカスタマイズするには
[セクション] をクリックします。
[サイドバーメニュー] をクリックします。
プライマリメニューリストから、プライマリメニューとして表示するメニューを選択します。通常ではストアのメインメニューを選択するのが一般的です。
追加メニューリストから、プライマリメニューの下に表示するメニューを選択します。通常ではストアのフッターメニューを選択するのが一般的です。
保存をクリック
スライドショー
最大5枚の画像を切り替えられるホームページスライドショーを作成できます。
高解像度の画像をスライドに使用することをおすすめします。Shopifyのアップロード制限を超えない限り、3,840 x 2,160ピクセル以上の画像を使用できます。
スライドショーのサイズと形状は、お客様が所有するデバイスのサイズや形状に依存するため、一部の画面ではスライドショー画像がトリミングされます。中心に焦点を合わせた画像を使用して、各画像の重要な部分が常に表示されるようにします。
スライドショー画像のベストプラクティスについては、「画像をアップロードする」を参照してください。
スライドショーセクションには、以下の設定が含まれます。
- スライドの高さ - スライドショーの高さを設定します。最初の画像のスライドの高さに適応するを選択して、スライドショーの高さを最初の画像の高さに合わせることができます。
- スライドの自動切り替え - 自動的に再生するようにスライドショーを設定します。
- スライドを変更する間隔 - スライドを変更する頻度を選択します。
- テキストとアイコン - スライドショーで表示するテキストとアイコンの色を選択します。
- 画像のオーバーレイ - 画像スライドに色のレイヤーを追加します。オーバーレイを使用すると、スライドショーのテキストを読みやすくできます。
- 不透過率 - オーバーレイの不透過率を設定します。
- 画像 - 画像スライドをスライドショーに追加します。
- 画像位置 - スライドショーで最優先してフォーカスする画像の領域を選択します。
- 見出し - 見出しをスライドに追加します。
- ボタンテキスト - スライドにテキストラベル付きのボタンを追加します。
- ボタンのリンク - ボタンをオンラインストアの別の部分にリンクさせます。
ホームページにスライドショーを追加する
- 管理画面から [オンラインストア] > [テーマ] の順に移動します。
- Shopifyアプリで [ストア] をタップします。
- [販売チャネル] セクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
- Shopifyアプリで [ストア] をタップします。
- [販売チャネル] セクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
Boundlessの隣にある [カスタマイズする] をクリックします。
[スライドショー] をクリックします。
設定でスライドショーをカスタマイズします。
保存をクリック
アクションバー
デフォルトでは、アクションバーにはストアのメインメニューが表示されます。顧客が参照するページに応じて、アクションバーが表示するアイテムをカスタマイズすることができます。ホームページでは、アクションバーを商品コレクションの表示に使用するのが一般的です。コレクション内では、サブカテゴリーまたはその他関連コレクションの表示にアクションバーを使用することができます。
たとえばアパレル販売ストアのホームページでは、メンズ、レディース、アクセサリーなどの表示にアクションバーを使用することが可能です。顧客が [レディース] をクリックすると、コレクションページのアクションバーにトップス、パンツ、シューズが表示されます。
上記のようにアクションバーを動作させるには、メインメニューを使用してコレクションへのリンクを作成します。ストア内のその他ページ (お問い合わせまたは詳細情報ページ) には、フッターメニューにリンクを記載します。
アクションバーをカスタマイズするには
[セクション] タブをクリックします。
[アクションバー] をクリックします。
メニューリストからアクションバーに表示するメニューを選択します。
保存をクリック
フッター
Boundlessを使用すると、フッターのコンテンツにメニューを表示できます。
ストアのフッターをカスタマイズするには
[セクション] タブをクリックします。
[フッター] をクリックします。
メニューリストからフッターに表示するメニューを選択します。
保存をクリック
商品
商品セクションでは、以下の要素を追加したり削除したりできます。
- 商品のブランド名または販売元
- 数量セレクター
- 各種ソーシャル共有アイコン
- 動的チェックアウトボタン
- 商品の推奨
最初の商品画像をスキップして画像のスタイルを設定し、商品フォームの幅を選択することもできます。
商品ページの設定を編集するには、以下の手順を実行します。
トップバーのドロップダウンメニューから [商品ページ] を選択します。
[セクション] をクリックします。
[商品] をクリックします。
-
最初の商品画像をスキップするには、[最初の商品画像をスキップする] にチェックを入れます。
これで、最初の商品画像がコレクションページにのみ表示され、商品ページには表示されなくなります。このオプションを使用すると、最初の商品画像をコレクションページに最適な表示になるようにデザインして、他の商品ページの画像は、商品ページで使用できる広いスペースに適した画像にカスタマイズすることができます。
画像スタイルを設定するには、画像スタイルドロップダウンメニューから [縦長/正方形] または [横長] を選択します。
商品のブランド名または販売元を表示するには、[販売元を表示する] にチェックを入れます。ブランド名や販売元を表示するには、商品に販売元を追加する必要があります。
数量セレクターを表示するには、[数量セレクターを表示する] にチェックを入れます。
ソーシャルメディアでの共有アイコンを表示するには、[商品の共有を有効にする] にチェックを入れます。
動的チェックアウトボタンを表示するには、[動的チェックアウトボタンを表示する] をオンにします。
商品のフォームの幅を設定するには、商品のフォームの幅ドロップダウンメニューから [小] または [大] を選択します。
保存をクリック
商品の推奨を追加または削除する
お客様が興味のある可能性がある他の商品を見つけやすくするために、商品ページにおすすめ商品を表示できます。
トップバーのドロップダウンメニューから [商品ページ] を選択します。
[商品の推奨] をクリックします。
商品ページで商品のおすすめを表示または非表示にするには、[動的推奨を表示する] チェックボックスを使用します。
オプション: おすすめ商品の上に表示されるタイトルを変更するには、[見出し] フィールドに新しいタイトルを入力します。
オプション: 商品説明で販売元を表示または非表示にするには、[販売元を表示する] チェックボックスを使用します。
保存をクリック
コレクション
Boundlessには、コレクションページの並べ替えおよび絞り込み、体裁、ページネーションオプションが含まれます。
テーマのプレビューでコレクションページを開きます。
[セクション] タブをクリックします。
[コレクション] をクリックします。
体裁エリアで次のオプションを設定します。
- 画像スタイルリストから商品画像の位置と、縦長・正方形または横長表示のいずれかを選択します。
画像サイズリストから、商品画像サイズを選択します。
画像同士の間隔を広げたい場合は、[画像間隔を追加する] にチェックを入れます。
商品画像の下にベンダーまたはブランド名を表示する場合は、[商品の販売元を表示する] にチェックを入れます。
- 並べ替えと絞り込みエリアで、次のオプションを設定します。
並べ替えオプションのリストを表示する場合は、[並べ替えオプションを表示する] にチェックを入れます。
顧客がタグで絞り込むためのリストを表示するには、[タグによる絞り込みを表示する] にチェックを入れます。
ページネーションエリアのページネーションタイプリストから、番号付きページの表示または [詳細を表示する] ボタンの表示のいずれかを選択します。
保存をクリック
特集コレクション
テーマエディタの特集コレクションセクションでは、画像スタイルオプションを使用して、コレクションと商品ページでの画像表示方法を変更できます。
- 商品画像が正方形または縦向きの場合は、縦長/正方形が最適です。
- 画像が長方形または横向きの場合は、横長が最適です。
画像サイズオプションで、コレクションページでの商品画像の大きさを決定します。小さな商品画像を表示すると、1つの行により多くの画像を収めることができます。
1行に表示される画像数は、顧客のデバイス (デスクトップまたはモバイル) およびウィンドウサイズによって異なります。
[セクション] タブをクリックします。
[特集コレクション] セクションをクリックします。
コレクションリストからコレクションを選択します。選択したコレクションから最大で50商品が表示されます。
画像スタイルリストから縦長・正方形、または横長表示のいずれかを選択します。
画像サイズリストから、画像サイズを選択します。
商品画像の周囲の余白を広げるには、[画像余白を追加する] にチェックを入れます。
商品販売元またはブランド名を表示するには、[商品の販売元を表示する] にチェックを入れます。
保存をクリック
ニュースレター
ホームページにニュースレターの登録を追加することができます。これにより、メールマーケティングキャンペーンのお客様のメールアドレスを収集できます。メールマーケティングについて詳しくは、Shopifyブログをご覧ください。
ホームページにニュースレターの登録を追加するには、次のとおりにします。
- 管理画面から [オンラインストア] > [テーマ] の順に移動します。
- Shopifyアプリで [ストア] をタップします。
- [販売チャネル] セクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
- Shopifyアプリで [ストア] をタップします。
- [販売チャネル] セクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
Boundlessの隣にある [カスタマイズする] をクリックします。
[セクション] をクリックします。
[セクションを追加] > [ニュースレター] をクリックします。
見出しフィールドに、ニュースレターの登録の見出しを入力します。デフォルトの見出しは「ストアからのお知らせを受け取る」です。
見出しフィールドにニュースレターの登録の小見出しを入力します。
保存をクリック
リッチテキスト
リッチテキストセクションを使用すると、ホームページに文字コンテンツを表示する、または管理画面で作成したページを埋め込むことができます。たとえばブログページを埋め込むことによって、開催予定のイベントを特集する、または次のいずれかのページを表示することができます。
- オンラインストアの埋め込みビデオ
- ストアの所在地を示すGoogleマップ
- ストアの連絡先情報
[セクション] タブをクリックします。
[リッチテキスト] をクリックします。
テキストを入力して書式を設定します。
ストアのページを特集する場合は、[コンテンツを追加する] をクリックし、次に [ページ] をクリックします。ホームページ上で特集するページを、ドロップダウンメニューから選択します。
保存をクリック
ビデオ
YouTubeまたはVimeoでホストされているビデオをホームページに追加できます。ビデオはお客様を引き込み、ビジネスへの関心を高めることができます。
ホームページにビデオを追加するには、次のとおりにします。
- 管理画面から [オンラインストア] > [テーマ] の順に移動します。
- Shopifyアプリで [ストア] をタップします。
- [販売チャネル] セクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
- Shopifyアプリで [ストア] をタップします。
- [販売チャネル] セクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
Boundlessの隣にある [カスタマイズする] をクリックします。
[セクション] をクリックします。
[セクションを追加] > [ビデオ] をクリックします。
見出しフィールドに、ビデオの見出しを入力します。
-
ビデオリンクフィールドに、ビデオの共有リンクを入力します。
YouTubeの共有リンクは次のようになります。
https://youtu.be/OTJXAUZY9t0このYouTubeヘルプの記事では、YouTubeビデオの共有リンクをコピーする方法を学ぶことができます。Vimeoの共有リンクは次のようになります。
https://vimeo.com/281332510このVimeoヘルプセンターの記事では、Vimeoビデオの共有リンクをコピーする方法を学ぶことができます。 保存をクリック
HTMLをカスタムする
カスタムHTMLセクションでは、HTMLコードを使用してホームページのカスタムコンテンツを作成できます。たとえば、HTMLを使用してテキストブロックの書式を設定し、表を作成し、外部のウェブサイトからコンテンツを埋め込んだりすることができます。
カスタムHTMLをホームページに追加するには
- 管理画面から [オンラインストア] > [テーマ] の順に移動します。
- Shopifyアプリで [ストア] をタップします。
- [販売チャネル] セクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
- Shopifyアプリで [ストア] をタップします。
- [販売チャネル] セクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
Boundlessの隣にある [カスタマイズする] をクリックします。
[セクション] をクリックします。
[セクションを追加] をクリックします。
高度なレイアウトエリアで、[カスタムHTML] > [追加] をクリックします。
[カスタムHTML] をクリックし、ホームページに追加するHTMLコードを入力します。
保存をクリック
テーマ設定。テーマ設定を使用して、オンラインストアの色と文字体裁をカスタマイズすることができます。ソーシャルメディアアカウントへのリンクを設定したり、カートの設定を編集したり、ファビコンを追加することもできます。
Boundlessには、以下のテーマ設定が含まれます。
- 色
- 文字体裁
- カート
- ソーシャルメディア
- ファビコン
- チェックアウト
色
オンラインストアのさまざまな部分のカラーを選択できます。
色の設定をカスタマイズする
- 管理画面から [オンラインストア] > [テーマ] の順に移動します。
- Shopifyアプリで [ストア] をタップします。
- [販売チャネル] セクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
- Shopifyアプリで [ストア] をタップします。
- [販売チャネル] セクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
Boundlessの隣にある [カスタマイズする] をクリックします。
[テーマ設定] をクリックします。
[カラー] をクリックします。
-
コンテンツのタイプごとに、カラー見本をクリックしてカラーピッカーを使用します。直近の選択エリアには、あなたが最近テーマで選択したカラーが表示されます。現在使用中エリアには、あなたがテーマの別の部分で現在使用しているカラーが表示されます。
カラーを透明に設定するには、[不要] をクリックします。
保存をクリック
文字体裁
オンラインストアのテキストのフォントスタイルとサイズを設定できます。
文字体裁の設定をカスタマイズする
- 管理画面から [オンラインストア] > [テーマ] の順に移動します。
- Shopifyアプリで [ストア] をタップします。
- [販売チャネル] セクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
- Shopifyアプリで [ストア] をタップします。
- [販売チャネル] セクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
Boundlessの隣にある [カスタマイズする] をクリックします。
[テーマ設定] をクリックします。
[文字体裁] をクリックします。
テキストのタイプごとに、[変更] をクリックしてフォントピッカーを使用します。
-
検索フィールドを使用するか、[さらに読み込む] をクリックしてフォントを検索します。
利用可能なフォントをすべて表示するには、「Shopifyのフォントライブラリー」を確認してください。
使用するフォントの名前をクリックします。
フォントを太字や斜体などの別のスタイルに変更するには、[標準] をクリックします。次に、使用するスタイルをクリックし、[選択] をクリックします。
保存をクリック
カート
Boundlessではカートタイプを選択し、顧客の注文メモを有効にするなど、カートページをカスタマイズすることができます。
Boundlessのテーマは次の2種類のカートタイプに対応しています。
アイテムがカートに追加された時点で、顧客をカートページにリダイレクトするページタイプ。
アイテムがカートに追加された時点で、ページ横のドロワーを開くドロワータイプ。この場合はチェックアウトページに進むようプロンプトが表示されます。
Boundlessには、顧客が注文に関する特別な指示を送信するオプションが含まれます。
Brooklynのカートオプションを設定するには
[テーマ設定] をクリックします。
[カートページ] をクリックします。
カートタイプリストからカートタイプを選択します。
チェックアウト時に顧客が注文メモを利用できるよう設定する場合は、[注文メモを有効にする] にチェックを入れます。
保存をクリック
ソーシャルメディア
商品やブログ記事用のソーシャルメディアでの共有ボタン、ソーシャルメディアアカウントへのリンクを追加することができます。
ソーシャルメディアの設定をカスタマイズするには
- 管理画面から [オンラインストア] > [テーマ] の順に移動します。
- Shopifyアプリで [ストア] をタップします。
- [販売チャネル] セクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
- Shopifyアプリで [ストア] をタップします。
- [販売チャネル] セクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
Boundlessの隣にある [カスタマイズする] をクリックします。
[テーマ設定] をクリックします。
[ソーシャルメディア] をクリックします。
ソーシャルメディアで共有する画像をアップロードするには、ソーシャルメディアで共有する画像エリアで、[画像を選択する] または [無料の画像を探す] をクリックします。
-
ソーシャルメディアアカウントへのリンクを追加するには、アカウントエリアで、所定フィールドにアカウントへのリンクを入力します。
https://instagram.com/shopifyやhttps://twitter.com/shopify等の完全なリンクを入力してください。ソーシャルメディアアカウントへのリンクは、オンラインストアのフッターに表示されます。
-
商品やブログ記事にソーシャルメディアでの共有ボタンを追加するには、シェアのオプションエリアで、チェックボックスのいずれかまたはすべてをオンにします。
次の共有ボタンを追加できます。
- Facebookでシェアする - Twitterに投稿する - Pinterestでピンする (ブログ記事共有には使用できません)
- 保存をクリック
ファビコン
お気に入りアイコン「ファビコン」をアップロードし、次のロケーションにロゴを表示させることで、オンラインストアのブランディングに役立てることができます。
- ウェブブラウザーのタブ
- ウェブブラウザーの履歴
- デスクトップのアイコン
- ブックマークされたオンラインストア名の横
ファビコンをアップロードするには
[テーマ設定] タブをクリックします。
[ファビコン] をクリックします。
ファビコン画像エリアで [画像を選択する] をクリックのうえ、次のいずれかの操作を行います。
- 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。 - ローカルコンピューターから画像を選択するには、[ライブラリー] タブをクリックし、次にプラスボタンをクリックします。
ヒント: Boundlessの推奨サイズは32 x 32ピクセルです。
- 保存をクリック
チェックアウト
このセクションでストアのチェックアウトをカスタマイズすることができます。ストアのチェックアウトページに関する詳細については、こちらをクリックしてください。
アクションバーにサブメニューを設定
ホームページにリンクするアクションバーにメニューを作成すると、ホームページにもそのメニューが表示されます。まだ存在していないコレクションのメニューを設定している最中でも表示されてしまうため、これを回避するためにホームページへのプレースホルダーリンクを作成する必要があります。
アクションバーのコレクションリンクを作成する前に、コレクションを作成します。または、リンクするコレクションを作成するまでは「すべての商品」ページにリンクさせることもできます。