Supply

Supplyは、大規模な在庫と複数のコレクションを持つマーチャントにとって最適な、クリーンで操作しやすいテーマです。目立つナビゲーション、複数のホームページコレクション、サイドバーのフィルタリング、商品レビューアプリとの容易な連携などの機能が含まれます。

Supplyを使用したオンラインストアの例

以下の場合はSupplyを用いるのが最適です。

  • 50点以上の商品
  • 5つ以上のコレクション
  • 大型メニュー

テーマエディタ

テーマエディタを使用して、テーマをカスタマイズします。テーマエディタのツールバーは、セクションテーマ設定に分かれています。

セクションとテーマ設定を表示するテーマエディタのツールバー

セクションを使用して、ストアの各種ページのコンテンツとレイアウトを変更できます。テーマ設定を使用して、ストアのフォントと色をカスタマイズし、ソーシャルメディアのリンクやチェックアウトの設定を変更することができます。

セクションは、オンラインストアの各ページのレイアウトを決定するカスタマイズ可能なコンテンツブロックです。

  • ホームセクションでは、スライドショーやメールマガジン登録といった機能が含まれており、追加、再配置、削除することができます。ホームページには最大25個のセクションを追加できます。

  • 各ページタイプには、独自のセクションが含まれています。たとえば、商品ページセクションで、オンラインストアの各商品ページのレイアウトを決定します。

  • ページセクションは常に、オンラインストアの特定の場所にあります。カスタマイズ可能ですが、再配置および削除することはできません。

  • 各テーマには、ヘッダーやフッターなどの固定セクションが含まれており、オンラインストアの各ページに表示されます。

独自のセクションの選択、およびビジネスに適したカスタマイズ方法を詳しく知ることができます。

Supplyには、以下の静的セクションが含まれます。

  • ヘッダー
  • フッター
  • 商品ページ
  • コレクションページ
  • コレクションリストのページ
  • 記事ページ

動的セクション

動的セクションを追加並べ替え、あるいは削除して、ホームページのレイアウトをカスタマイズすることができます。各テーマには、選択可能な固有の動的セクションがあります。

Supplyには、以下の動的セクションが含まれます。

  • ブログ記事
  • コレクションリスト
  • 特集コレクション
  • テキスト付き画像
  • スライドショー
  • おすすめ商品
  • ニュースレター
  • マップ
  • リッチテキスト
  • ビデオ
  • コンテンツをカスタムする

ヘッダー

Supplyにはストアヘッダーの独自設定が含まれます。ヘッダーに表示するメニューの選択、ロゴのアップロード、顧客へのメッセージ表示が可能です。

ヘッダーをカスタマイズするには

  1. [セクション] タブをクリックします。

  2. [ヘッダー] をクリックします。

  3. メニューリストから表示するメニューを選択します。

ロゴ

Supplyでは、ストアのヘッダー部分にロゴを挿入することができます。カスタムロゴを使用する場合の最適なフォーマットは、背景を透明にした.pngファイルです。

Supplyでは幅400ピクセルのロゴを使用するのが見た目にも最適です。カスタムロゴ幅フィールドを使用して、画像の幅を変更することができます。ロゴ画像のオリジナル幅を超える値の設定は避けてください。これにより画像の品質が損なわれる恐れがあります。

メッセージ

Supplyでは、ストアヘッダーに最大55文字のメッセージを入力することができます。メッセージは検索バーの上に表示されます。

たとえば挨拶メッセージの入力、販売または新作コレクションの宣伝、配送の遅延に関するお知らせなどに使用することができます。

ヘッダーメッセージを追加するには

  1. メッセージエリアにヘッダーメッセージを入力します。

  2. テキストを太字またはイタリックに設定することも可能です。

  3. 保存をクリック

フッター

フッターセクションでは、ストアの各ページの下部に表示されるコンテンツを編集できます。以下の機能をフッターに追加できます。

  • ソーシャルメディアのアイコン
  • 支払いアイコン
  • 水平メニュー
  • ニュースレターのサインアップ
  • カスタムテキスト
  • クイックリンク

クイックリンクのメニュー、連絡先情報、ニュースレターのサインアップ、水平メニュー、著作権のテキスト、支払いアイコンを表示するウェブサイトのフッターセクション。

フッターセクションをカスタマイズするには:

  1. Supply を検索して、[カスタマイズ] をクリックします。

  2. [セクション] をクリックします。

  3. [フッター] をクリックします。

  4. [ソーシャルメディアのアイコンを表示する] にチェックを入れ、ソーシャルメディアのアイコンをフッターに表示します。ソーシャルメディアのテーマ設定からリンク先のアカウントを選択します。

  5. [支払いアイコンを表示する] にチェックを入れることで、フッターに支払いアイコン (マスターカードやPayPalなど) を追加します。

  6. リーガルメニューエリアからフッターの下部に水平メニューを追加します。デフォルトのメニューを編集するには、[メニューを編集] をクリックします。別のメニューに変更するには、[変更] をクリックし、既存のメニューを選択するか、[メニューを作成する] をクリックします。

  7. コンテンツエリアのフッターに最大9つのコンテンツブロックを追加します。

- [コンテンツを追加する] をクリックしてコンテンツブロックを追加します。次の選択肢からブロックの種類を選択します。 - メニュー - リッチテキスト - ニュースレターのサインアップ

- [⁞⁞] アイコンをクリックしてブロックを別の場所にドラッグすることで、コンテンツブロックを移動します。 - ブロックをクリックしてから [コンテンツを削除] をクリックして、コンテンツブロックを削除します。 - ブロックをクリックしてから設定を編集して、コンテンツブロックをカスタマイズします。

  1. 保存をクリック

商品ページ

商品セクションでは、以下の要素を追加したり削除したりできます。

  • 画像ズーム
  • 数量セレクター
  • 在庫情報
  • 商品のブランド名または販売元
  • 節約情報
  • 関連商品
  • 動的チェックアウトボタン
  • 各種ソーシャル共有アイコン
  • お客様のレビュー

商品ページの設定を編集するには、以下の手順を実行します。

  1. トップバーのドロップダウンメニューから [商品ページ] を選択します。

  2. [セクション] をクリックします。

  3. [商品] をクリックします。

  4. お客様が商品画像にマウスポインターを重ねることによりズームインできるようにするには、[画像ズームを有効にする] にチェックを入れます。

  5. 数量セレクターを表示するには、[数量セレクターを表示する] にチェックを入れます。

  6. 在庫が少なくなったときに在庫数を表示するには、[商品の在庫数が10個以下の場合は在庫を表示する] にチェックを入れます。このメッセージが実際に表示されるようにするには、商品の在庫追跡を有効にする必要があります。

  7. 売り切れた商品が再入荷することを示すメッセージを表示するには、[売り切れ時に入荷予定のメッセージを表示する] にチェックを入れます。表示されるメッセージは、「(日付) 以降に再入荷予定」となります。このメッセージが実際に表示されるには、商品の仕入れを作成する必要があります。

  8. 商品のブランド名または販売元を表示するには、[販売元を表示する] にチェックを入れます。ブランド名や販売元を表示するには、商品に販売元を追加する必要があります。

  9. お客様にとってどれだけお得かを表示するには、[保存された金額を表示] にチェックを入れます。割引額は、商品の通常価格と割引前の価格の差額です。割引額は、切りのいいドル値に切り下げられます。たとえば、価格差が25.51ドルの場合、割引額は「25ドル」になります。割引額が実際に表示されるには、商品の割引前の価格を設定する必要があります。

  10. 割引前の価格を表示するには、[価格比較を表示する] にチェックを入れます。

  11. ページの下部に関連商品を表示するには、[関連商品を表示する] を選択します。商品が属するコレクションによって、表示される関連商品が決まります。関連商品を表示するには、商品のコレクションを作成するか、既存のコレクションに追加する必要があります。商品がコレクションの一部でない場合、関連商品は表示されません。

  12. 動的チェックアウトボタンを表示するには、[動的チェックアウトボタンを表示する] をオンにします。

  13. 各種ソーシャル共有アイコンを表示するには、[商品の共有を有効にする] にチェックを入れます。

  14. 商品に関するお客様のレビューを表示するには、[商品レビューを有効にする] にチェックを入れます。レビューが実際に表示されるには、無料のShopify商品レビューアプリをインストールして商品のレビューを受け取る必要があります。

  15. バリエーションピッカー、カートに追加するボタン、および動的チェックアウトボタンのサイズを設定するには、バリエーションピッカーとボタンサイズドロップダウンメニューからサイズを選択します。

  16. 保存をクリック

コレクションページ

Supplyではコレクションページのサイドバーメニューで、コレクションの並べ替え方法が選択できます。商品タグまたは絞り込みグループによる並べ替えのいずれかが選択可能です。

  1. ストアのテーマエディタプレビューで、コレクションページを開きます。

  2. [セクション] タブをクリックします。

  3. [コレクション] をクリックします。

  4. 行数ごとの商品ドロップダウンリストから、各行に表示する商品数を選択します。

  5. ページごとの行ドロップダウンリストから、表示する行数を選択します。

  6. サイドバー商品絞り込みの下で、商品タグまたは絞り込みグループのどちらでコレクションを並べ替えるか選択します。

  7. コレクションの商品が元価格から値引きされた場合に差額を表示、または他社商品との価格比較を表示する場合は、価格を比較の表示にチェックを入れます。

  8. 商品の値引き額を表示するには、値引き額の表示にチェックを入れます。

  9. コレクションページの商品レビューを許可するには、[商品レビューを有効にする] にチェックを入れます。

  1. 保存をクリック

特集コレクション

特集コレクションセクションを用いて、ホームページで特集する商品を最大6点選択します。顧客がホームページの特集コレクションをクリックすると、コレクションの特集商品が表示されます。特集商品がない場合は、コレクションの最初の商品画像が表示されます。

ホームページに特集コレクションを表示させるには

  1. [セクション] タブをクリックします。

  2. [特集コレクション] をクリックします。

  3. コンテンツエリアで [コレクション] をクリックします。

  4. コレクションドロップダウンリストから、表示するコレクションを選択します。

  5. 表示するコレクションがすべて選択されるまで、コレクションの追加を続けて行います。

  6. 保存をクリック

スライドショー

スライドショーセクションでは、スライドショーに使用する画像をアップロードできます。スライドショー画像を自動で切り替えるかどうかを選択し、その頻度を秒単位で設定することが可能です。

Supplyではホームページに最大6点のスライド画像を選択することが可能です。各スライドにURLを追加すると、顧客はこれをクリックしストアページを開くことができます。

各スライド画像は幅1000ピクセル、高さ500ピクセルであることが必要です。異なる高さのスライドショー画像を使用すると、移行時にスライドが飛んだり、ばらついて表示されたりるする恐れがあります。

スライドショーをカスタマイズするには

  1. [セクション] タブをクリックします。

  2. [スライドショー] をクリックします。

  3. スライドを自動で切り替えるには、設定エリアで [スライドの自動切り替え] にチェックを入れます。

  4. トランジション時間ドロップダウンリストから、切り替え頻度を秒単位で選択します。

画像スライドを追加するには

  1. コンテンツエリアで [画像] をクリックします。

  2. 画像エリアで [画像を選択する] をクリックのうえ、次のいずれかの操作を行います。

- 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。 - Shopifyのバーストストック画像コレクションからストック画像を選択するには、[無料の画像] タブをクリックします。ここに検索語を入力するか、画像カテゴリーを閲覧することができます。 - ローカルコンピューターから画像を選択するには、[ライブラリー] タブをクリックし、次にプラスボタンをクリックします。

  1. スライドにリンクを追加するには、次のいずれかの操作を行います。

- スライドのテキストをストアページにリンクさせる場合は、[リンクURL] フィールドをクリックしページを選択します。 - スライド上のテキストをウェブサイトにリンクさせる場合は、ウェブサイトのURLをスライドリンクフィールドに貼り付けます。

  1. 保存をクリック

ニュースレター

ホームページにニュースレターのサインアップを追加することができます。これにより、メールマーケティングキャンペーンのお客様のメールアドレスを収集できます。メールマーケティングについて詳しくは、Shopifyブログをご覧ください。

ウェブサイトにあるニュースレターのセクション。お客様がメールアドレスを入力するフィールドと「購読」と書かれたボタンがあります。

ホームページにニュースレターのサインアップを追加するには、次のとおりにします。

  1. Supply を検索して、[カスタマイズ] をクリックします。

  2. [セクション] をクリックします。

  3. [セクションを追加] > [ニュースレター] をクリックします。

  4. 見出しフィールドに、ニュースレターのサインアップの見出しを入力します。デフォルトの見出しは「ストアからのお知らせを受け取る」です。

  5. サブテキストフィールドにニュースレターのサインアップの小見出しを入力します。デフォルトのテキストは、「プロモーション、新商品、セールについて、あなたのインボックスに直接知らせる。」です。

  6. 保存をクリック

ビデオ

YouTubeまたはVimeoでホストされているビデオをホームページに追加できます。ビデオはお客様を引き込み、ビジネスへの関心を高めることができます。

ホームページにビデオを追加するには、次のとおりにします。

  1. Supply を検索して、[カスタマイズ] をクリックします。

  2. [セクション] をクリックします。

  3. [セクションを追加] > [ビデオ] をクリックします。

  4. 見出しフィールドに、ビデオの見出しを入力します。

  5. ビデオリンクフィールドに、ビデオの共有リンクを入力します。

    YouTubeの共有リンクは次のようになります。https://youtu.be/OTJXAUZY9t0このYouTubeヘルプの記事では、YouTubeビデオの共有リンクをコピーする方法を学ぶことができます。

    Vimeoの共有リンクは次のようになります。https://vimeo.com/281332510このVimeoヘルプセンターの記事では、Vimeoビデオの共有リンクをコピーする方法を学ぶことができます。

  6. 保存をクリック

コンテンツをカスタムする

カスタムコンテンツセクションでは、HTMLコードを使用してホームページのカスタムコンテンツを作成できます。たとえば、HTMLを使用してテキストブロックの書式を設定し、表を作成し、外部サービスのウェブサイトからコンテンツを埋め込んだりすることができます。

ホームページにカスタムコンテンツを追加するには

  1. Supply を検索して、[カスタマイズ] をクリックします。

  2. [セクション] をクリックします。

  3. [セクションを追加] をクリックします。

  4. 高度なレイアウトエリアで、[カスタムコンテンツ] > [追加] をクリックします。

  5. [カスタムコンテンツ] をクリックし、ホームページに追加するHTMLコードを入力します。

  6. 保存をクリック

テーマ設定。テーマ設定を使用して、オンラインストアの色と文字体裁をカスタマイズすることができます。ソーシャルメディアアカウントへのリンクを設定したり、カートの設定を編集したり、ファビコンを追加することもできます。

Supplyには、以下のテーマ設定が含まれます。

  • 文字体裁
  • ファビコン
  • カート
  • SNS
  • 価格のフォーマット
  • チェックアウト

オンラインストアのさまざまな部分のカラーを選択できます。

色の設定をカスタマイズする

  1. *の隣にある *[カスタマイズする] をクリックします。

  2. [テーマ設定] をクリックします。

  3. [カラー] をクリックします。

  4. コンテンツのタイプごとに、カラー見本をクリックしてカラーピッカーを使用します。

    テーマエディタのカラーピッカー

- 直近の選択エリアには、あなたが最近テーマで選択したカラーが表示されます。 - 現在使用中エリアには、あなたがテーマの別の部分で現在使用しているカラーが表示されます。

カラーを透明に設定するには、[なし] をクリックします。

  1. 保存をクリック

文字体裁

オンラインストアのテキストのフォントスタイルとサイズを設定できます。

文字体裁の設定をカスタマイズする

  1. *の隣にある *[カスタマイズする] をクリックします。

  2. [テーマ設定] をクリックします。

  3. [文字体裁] をクリックします。

  4. テキストのタイプごとに、[変更] をクリックしてフォントピッカーを使用します。

    フォントピッカーの「変更」ボタン

  5. 検索フィールドを使用するか、[さらに読み込む] をクリックしてフォントを検索します。

    利用可能なフォントをすべて表示するには、「Shopifyのフォントライブラリー」を確認してください。

  6. 使用するフォントの名前をクリックします。

  7. フォントを太字や斜体などの別のスタイルに変更するには、[標準] をクリックします。次に、使用するスタイルをクリックし、[選択] をクリックします。

    フォントピッカーで使用可能なフォントウェイトの選択

  8. 保存をクリック

ファビコン

Supplyではストアにファビコンを追加することができます。ファビコン (お気に入りアイコン) は、ウェブサイトを表す小型のアイコンで、以下の場所にショートカットとして表示されます。

  • ウェブブラウザーのタブ
  • ウェブブラウザーの履歴
  • デスクトップのアイコン
  • ブックマークされたオンラインストア名の横

ファビコンはストアのブランディングや、洗練された見た目のウェブサイトを実現するのに役立ちます。ファビコンの推奨サイズは16 x 16ピクセルです。

ファビコンを追加するには

  1. [テーマ設定] タブをクリックします。

  2. [ファビコン] をクリックします。

  3. ファビコン画像エリアで [画像を選択する] をクリックのうえ、次のいずれかの操作を行います。

- 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。 - ローカルコンピューターから画像を選択するには、[ライブラリー] タブをクリックし、次にプラスボタンをクリックします。

  1. 保存をクリック

カート

Supplyではカートページに注文メモを含めるなどのカスタマイズが可能で、4つのスタイルから選択することができます。

カートの設定にアクセスするには

  1. [テーマ設定] タブをクリックします。

  2. [カート] をクリックします。

注文メモを有効にする

Supplyではギフトメッセージ、特記事項、配達指示などを記載するための、注文メモフィールドをカートページに設けることができます。

カートタイプ

Supplyが提供するカートタイプ

  • ページ上部から下にスライドするドロワータイプのカート。カートが閉じられるとカートテキストは折りたたまれます。
  • ドロワータイプに類似しており、カートが開閉されるとフリップアニメーションが表示されるフリップタイプのカート。
  • ページコンテンツ上部にポップアップウィンドウが表示されるモーダルタイプのカート。ポップアップウィンドウを閉じるには、Xまたはウィンドウ外側をクリックします。
  • オンラインストアページで用いられるページタイプのカート。顧客がヘッダーのカートリンクをクリック、またはカートにアイテムを追加するとカートページにアクセスできます。

SNS

商品やブログ記事用のソーシャル共有ボタン、ソーシャルメディアアカウントへのリンクを追加することができます。

ソーシャルメディアの設定をカスタマイズするには

  1. Supply を検索して、[カスタマイズ] をクリックします。

  2. [テーマ設定] をクリックします。

  3. [ソーシャルメディア] をクリックします。

  4. ソーシャル共有画像をアップロードするには、ソーシャル共有画像エリアで、[画像を選択する] または [無料の画像を探す] をクリックします。

  5. ソーシャルメディアアカウントへのリンクを追加するには、アカウントエリアで、所定フィールドにアカウントへのリンクを入力します。https://instagram.com/shopifyhttps://twitter.com/shopify 等の完全なリンクを入力してください。

    ソーシャルメディアアカウントへのリンクは、オンラインストアのフッターに表示されます。

  6. 商品やブログ記事にソーシャル共有ボタンを追加するには、共有エリアでチェックボックスのいずれか、またはすべてをオンにします。

    次の共有ボタンを追加できます。

- Facebookでシェアする - Twitterに投稿する - Pinterestでピンする (ブログ記事共有には使用できません)

  1. 共有ボタンのスタイルを変更するには、ボタンスタイルメニューからスタイルを選択します。

  2. 保存をクリック

価格のフォーマット

Supplyではストアにおける商品価格の表示方法を選択できます。

Supplyで価格フォーマットオプションを設定するには

  1. [テーマ設定] タブをクリックします。

  2. [価格のフォーマット] をクリックします。

  3. 販売に通貨のセントを使用する場合は、[セントを上付き文字で表示する] にチェックを入れます。

チェックアウト

このセクションでストアのチェックアウトをカスタマイズすることができます。ストアのチェックアウトページに関する詳細については、こちらをクリックしてください。

画像のヒント

最適なSupplyの商品画像

洗練されたプロフェッショナルな印象を与えるために、Supplyでは解像度の高い写真を用いることが必要です。このため幅1024ピクセル、高さ1024ピクセル以上の画像を使用することをおすすめします。画像サイズは必要に応じて自動的に縮小されます。

テーマエディタプレビューの商品ページを開き、セクションタブの [商品] をクリックすることで有効にできる、[画像ズームを有効にする] にチェックを入れる場合は、特に高解像度の写真を使用することが重要です。

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

ヘッダーの縮小

ページの上部のセクションを縮小するには複数の方法があります。

ロゴが大きすぎる場合は、テーマ設定内で最大幅を調整し、サイズを小さくすることができます。Shopifyでは、ロゴの縦横比を維持したままサイズを縮小するため、幅を縮小すると高さも低くなります。テーマエディタを使用し、ヘッダーセクションのカスタムロゴ幅の値を調整してください。デフォルト値は305ピクセルになっています。ロゴのサイズを縮小するには、これより小さい値 (ピクセル) を使用してください。そうすることでヘッダーの高さも低くなります。

ロゴに空白ピクセルが隠れている場合は、上下の余白に追加されます。Photoshopなどのプログラムを用いて、ロゴ画像からこのようなピクセルを削除することが可能です。ロゴのトリミングが完了したら、テーマエディタを使用して再度アップロードしてください。ロゴ画像の余白をトリミングすることで、ヘッダーの高さを大幅に削ることができます。

スライドショーの縮小

幅広のランドスケープ画像を使用します。

テーマエディタでは幅1000ピクセル、高さ500ピクセルの画像をアップロードすることが推奨されていますが、これより小さな画像の使用も可能です。ただし大画面表示で左右に余白が生じないよう、幅1000ピクセルが推奨されています。これより幅の狭い画像はスライドショーの中央に配置されます。

ナビゲーションのヒント

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

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

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

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

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

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

  • テーマ設定タブのタイポグラフィーで、メインメニューのフォントサイズを下げることによりナビゲーションリンクを縮小します。
  • 各リンクの文字数を削減します。たとえば「よくある質問」を「FAQ」、「お問い合わせください」を「お問い合わせ」、「カタログ」を「ストア」、「および」を「&」に変更するなどで削減できます。

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

メインメニューからすべてのコレクションにリンクを追加するのは逆効果です。「ショップ」または「カタログ」へのリンクの下にドロップダウンメニューを作成し、コレクションを明記してください。またコレクションを分割し、それぞれにドロップダウンメニューを作成することもできます。商品のサブカテゴリーを作成するには、商品タグを使用してください。

サイドバーの削除

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

  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_CanonFocal Length_18 - 55mmResolution_12 MPなどの名称となります。アンダースコアの左側はグループ名、右側は商品タグとなるよう設定してください。アンダースコアのいずれかの側にスペースを含めることもできます。

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

  5. テーマエディタプレビューでコレクションページを開きます。セクションタブで [コレクション] をクリックし、次に [グループ別] のオプションをクリックします。

絞り込みグループおよびタグの並べ替え

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

価格に関するヒント

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

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

  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に追加しても実行されません。JavaScriptはストアURLに/cartを追加した場合のみ実行されます。たとえば、http://your.store.url/cartなどです。

カートページに以下の機能を追加する場合は、カートタイプを「ページ」に設定する必要があります。

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

カートタイプを「ページ」に変更するには

  1. [テーマ設定] をクリックします。

  2. [カート] をクリックします。

  3. カートタイプドロップダウンリストから、[ページ] を選択します。

  4. 保存をクリック

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

無料体験を試す