ストア設定｜SHOP Builder

SHOPLINEのショップビルダーは、ストアフロントレベルの関連設定の編集をサポートしています！オンラインストアの各セクションの色やフォントをカスタマイズし、商品リストに関連する設定を調整できます。ブランドイメージとスタイル、ユーザー体験のバランスを取るためにウェブページをデザインできます。

目次では、以下の内容を学びます

• ストア設定に移動
• テーマを選択 / 切り替え
• ストア設定を調整
• ページを公開

⚠️ 始める前に：

• ショップビルダーは現在、Ultra Chic、Kingsman、Varm、Philiaのテーマテンプレートのみをサポートしています。
• ショップビルダーを使用してページを作成した後、他のテーマテンプレートに切り替えてもページは表示されますが、編集できず、レイアウトが崩れる可能性があります。ページを公開する前にこの点に注意してください。
• ストア設定の調整は、オンラインストアの特定のページではなく、すべてのページに適用されます。

1. ストア設定に移動

SHOPLINE管理画面に進み、[オンラインストアデザイン] > [ページ]に移動し、高度なページボタンをクリックします。

左のメニューバーでストア設定ボタンをクリックします。

2. テーマテンプレートを選択 / 切り替え

現在のページのテーマテンプレートを表示するためにスクロールダウンします。ページのテーマテンプレートを変更するにはデザインに移動をクリックします。

[オンラインストアデザイン] > [デザイン]に戻され、切り替えたいテーマテンプレートを選択できます。

新しいテーマテンプレートに切り替えると、次の2つの状況が発生する可能性があります：

i. 新しいテーマテンプレートがショップビルダーをサポートしている場合

• 既存のフォントと色の設定はショップビルダーで変更されません。
• 新しいテーマテンプレートがストアフロントに適用され、設定は変更されません。
• 現在、Kingsman、Ultra Chic、Varmの3つのテーマテンプレートのみがショップビルダーをサポートしています。将来的には、さらに多くのテーマテンプレートがショップビルダーをサポートする予定です。

ii. 新しいテーマテンプレートがショップビルダーをサポートしていない場合

• 既存のフォントと色の設定はショップビルダーで変更されませんが、再度ショップビルダーに入ることはできません。
• 新しいテーマテンプレートがストアフロントに適用され、設定はデフォルトにリセットされます。
• 元のテーマテンプレートに戻すと、ショップビルダーで保存した既存の設定はクリアされ、デフォルトにリセットされます。

*Note: ショップビルダーの使用を開始した場合は、設定を保持するためにショップビルダーをサポートするテーマテンプレートを使用し続けることをお勧めします。

新しいテーマテンプレートを適用した後は、1. ストア設定に移動の手順に従って、ショップビルダーの設定を続けてください。

3. ストア設定を調整

ストア設定では、"色"、"フォント"、"モバイル"、"商品"、"その他"の5つの設定を調整できます。

i. 色

[ストア設定] > [色]に移動して、高度なページのさまざまなセクションの色を設定します。各セクションのデフォルトの色は、元々設定した色です。

*Note: 右側で色の変更をプレビューするには、左の列の一番下にある保存ボタンをクリックしてください。

A. ページ

ページの背景、テキスト（テキストコンポーネント）、およびハイパーリンクの色を設定できます。

B. お知らせバナー

お知らせバナーの背景色とテキスト色を設定できます。

C. ヘッダー

ヘッダーの背景、テキスト、およびアイコンの色を設定できます。

D. プライマリボタン

プライマリボタンの背景色とテキスト色を設定できます。

E. 今すぐ購入ボタン

"今すぐ購入"ボタンの背景色とテキスト色を調整できます。詳細については、今すぐ購入ボタン | 高度なデザイン設定を参照してください。

F. 商品プロモーションラベル

商品プロモーションラベルの背景色とテキスト色を設定できます。

G. フッター

フッターの背景、テキスト、アイコンの色を調整できます。

H. 著作権セクション

著作権セクションの背景色とテキスト色を設定できます。

I. 不正防止通知

不正防止通知セクションの背景色とテキスト色を設定できます。

ii. フォント

[ストア設定] > [フォント]に移動して、テキストパーツのフォントタイプとサイズを調整します。デフォルトのフォントタイプは、元々設定したフォントです。

*Note: フォントを設定した後は、左の列の下部にある保存ボタンをクリックして、右側で変更をプレビューしてください。

A. タイトル

タイトルのフォントタイプとサイズを調整します。変更をクリックしてフォントタイプを切り替え、リセットをクリックしてデフォルトフォントに戻します。タイトルのフォントサイズ（大/中/小）も選択できます。

B. 段落

段落のフォントタイプとサイズを調整します。変更をクリックしてフォントを切り替え、リセットをクリックしてデフォルトフォントに戻します。段落のフォントサイズ（大/中/小）を選択できます。

*注意：

• 現在、システムは多言語のタイトル/テキストで複数のフォントタイプを使用することをサポートしていません（つまり、タイトルが英語と中国語の場合、1つのフォントタイプしか使用できません）。
• フォントM PLUS Rounded 1cとShippori Minchoは日本語の漢字フォントです。中国語の文字に選択できますが、対応する漢字がない場合があります。そのため、M PLUS Rounded 1cまたはShippori Minchoを使用した場合、対応する漢字がないものはデフォルトフォントで表示されます。
• 選択したフォントが消費者のデフォルトストア言語をサポートしていない場合、消費者はその言語のデフォルトフォントを見ることになります。以下は一般的な言語選択のデフォルトフォントです：
  • 繁体字中国語：Noto sans TC
  • 簡体字中国語：Noto sans SC
  • 英語／ドイツ語／フランス語／マレー語：Noto sans
  • タイ語：Noto sans TH
  • ベトナム語：Noto sans VN
  • 日本語：Noto sans JP

• 言語によるサポートフォント/システム：

  • システムフォント
     

    フォント	サポートされている言語	備考
    サン	繁体字中国語, 簡体字中国語, 英語, タイ語, ベトナム語, 日本語	サポートされているシステム：iOS/macOS/Android。
    セリフ	繁体字中国語, 簡体字中国語, 英語, タイ語, ベトナム語, 日本語	サポートされているシステム：iOS/macOS。 Androidではサポートされておらず、デフォルトフォントはサンです。
    モノ	英語, ベトナム語	サポートされているシステム：iOS/macOS/Android。
    ラウンド	サポートされている言語はブラウザによって異なります	英語、日本語、および一部の繁体字/簡体字中国語テキストに対して、ChromeまたはSafariを使用するiOS/macOSシステムでサポートされています。サポートされていない場合、デフォルトフォントはサンです。Androidや他のデバイス/ブラウザではサポートされておらず、デフォルトフォントはサンです。

  • その他のフォント
     

    フォント	サポートされている言語
    アティティ	英語, タイ語, ベトナム語
    ラト	英語
    ローラ	英語, ベトナム語
    M PLUS Rounded 1c	英語, タイ語, ベトナム語, 日本語（および日本語で使用される一部の漢字）
    マリ	英語, タイ語
    ミトル	英語, タイ語, ベトナム語
    モンセラット	英語, ベトナム語
    ムリッシュ	英語, ベトナム語
    ナヌム・ミョンジョ	英語
    ノト・サン	繁体字中国語, 簡体字中国語, 英語, ベトナム語
    ノト・セリフ	繁体字中国語, 簡体字中国語, 英語, ベトナム語
    ヌニト	英語, ベトナム語
    プレイフェア・ディスプレイ	英語, ベトナム語
    プリディ	英語, タイ語, ベトナム語
    PT サン	英語
    ロボト	英語, ベトナム語
    サラブン	英語, タイ語
    しっぽり明朝	英語, 日本語（および日本語で使用される一部の漢字）
    タビラジ	英語, タイ語
    ウブントゥ	英語

iii. モバイル

[ストア設定] > [モバイル]に移動して、ストアカタログがモバイル版でどのように表示されるかを調整します。

*Note: 設定後、左の列の下部にある保存をクリックして、右側の変更をプレビューしてください。

A. メニュー項目を折りたたむ

「メニュー項目を折りたたむ」トグルをオンにすると、オンラインストアのメニューはモバイル版でサブディレクトリを展開しません。トグルをオフにすると、すべてのサブディレクトリが展開されます。

モバイル版の表示は次のとおりです：

B. モバイルメニューでカテゴリを非表示にする

「モバイルメニューでカテゴリを非表示にする」トグルをオンにすると、商品カテゴリはオンラインストアのモバイル版メニューに表示されません。この機能をオフにすると、商品カテゴリが表示されます。

モバイル版の表示は次のとおりです：

iv. 商品 

[ストア設定] > [商品]に移動して、オンラインストアでの商品表示を調整します。

*注意：

• 設定後、左列の下部にある保存をクリックして、右側で変更をプレビューしてください。
• 各トグルには、ストアフロントのどのセクションに影響を与えるかを示すタグがあります。たとえば、「カテゴリを折りたたむ」は商品リストページとモバイルメニューに影響します。
  

A. カテゴリを折りたたむ

オンラインストアのメニューとカテゴリの表示を調整できます。「カテゴリを折りたたむ」トグルをオンにすると、オンラインストア内のすべてのサブカテゴリが折りたたまれます。トグルをオフにすると、商品カテゴリが展開されます。

B. 商品画像の自動トリミング

「商品画像の自動トリミング」トグルをオンにすると、すべての商品画像が均一なサイズにトリミングされます。このトグルがオフの場合、商品画像は元の画像比率で表示されます。

C. バリエーション画像スタイル

*注意：

• 現在、この機能はUltra Chicテーマテンプレートのみをサポートしています。この機能は、Ultra Chicをストアテーマテンプレートとして適用している場合にのみ使用できます。
• レイアウトエンジンを有効にしている場合、この機能がストアフロントに反映されるようにリキッドレイアウトを更新する必要があります。

複数のバリエーションを持つ商品がある場合、バリエーション画像の形状を選択できます。現在、四角形と円形のいずれかを選択できます。また、バリエーション画像のサイズ（S/M/L）を選択することもできます。

D. 商品リストページにバリエーション画像を表示

複数のバリエーションを持つ商品がある場合、「商品リストページにバリエーション画像を表示」トグルをオンにすると、設定したバリエーション画像が複数のバリエーションを持つ商品下に表示されます。

バリエーション画像は、最初のバリエーションまたは2番目のバリエーションを表示するように設定できます。たとえば、最初のバリエーションが「色」で、2番目のバリエーションが「サイズ」の場合、「最初のタイプ」のバリエーションを表示することを選択すると、商品下のバリエーション画像は異なる色の商品を表示します。商品バリエーションの設定については、この記事を参照してください。

E. 商品名の配置

*注意：

• 現在、この機能はUltra Chicテーマテンプレートのみをサポートしています。この機能は、Ultra Chicをストアテーマテンプレートとして適用している場合にのみ使用できます。
• レイアウトエンジンを有効にしている場合、この機能がストアフロントに反映されるようにリキッドレイアウトを更新する必要があります。

商品リストページでの商品名の配置を調整できます。左揃え、中央揃え、右揃えのいずれかを選択できます。商品名の配置はバリエーション画像の表示には影響しません。

F. カスタムラベルスタイル

*注意：

• 現在、この機能はUltra Chicテーマテンプレートのみをサポートしています。この機能は、Ultra Chicをストアテーマテンプレートとして適用している場合にのみ使用できます。
• レイアウトエンジンを有効にしている場合、この機能がストアフロントに反映されるようにリキッドレイアウトを更新する必要があります。

商品のラベルスタイルをカスタマイズできます。現在、角が丸い、角が四角い、または矢印を選択できます。調整を行わない場合、ラベルはデフォルトスタイルで表示されます。プロモーションラベルの詳細については、商品プロモーションラベル | 商品をご覧ください。

G. カテゴリ内の商品数を表示

*注意：

• 現在、この機能はウルトラシックテーマテンプレートのみをサポートしています。この機能は、ウルトラシックをストアのテーマテンプレートとして適用しているときのみ使用できます。
• レイアウトエンジンを有効にしている場合、この機能がストアフロントに反映されるように、リキッドレイアウトを更新する必要があります。

「カテゴリ内の商品数を表示」トグルはデフォルトでオフになっています。トグルをオンにすると、カテゴリ名の横にそのカテゴリの商品数がストアフロントに表示されます。

H. ページあたりの商品数

各ページに表示する商品の数を選択できます。現在、各ページに24、48、または72の商品を表示することができます。顧客はストアフロントで表示数を変更することができることに注意してください。

I. 商品ページのソーシャルネットワーク共有ボタン

デフォルトでは、このトグルはオンになっており、商品ページの「ソーシャル共有ボタン」を非表示にします。トグルをオフにすると、顧客はページ上のソーシャルメディアボタンを使用して商品を共有できるようになります。

v. その他

[ストア設定] > [その他]に移動して、オンラインストアページの他の設定を調整します。

*注意： 設定後、左の列の下部にある保存をクリックして、右側で変更をプレビューしてください。

A. 上に戻る

「上に戻る」トグルをオンにすると、ストアフロントページをスクロールダウンした後に「トップに戻る」ボタンが表示されます。トグルをオフにすると、ボタンが非表示になります。

B. クッキーバナーを有効にする

「クッキーバナーを有効にする」トグルをオンにすると、顧客がオンラインストアを訪れたときにクッキー同意バナーが表示されます。クッキー同意バナーの詳細な機能については、こちらの記事を参照してください。

4. 公開ページ

ストア設定が完了したら、右上のプレビューページをクリックして、ストアフロントのレンダリング効果を確認します。

公開をクリックして、カスタマイズしたストア設定をオンラインストアに適用します。

 

さらに読む

• 紹介｜ショップビルダー
• フッター設定 | ショップビルダー