買い物を続けるリンクをカートに追加する

カートページに [買い物を続ける] リンクを追加すると、お客様はカートに商品を追加した後、商品の閲覧に簡単に戻ることができるようになります。お客様がカタログページに戻る、ホームページに戻る、または最後に閲覧したコレクションページに戻るためのリンクを選択して追加することができます。

買い物を続ける

カートページに「買い物を続ける」リンクを追加する

次の手順でカートページに [買い物を続ける] リンクを追加します。

  1. [セクション] ディレクトリで、[cart-template.liquid] をクリックします。テーマにこのファイルがない場合、[テンプレート] ディレクトリの [cart.liquid] をクリックします。

  2. ファイルでname="checkout"を検索して、[チェックアウト] ボタンのコードを探します。チェックアウトボタンのコード列はテーマによって異なりますが、次のように表示されます。

<button type="submit" id="checkout" name="checkout" class="btn">
  {{ 'cart.general.checkout' | t }}
</button>
  1. 次のステップでは、[買い物を続ける] リンクを作成する新しいコード列を貼り付けます。貼り付けるコードは、どのページをリンク先にするかによって異なります。

カタログページに移動するリンクの場合

カタログページに移動するリンクを追加するには、[チェックアウト] ボタンのコードの前または後の新しい行に、次のコードを貼り付けます。

<a href="/collections/all" title="Continue shopping">Continue shopping</a>

ホームページに移動するリンクの場合

ホームページに移動するリンクを追加するには、[チェックアウト] ボタンのコードの前または後の新しい行に次のコードを貼り付けます。

<a href="/" title="Continue shopping">Continue shopping</a>

最後に表示したコレクションに移動するリンクの場合

最後に表示したコレクションに移動するリンクを追加するには、[チェックアウト] ボタンのコードの前または後の新しい行に、次のコードを貼り付けます。

<a
  id="continue-shopping"
  href=""
  title="Continue shopping">
  Continue shopping
</a>
  1. [保存] をクリックします。カタログページまたはホームページに移動するリンクを追加した場合はこれで完了となります。最後に表示したコレクションに移動するリンクを追加した場合は、テーマコードにJavaScriptを追加する必要があります。次の手順に進みます。

  2. レイアウトディレクトリーで、theme.liquidをクリックします。

  3. ファイルの末尾の近くにある</body>終了タグを探します</body>終了タグの上に次のコードを貼り付けます。

<script>
  if(Storage !== undefined) {

    var defaultLink = "/collections/all";

    {% if template contains 'collection' %}
      sessionStorage.collection = "{{ collection.url }}";
    {% endif %}

    {% if template contains 'cart' %}
      if( !sessionStorage.collection ) {
        sessionStorage.collection = defaultLink;
      }
      document.getElementById("continue-shopping").href = sessionStorage.collection;
    {% endif %}

    }
</script>
  1. [保存] をクリックします。

ボタンのスタイルを追加する (オプション)

無料のShopifyテーマを使用している場合、[買い物を続ける] リンクにスタイルを適用して、ボタンのようにします。ボタンのリンクのコードにクラス属性を追加することで、そのボタンをテーマ内の他のボタンのスタイルと調和させることができます。すべての無料のShopifyテーマでは、プライマリボタンのスタイルに同じクラス名が使用されており、ほとんどの場合、サブボタンのスタイルでも同じクラス名が使用されています。

プライマリボタンのスタイルを [買い物を続ける] リンクに適用するには、次の手順を実行します。

[買い物を続ける] リンクを追加するために貼り付けたコード列に、class="btn"属性を追加します。コードは次のように表示されます。

<a href="/collections/all" title="Continue shopping" class="btn">
  Continue shopping
</a>

サブボタンのスタイルを「買い物を続ける」リンクに適用するには、次の手順を実行します。

Supplyではない無料のテーマを使用する場合、[買い物を続ける] リンクを追加するために貼り付けたコード列に、class="btn--secondary"属性を追加します。コードは次のように表示されます。

<a href="/collections/all" title="Continue shopping" class="btn--secondary">
  Continue shopping
</a>

Supplyを使用する場合は、[買い物を続ける] リンクを追加するために貼り付けたコードの行にclass="btn-secondary"属性を追加します。コードは次のように表示されます。

<a href="/collections/all" title="Continue shopping" class="btn-secondary">
  Continue shopping
</a>

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

無料体験を試す