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

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

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

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

テーマの選択

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

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

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

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

手順:

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
  3. [テンプレート] ディレクトリで、[新しいテンプレートを追加する] をクリックします。
  4. 次の手順で商品テンプレートを作成します。
    • ドロップダウンメニューから [商品] を選択します。
    • テンプレートにrequires-contactと名付けます。
    • [テンプレートを作成する] をクリックします。

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

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

[カートに追加する] ボタンのコードは、テーマによって異なります。Add to cartAddToCartadd-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 %}
  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. [保存] をクリックします。

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

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

無料体験を試す