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

メモ

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

メモ

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

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

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

メモ

このカスタマイズは、動的チェックアウトボタンと互換性がありません。テーマが動的チェックアウトをサポートしている場合、商品ページで動的チェックアウトボタンを非表示にする手順に従ってボタンが表示されないようにします。

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

メモ

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

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

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

---

Sectioned themes

デスクトップ

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

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

iPhone

1. Shopifyアプリから [Store] をタップします。

2. [販売チャネル] セクションで、[オンラインストア] をタップします。

3. [テーマを管理する] をタップします。

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

Android

1. Shopifyアプリから [Store] をタップします。

2. [販売チャネル] セクションで、[オンラインストア] をタップします。

3. [テーマを管理する] をタップします。

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

1. [セクション] ディレクトリで、クリックして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 themes

デスクトップ

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

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

iPhone

1. Shopifyアプリから [Store] をタップします。

2. [販売チャネル] セクションで、[オンラインストア] をタップします。

3. [テーマを管理する] をタップします。

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

Android

1. Shopifyアプリから [Store] をタップします。

2. [販売チャネル] セクションで、[オンラインストア] をタップします。

3. [テーマを管理する] をタップします。

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

1. [テンプレート] ディレクトリで、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 %}のタグを削除し、[保存] クリックします。