「カートに追加する」をお問い合わせリンクに置き換える

注意

現在、以前のテーマはテーマストアでは提供されていません。以前のテーマには、ShopifyのOnline Store 2.0テーマに含まれている機能が盛り込まれておらず、セキュリティ修正以外のアップデートは行われません。

メモ

Shopifyの無料テーマを使用している場合は、Shopify サポートに連絡すると、このチュートリアルのサポートを受けることができます。設計には15分かかります。Shopifyデザインポリシーについて詳しくはこちらをご覧ください。

メモ

このカスタマイズは以前のShopifyテーマ向けで、Online Store 2.0のテーマには適用されません。

• 使用しているテーマのアーキテクチャバージョンを確認する
• Online Store 2.0のテーマのカスタマイズについて確認する

[カートに追加する] ボタンをメールリンクまたはお問い合わせフォームに置き換えます。たとえば、現在販売されていない商品、または注文するために作成された商品の [カートに追加する] ボタンを置き換えます。

セクション対応のテーマとセクション非対応のテーマ

メモ

このチュートリアルの手順は、「セクション対応」または「セクション非対応」のテーマのどちらを使用しているかによって異なります。セクション対応のテーマを使用している場合は、ドラッグアンドドロップでホームページのレイアウトを配置できます。セクション非対応のテーマを使用している場合は、ドラッグアンドドロップができません。

お使いのテーマがセクションに対応しているかを確認するには、テーマのコードを編集するのページに移動します。セクションディレクトリーにファイルがある場合、セクション対応のテーマを使用していることになります。 セクション非対応のテーマは、2016年10月より前にリリースされており、[セクション] ディレクトリにはファイルがありません。

セクション対応のテーマを使用している場合は、[セクション対応のテーマ] ボタンをクリックして表示される手順に従ってください。セクション非対応の古いテーマを使用している場合は、[セクション非対応のテーマ] ボタンをクリックして表示される手順に従ってください。

セクション対応のテーマの手順

テーマの選択

このカスタマイズの手順は、NarrativeテーマまたはShopifyが作成した他の無料テーマを使用しているかによって異なります。テーマのボタンをクリックしてから、以下の手順に従います。

Narrative

Narrativeで新しい商品テンプレートを作成する

商品の [カートに追加する] ボタンを置き換えるには、その商品のカスタム商品テンプレートを作成する必要があります。

手順：

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

2. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。

3. [テンプレート] ディレクトリで、[新しいテンプレートを追加する] をクリックします。

4. 次の手順で商品テンプレートを作成します。

   • ドロップダウンメニューから [商品] を選択します。
   • テンプレートにrequires-contactと名付けます。
   • [テンプレートを作成する] をクリックします。

5. 以下のコードを探してください。

{% section 'product-template' %}

以下と置き換えます。

{% section 'product-template-requires-contact' %}

このコードを使用すると、新しいテンプレートと次のステップで作成する新しい商品セクションが関連付けられます。

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

新しい商品セクションを作成する

1. [セクション] ディレクトリで、[新たなセクションを追加] をクリックします。

2. 次の手順でセクションを作成します。

   1. 新しいセクションにproduct-template-requires-contactと名付けます。
   2. [セクションを作成] をクリックします。

3. セクションファイルのすべてのデフォルトコードを削除して、ファイルを空にします。

4. [セクション] ディレクトリで、product-template.liquidをクリックします。ファイルのすべてのコンテンツをクリップボードにコピーします。

5. 新しいproduct-template-requires-contact.liquidセクションに戻り、ファイルにコードを貼り付けます。

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

「カートに追加する」ボタンを非表示にする

1. product-template-requires-contact.liquidセクションファイルで、商品ページの [商品フォーム] のHTMLコードを探します。ファイルでformというワードを検索することで見つけることができます。

2. コードを見つけたら、Liquidの{% comment %}と{% endcomment %}タグで囲みます。このようにすると、コードがストアに表示されなくなりますが、後日新しいテンプレートを変更する場合は、簡単に元に戻すことができるようになります。

Narrativeでは、変更されたコードは次のように表示されます。

{% comment %}
{% include 'product-form' %}
{% endcomment %}

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

メールリンクまたはお問い合わせフォームを追加する

[カートに追加する] ボタンが非表示になったので、代わりに表示するコンテンツを追加できます。

メールリンク

お客様のデフォルトのメールプログラムを開き、ストアのお客様向けメールアドレスを宛先に自動入力するメールリンクを追加できます。メールリンクを追加するには、以下の手順に従います。

1. 最後の手順で追加したLiquidの{% endcomment %}タグの下の新しい行に、メールリンクのHTMLコードを追加します。

<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

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

お問い合わせフォーム

テーマのお問い合わせページのテンプレートからコードをコピーすることで、新しい商品テンプレートにお問い合わせフォームを追加できます。次の手順でお問い合わせフォームを追加します。

1. テンプレートディレクトリーで、page.contact.liquidをクリックします。
2. ファイルでLiquid{% form 'contact' %}タグを探します。
3. Liquid{% form 'contact' %}タグからLiquid{% endform %}タグまでのすべてのコードをコピーします。コピーしたコードに、Liquidフォームタグを含めます。
4. [テンプレート] ディレクトリの新しいproduct.requires-contact.liquidファイルに戻ります。

追加したLiquid{% endcomment %}タグの下の新しい行に、お問い合わせフォームのコードを貼り付けます。

1. 次のステップでは、HTML divタグに貼り付けたコードを囲みます。divタグコードにはクラス属性が含まれるため、お問い合わせフォームがページで正しくレンダリングされるようになります。

{% form 'contact' %}の上の新しい行に、次のコードを貼り付けます。

<div class="form-vertical">

{% endform %}の下の新しい行に、次のコードを貼り付けます。

</div>

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

商品に新しいテンプレートを割り当てる

テンプレートが完成したので、[カートに追加する] ボタンを非表示にするすべての商品にテンプレートを割り当てることができます。

1. 管理画面から [商品管理] に移動します。

2. [カートに追加する] ボタンを非表示にする商品の名前をクリックします。

3. 管理画面の商品ページにある [オンラインストア] で、[テーマテンプレート] のドロップダウンメニューから新しいrequires-contactテンプレートを選択します。

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

新しいテンプレートを追加する各商品で、この手順を繰り返します。

Other

新しい商品テンプレートを作成する

商品の [カートに追加する] ボタンを置き換えるには、その商品のカスタム商品テンプレートを作成する必要があります。

手順：

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

2. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。

3. [テンプレート] ディレクトリで、[新しいテンプレートを追加する] をクリックします。

4. 次の手順で商品テンプレートを作成します。

   • ドロップダウンメニューから [商品] を選択します。
   • テンプレートにrequires-contactと名付けます。
   • [テンプレートを作成する] をクリックします。

5. 以下のコードを探してください。

{% section 'product-template' %}

以下と置き換えます。

{% section 'product-template-requires-contact' %}

このコードを使用すると、新しいテンプレートと次のステップで作成する新しい商品セクションが関連付けられます。

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

新しい商品セクションを作成する

1. [セクション] ディレクトリで、[新たなセクションを追加] をクリックします。

2. 次の手順でセクションを作成します。

   1. 新しいセクションにproduct-template-requires-contactと名付けます。
   2. [セクションを作成] をクリックします。

3. セクションファイルのすべてのデフォルトコードを削除して、ファイルを空にします。

4. [セクション] ディレクトリで、product-template.liquidをクリックします。ファイルのすべてのコンテンツをクリップボードにコピーします。

5. 新しいproduct-template-requires-contact.liquidセクションに戻り、ファイルにコードを貼り付けます。

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

「カートに追加する」ボタンを非表示にする

1. 新しいproduct-template-requires-contact.liquidセクションファイルで、商品ページの [カートに追加する] ボタンのHTMLコードを探します。ファイルでcartというワードを検索することで見つけることができます。

[カートに追加する] ボタンのコードは、テーマによって異なります。Add to cart、AddToCart、add-to-cartなどのテキスト付きの<input>または<button>のタグを探します。

Debutでは、[カートに追加する] ボタンのコードは次のように表示されます。

<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>

1. コードを見つけたら、Liquidの{% comment %}と{% endcomment %}タグで囲みます。このようにすると、コードがストアに表示されなくなりますが、後日新しいテンプレートを変更する場合は、簡単に元に戻すことができるようになります。

Debutでは、変更されたコードは次のように表示されます。

{% comment %}
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>
{% endcomment %}

注意

商品ページの<form>タグをコメントアウトしないようにします。コメントタグは<form>や</form>のタグを囲んではなりません。囲んでしまうと、お客様が商品ページを表示する際にエラーが発生する可能性があります。

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

メールリンクまたはお問い合わせフォームを追加する

[カートに追加する] ボタンが非表示になったので、代わりに表示するコンテンツを追加できます。

メールリンク

お客様のデフォルトのメールプログラムを開き、ストアのお客様向けメールアドレスを宛先に自動入力するメールリンクを追加できます。メールリンクを追加するには、以下の手順に従います。

1. 最後の手順で追加したLiquidの{% endcomment %}タグの下の新しい行に、メールリンクのHTMLコードを追加します。

<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

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

お問い合わせフォーム

テーマのお問い合わせページのテンプレートからコードをコピーすることで、新しい商品テンプレートにお問い合わせフォームを追加できます。次の手順でお問い合わせフォームを追加します。

1. テンプレートディレクトリーで、page.contact.liquidをクリックします。
2. ファイルでLiquid{% form 'contact' %}タグを探します。
3. Liquid{% form 'contact' %}タグからLiquid{% endform %}タグまでのすべてのコードをコピーします。コピーしたコードに、Liquidフォームタグを含めます。
4. [セクション] ディレクトリの新しいproduct-template-requires-contact.liquidファイルに戻ります。
5. ファイルで</form>終了タグを探します。</form>終了タグの下の新しい行に、お問い合わせフォームのコードを貼り付けます。
6. 次のステップでは、HTML divタグに貼り付けたコードを囲みます。divタグコードにはクラス属性が含まれるため、お問い合わせフォームがページで正しくレンダリングされるようになります。

{% form 'contact' %}の上の新しい行に、次のコードを貼り付けます。

<div class="form-vertical"></div>

{% endform %}の下の新しい行に、次のコードを貼り付けます。

</div>

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

商品に新しいテンプレートを割り当てる

テンプレートが完成したので、[カートに追加する] ボタンを非表示にするすべての商品にテンプレートを割り当てることができます。

1. 管理画面から [商品管理] に移動します。

2. [カートに追加する] ボタンを非表示にする商品の名前をクリックします。

3. 管理画面の商品ページにある [オンラインストア] で、[テーマテンプレート] のドロップダウンから新しいrequires-contactテンプレートを選択します。

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

新しいテンプレートを追加する各商品で、この手順を繰り返します。

セクション非対応のテーマの手順

新しい商品テンプレートを作成する

商品の [カートに追加する] ボタンを置き換えるには、その商品のカスタム商品テンプレートを作成する必要があります。

手順：

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

2. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。

3. [テンプレート] ディレクトリで、[新しいテンプレートを追加する] をクリックします。

4. 次の手順で商品テンプレートを作成します。

   • ドロップダウンメニューから [商品] を選択します。
   • テンプレートにrequires-contactと名付けます。
   • [テンプレートを作成する] をクリックします。

「カートに追加する」ボタンを非表示にする

1. 新しいproduct.requires-contact.liquidファイルで、[カートに追加する] ボタンのHTMLコードを探します。cartのワードで検索します。

[カートに追加する] ボタンのコードは、テーマによって異なります。Add to cart、AddToCart、add-to-cartなどのテキスト付きの<input>または<button>のタグを探します。

Debutでは、[カートに追加する] ボタンのコードは次のように表示されます。

<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>

1. コードを見つけたら、Liquidの{% comment %}と{% endcomment %}タグで囲みます。このようにすると、コードがストアに表示されなくなりますが、後日新しいテンプレートを変更する場合は、簡単に元に戻すことができるようになります。

Debutでは、変更されたコードは次のように表示されます。

{% comment %}
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>
{% endcomment %}

注意

商品ページの<form>タグをコメントアウトしないようにします。コメントタグは<form>や</form>のタグを囲んではなりません。囲んでしまうと、お客様が商品ページを表示する際にエラーが発生する可能性があります。

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

メールリンクまたはお問い合わせフォームを追加する

[カートに追加する] ボタンが非表示になったので、代わりに表示するコンテンツを追加できます。

メールリンク

1. 最後の手順で追加したLiquidの{% endcomment %}タグの下の新しい行に、メールリンクのHTMLコードを追加します。

Please <a href="mailto:{{ shop.email }}">contact us</a> if you are
interested in this product.

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

お問い合わせフォーム

テーマのお問い合わせページのテンプレートからコードをコピーすることで、新しい商品テンプレートにお問い合わせフォームを追加できます。次の手順でお問い合わせフォームを追加します。

1. テンプレートディレクトリーで、page.contact.liquidをクリックします。
2. ファイルでLiquid{% form 'contact' %}タグを探します。
3. Liquid{% form 'contact' %}タグからLiquid{% endform %}タグまでのすべてのコードをコピーします。コピーしたコードに、Liquidフォームタグを含めます。
4. [テンプレート] ディレクトリの新しいproduct.requires-contact.liquidファイルに戻ります。
5. ファイルで</form>終了タグを探します。</form>終了タグの下の新しい行に、お問い合わせフォームのコードを貼り付けます。
6. 次のステップでは、HTML divタグに貼り付けたコードを囲みます。divタグコードにはクラス属性が含まれるため、お問い合わせフォームがページで正しくレンダリングされるようになります。

{% form 'contact' %}の上の新しい行に、次のコードを貼り付けます。

<div class="form-vertical"></div>

{% endform %}の下の新しい行に、次のコードを貼り付けます。

</div>

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

商品に新しいテンプレートを割り当てる

テンプレートが完成したので、[カートに追加する] ボタンを非表示にするすべての商品にテンプレートを割り当てることができます。

1. 管理画面から [商品管理] に移動します。

2. [カートに追加する] ボタンを非表示にする商品の名前をクリックします。

3. 管理画面の商品ページにある [オンラインストア] で、[テーマテンプレート] のドロップダウンから新しいrequires-contactテンプレートを選択します。

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

新しいテンプレートを追加する各商品で、この手順を繰り返します。