商品ページで [カートに追加する] ボタンを非表示にする

メモ

Shopifyの無料のテーマ を使用している場合、Shopifyサポートにこのチュートリアルのサポートを依頼できます。設計には15分かかります。詳細については、Shopifyのデザインポリシー を参照してください。

メモ

このカスタマイズはOnline Store 2.0テーマ向けで、以前のShopifyテーマには適用されません。使用しているテーマのアーキテクチャバージョンを確認してください。

商品テンプレートをカスタマイズして、カートへのアイテムの追加に関連する特定のブロックを非表示にすることで、お客様がカートに商品を追加するオプションを非表示にできます。その後、お客様がカートに追加できないようにする1つ以上の商品に、その商品テンプレートを割り当てることができます。つまり、新しい商品テンプレートを割り当てる商品ページには、[カートに追加する] ボタンが表示されません。

次のいずれかのシナリオに該当する場合は、特定の商品ページで [カートに追加する] ボタンを非表示にすることが推奨されます。

• 商品価格の見積もりについてお客様に問い合わせてもらう必要がある。
• [カートに追加する] ボタンの代わりに予約注文オプションが必要である。
• カスタムメイドの商品を販売していて、購入する前に商品の要件についてお客様に問い合わせてもらう必要がある。

商品ページに割り当てることができるのは、公開済みのテーマに関連付けられている商品テンプレートのみです。公開済みのテーマではないテーマに新しいテンプレートを作成した場合、そのテンプレートを商品に割り当てるには、最初にテーマを公開する必要があります。

新しいテンプレートを作成する方法や商品にテンプレートを適用する方法についての詳細をご覧ください。

特定の商品の [カートに追加する] ボタンを非表示にする

デフォルトでは、[デフォルトの商品] テンプレートが商品に割り当てられています。非売品の商品テンプレートを個別に作成することで、1個以上の商品で [カートに追加する] ボタンを非表示にし、その他の商品はオンラインストアで購入可能なままにすることができます。

非売品の商品テンプレートを作成する

[デフォルトの商品] テンプレートを変更せずに特定の商品をカスタマイズするには、新しい商品テンプレートを作成する必要があります。

手順

1. 管理画面から [オンラインストア] > [テーマ] に移動します。
2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
3. [ホームページ] ドロップダウンメニューをクリックし、[商品] > [⊕テンプレートを作成する] をクリックします。
4. [テンプレートを作成する] ダイアログで [名前] フィールドに新しいテンプレートの名前 (例：非売品) を入力し、[テンプレートを作成] をクリックします。

5. セクションのメニューサイドバーで [テンプレート] > [商品情報] ブロックの順に移動し、以下の変更を行います。

   1. [数量セレクター] ブロックにカーソルを合わせ、目のアイコンをクリックしてブロックを非表示にします。
   2. [購入ボタン] ブロックにカーソルを合わせ、目のアイコンをクリックしてブロックを非表示にします。
   3. 任意：[価格] ブロックにカーソルを合わせ、目のアイコンをクリックしてブロックを非表示にします。

6. 任意：在庫がない商品の販売再開予定日など、お客様に詳しい情報を提供するためのテキストを商品ページに追加する場合は、以下の手順で新しいブロックを追加してカスタマイズできます。

   1. [商品情報] セクションで、[⊕ブロックを追加する] > [テキスト] の順にクリックしてテキストブロックを追加します。
   2. 新しい [テキストブロック] をクリックし、商品ページの任意の位置にドラッグします。
   3. [テキスト] 設定サイドバーで、[テキスト] フィールドにテキストを追加します。
   4. 希望する [テキストスタイル] を選択します。

7. 任意：お問い合わせフォームを追加する場合は、以下の手順で新しいセクションを商品ページに追加してカスタマイズできます。

   1. [テンプレート] パネルで、[⊕セクションを追加する] > [お問い合わせフォーム] をクリックします。
   2. 新しい [お問い合わせフォーム] をクリックし、商品ページの任意の位置にドラッグします。
   3. [お問い合わせフォーム] 設定サイドバーで、お問い合わせフォームを必要に応じてカスタマイズできます。たとえば、[見出し] のテキストフィールドを編集して、「ウェイトリストに追加するリクエストを送信してください」といったCTAを表示できます。

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

非売品のテンプレートを1個の商品に割り当てる

1. 管理画面から [商品管理] に移動します。
2. [カートに追加する] ボタンを非表示にする商品の名前をクリックします。
3. [テーマテンプレート] セクションで、ドロップダウンメニューをクリックし、[非売品] テンプレートを選択します。
4. [保存] をクリックします。

非売品テンプレートを複数の商品に一括で割り当てる

1. 管理画面から [商品管理] に移動します。
2. [カートに追加する] ボタンを非表示にする商品の横にあるチェックボックスをクリックし、[一括編集] をクリックします。
3. [一括編集] で [列] をクリックし、[テンプレート] をクリックしてエディタの表にテンプレートの列を追加します。
4. 各商品の行で、[テンプレート] をproduct.非売品に設定します。
5. [保存] をクリックします。

すべての商品の [カートに追加する] ボタンを非表示にする

すべての商品の [カートに追加する] ボタンを非表示にする一方で、お客様がオンラインストアを閲覧できるようにする場合は、デフォルトの商品テンプレートをカスタマイズして、既存および今後のすべての商品に変更を適用できます。

ヒント

お客様が商品を購入することも、オンラインストアを閲覧することもできないようにする場合は、パスワードでオンラインストアへのアクセスを制限できます。

手順

1. 管理画面から [オンラインストア] > [テーマ] に移動します。
2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
3. [ホームページ] ドロップダウンメニューをクリックし、[商品] > [デフォルトの商品] の順にクリックします。

4. セクションのメニューサイドバーで [テンプレート] > [商品情報] ブロックの順に移動し、以下の変更を行います。

   1. [数量セレクター] ブロックにカーソルを合わせ、目のアイコンをクリックしてブロックを非表示にします。
   2. [購入ボタン] ブロックにカーソルを合わせ、目のアイコンをクリックしてブロックを非表示にします。
   3. 任意：[価格] ブロックにカーソルを合わせ、目のアイコンをクリックしてブロックを非表示にします。

5. 任意：在庫がない商品の販売再開予定日など、お客様に詳しい情報を提供するためのテキストを商品ページに追加する場合は、以下の手順で新しいブロックを追加してカスタマイズできます。

   1. [商品情報] セクションで、[⊕ブロックを追加する] > [テキスト] の順にクリックしてテキストブロックを追加します。
   2. 新しい [テキストブロック] をクリックし、商品ページの任意の位置にドラッグします。
   3. [テキスト] 設定サイドバーで、[テキスト] フィールドにテキストを追加します。
   4. 希望する [テキストスタイル] を選択します。

6. 任意：お問い合わせフォームを追加する場合は、以下の手順で新しいセクションを商品ページに追加してカスタマイズできます。

   1. [テンプレート] パネルで、[⊕セクションを追加する] > [お問い合わせフォーム] をクリックします。
   2. 新しい [お問い合わせフォーム] をクリックし、商品ページの任意の位置にドラッグします。
   3. [お問い合わせフォーム] 設定サイドバーで、お問い合わせフォームを必要に応じてカスタマイズできます。たとえば、[見出し] のテキストフィールドを編集して、「ウェイトリストに追加するリクエストを送信してください」といったCTAを表示できます。

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