[カートに追加する] ボタンを非表示にする

ストアフロントで [カートに追加する] ボタンを非表示にし、将来再び表示することができます。

注意

これは高度なチュートリアルであり、Shopifyでは対応していません。HTML、CSS、JavaScript、Liquidといったウェブデザイン言語の知識が必要です。以下のチュートリアルを実行するのが不安な場合は、Shopifyパートナーを雇う ことをおすすめします。

注意

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

メモ

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

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

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

メモ

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

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

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

Sectioned

1. 管理画面から [オンラインストア] > [テーマ] に移動します。
2. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
3. [セクション] ディレクトリで、クリックしてproduct-template.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 %}タグで囲みます。このようにすると、コードがストアに表示されなくなりますが、後日新しいテンプレートを変更する場合は、簡単に元に戻すことができるようになります。

上記の例を使用すると、新しいコードは次のようになります。

{% 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. [保存] をクリックして変更を確定します。

[カートに追加する] ボタンを再び表示する準備が整ったなら、[HTML/CSSの編集ページ] のproduct-template.liquidファイルに戻り、{% comment %}タグと{% endcomment %}のタグを削除し、[保存] をクリックします。

Non-sectioned

1. 管理画面から [オンラインストア] > [テーマ] に移動します。
2. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
3. [テンプレート] ディレクトリで、product.liquidファイルをクリックして開きます。[カートに追加する] ボタンのHTMLコードを探します。最初にcartというワードを検索します。

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

Minimalテーマでは、「カートに追加する」ボタンのコードは次のように表示されます。

<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>

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

上記の例を使用すると、新しいコードは次のようになります。

{% comment %}
<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% endcomment %}

注意

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

1. [保存] をクリックして変更を確定します。

[カートに追加する] ボタンを再び表示する準備が整ったら、[HTML/CSSの編集ページ] のproduct.liquidテンプレートに戻り、{% comment %}および{% endcomment %}のタグを削除し、[保存] をクリックします。