Supplyのためのヒント

このページはOct 28, 2020に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/online-store/os/using-themes/themes-by-shopify/supply/tipsをご覧ください。

この記事では、オンラインストアでSupplyを設定するために役立つヒントやベストプラクティスを紹介します。

画像のヒント

商品画像

Supplyでは、高解像度の写真は、より洗練されたプロフェッショナルな見た目になります。そのため、画像の幅と高さを1024 x 1024ピクセル以上にする必要があります。必要に応じて、画像は自動的に縮小されます。商品ページで画像ズームを有効にした場合、高解像度の写真はとりわけ重要です。

商品写真に最適な縦横比は正方形です。

スライドショーの縮小

スライドショーが、出来るだけホームページの縦方向に場所を取らないようにするには、高さよりも幅が広い横長の画像を使用する必要があります。1000ピクセルの幅の画像をアップロードして、大きなディスプレイ上で、スライドの左と右に余白が生じないようにします。幅の狭い画像はスライドショーの中央に配置されます。

ヘッダーのヒント

ヘッダーが高すぎる場合は、ロゴを調整することにより低くすることができます。ロゴが大きすぎる場合は、最大幅を調整することによりサイズを縮小することができます。またロゴには、上下の空白に、隠れたまたは空白のピクセルが含まれる場合もあります。Photoshopなどの画像編集ソフトウェアを使用して、ロゴ画像からそれらのピクセルをトリミングすることができます。ロゴをトリミングしたら、もう一度アップロードします。ロゴ画像の余白をトリミングすることで、ヘッダーの高さを大幅に縮小することができます。

ロゴの幅を調整する

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  1. Shopifyアプリで [ストア] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  1. Shopifyアプリで [ストア] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  1. Supplyのためのヒントの隣にある [カスタマイズする] をクリックします。
  2. [ヘッダー] をクリックします。5. カスタムロゴの幅 (ピクセル単位) フィールドに新しい幅を入力します。デフォルトのピクセル値は305です。ロゴのサイズを縮小するには、ピクセル値を小さくします。その結果、ヘッダーの高さが縮小されます。ロゴの幅を縮小することで、ロゴの縦横比を維持しながら縮小できるので、その高さも低くなります。6. [保存] をクリックします。

メニューのヒント

以下のヒントは、Supplyを使用する際のストアナビゲーション向上に役立ちます。

ドロップダウンメニューの追加

メインメニューにドロップダウンメニューを追加するには、メニューページにメニューを作成する必要があります。

メインメニューのベストプラクティス

メインメニューでアイテムが多すぎて1行に収まらない場合、その最後に残ったリンクは、その他ドロップダウンメニューに追加されます。

この挙動はメインメニューのリンク数によって厳密に制御されるものではありませんが、リンク数を5～6程度に抑えることで解決できます。リンクを追加する場合は次の操作を行ってください。

  • ナビゲーションリンクを小さくします。これらのリンクのフォントサイズは、文字体裁の設定のメインメニューのフォントサイズによって制御されます。
  • 各リンクの文字数を削減します。たとえば「よくある質問」を「よくある質問」、「お問い合わせください」を「お問い合わせ」、「カタログ」を「ストア」、「および」を「&」に変更するなどで削減できます。

メニューのアイテム数が多すぎると操作性が損なわれます。たとえばメニュー項目が多すぎると、顧客が重要なアイテムを見逃す恐れもあります。メニューを5~6アイテムに抑えるよう試みてください。6ページ以上にアクセスさせたい場合はドロップダウンメニューを使用してください。

メインメニューからすべてのコレクションへのリンクを追加することは避ける必要があります。その代わり、「ショップ」または「カタログ」リンクの下のドロップダウンメニューに、コレクションを表示することができます。またコレクションをグループに分け、それぞれにドロップダウンメニューを作成することもできます。あるいは、商品タグを使用して商品のサブカテゴリーを作成することもできます。

サイドバーの削除

ストアからサイドバーを削除するには、2つのテーマファイルにコードを追加する必要があります。

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。

  2. 編集するテーマを見つけて、アクション>コードを編集するをクリックします。

  1. Shopifyアプリから [Store] をタップします。

  2. [販売チャネル] セクションで、[オンラインストア] をタップします。

  3. [テーマを管理する] をタップします。

  4. 編集するテーマを見つけて、アクション>コードを編集するをクリックします。

  1. Shopifyアプリから [Store] をタップします。

  2. [販売チャネル] セクションで、[オンラインストア] をタップします。

  3. [テーマを管理する] をタップします。

  4. 編集するテーマを見つけて、アクション>コードを編集するをクリックします。

  1. セクションディレクトリで、[collection-template.liquid] をクリックします。

  2. ファイル内でhas_sidebarを見つけます。以下のコード列を削除してください。

{% if collection.all_tags.size > 0 %}
  {% assign has_sidebar = true %}
{% endif %}

  1. [保存] をクリックします。

  2. セクションディレクトリで、[collection-list-template.liquid] をクリックします。

  3. ファイル内でhas_sidebarを見つけます。以下のコード列を削除してください。

{% if collection.all_tags.size > 0 %}
  {% assign has_sidebar = true %}
{% endif %}
  1. [保存] をクリックします。

商品のヒント

以下のヒントは、Supplyを用いて商品を表示する際に役立ちます。

高度なグループ絞り込みの使用

商品数が多い場合は、お客様が商品を並べ替えられるようサブグループを有効にすることができます。

  1. グループを定義します。上記画像では、ブランド、焦点距離、解像度がグループにあたります。

  2. すべての商品を.csvファイルへエクスポートします。

  3. すべての既存タグの前に、Group_Tag Nameの形式でグループ名を追加します。たとえばBrand_Canon、Focal Length_18 - 55mm、Resolution_12 MPなどの名称となります。アンダースコアの左側はグループ名、右側は商品タグとなるよう設定してください。アンダースコアのいずれかの側にスペースを含めることもできます。

  4. .csvファイルを保存して、商品をインポートしてストアに戻します。アップロードの際、商品が重複して作成されないように [同じハンドルを持つ現在の商品をすべて更新します] のチェックボックスが選択されていることを確認してください。

  5. コレクションページのグループによる絞り込みを有効にします。

    1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
    2. Supplyの横にある [カスタマイズ] をクリックします。
    3. トップバーのドロップダウンメニューまたはテンプレートメニューから、[コレクションページ] を選択します。
    4. [コレクション] セクションをクリックします。
    5. サイドバーの商品絞り込みで、[グループ別] を選択します。
    6. [保存] をクリックします。

絞り込みグループおよびタグの順序変更

グルーブはアルファベット順に並べられており、グループ内のタグも同様にアルファベット順に並んでいます。顧客の注文はShopify Expertがサポートします。

価格に関するヒント

以下のヒントは、Supplyを用いた価格設定に役立ちます。

販売額の四捨五入を無効化

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。

  2. 編集するテーマを見つけて、アクション>コードを編集するをクリックします。

  1. Shopifyアプリから [Store] をタップします。

  2. [販売チャネル] セクションで、[オンラインストア] をタップします。

  3. [テーマを管理する] をタップします。

  4. 編集するテーマを見つけて、アクション>コードを編集するをクリックします。

  1. Shopifyアプリから [Store] をタップします。

  2. [販売チャネル] セクションで、[オンラインストア] をタップします。

  3. [テーマを管理する] をタップします。

  4. 編集するテーマを見つけて、アクション>コードを編集するをクリックします。

  1. 左側のアセットで、timber.scss.liquidを開きます。

  2. ファイルの最下部に次のコードを追加します。

.sale-tag sup {
   display: inline;
   top: 0;
   font-size: 100%;

   &:before {
    content: '.';
   }
 }
  1. [保存] をクリックします。

カートに関するヒント

以下のヒントは、SupplyにJavaScriptを追加した際にストアのカートを正しく動作させるにあたり役立ちます。

カートタイプを変更し高度なJavaScriptを有効にする

Supplyでは、JavaScriptをcart.liquidに追加してもドロワーまたはモーダルカートにおいては実行されません。ストアURLに/cartを追加した場合にのみ実行されます。たとえば、http://your.store.url/cartなどです。

次のいずれかの機能をカートページに追加する場合、カートタイプをページに設定する必要があります。

  • 配送料計算
  • 複数通貨
  • ギフト包装
  • カート属性の検証
  • 日付ピッカー
  • 「同意する」チェックボックス

手順:

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  1. Shopifyアプリで [ストア] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  1. Shopifyアプリで [ストア] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  1. Supplyのためのヒントの隣にある [カスタマイズする] をクリックします。 1 [テーマ設定] をクリックします。2. [カート] をクリックします。3. [カートタイプ] のドロップダウンリストから、[ページ] を選択します。4. [保存] をクリックします。

Shopifyで販売を開始する準備はできていますか?

無料体験を試す