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

このページはSep 11, 2024に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-back-linkをご覧ください。

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

買い物を続ける

目次

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

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
  3. [セクション] ディレクトリで、[cart-template.liquid] をクリックします。テーマにこのファイルがない場合、[テンプレート] ディレクトリの [cart.liquid] をクリックします。
  4. ファイルでname="checkout"を検索して、[チェックアウト] ボタンのコードを探します。チェックアウトボタンのコード列はテーマによって異なりますが、次のように表示されます。 
<button type="submit" id="checkout" name="checkout" class="btn">
   {{ 'cart.general.checkout' | t }}
</button>

 5. 次のステップは、新しいコード行を貼り付けて [買い物を続ける] リンクを作成します。貼り付けるコードは、リンク先のページによって異なります： * カタログページに移動するリンクを追加するには、[チェックアウト] ボタンのコードの前または後の新しい行に、以下のコードを貼り付けます。

<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>

 6. [保存] をクリックします。カタログページまたはホームページに移動するリンクを追加した場合、これで完了となります。最後に表示したコレクションに移動するリンクを追加した場合は、テーマコードにJavaScriptを追加する必要があります。引き続き、以下のステップを実行します。

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

 8. ファイルの末尾の近くにある</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>

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

  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
  5. [セクション] ディレクトリで、[cart-template.liquid] をクリックします。テーマにこのファイルがない場合、[テンプレート] ディレクトリの [cart.liquid] をクリックします。
  6. ファイルで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. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
  5. [セクション] ディレクトリで、[cart-template.liquid] をクリックします。テーマにこのファイルがない場合、[テンプレート] ディレクトリの [cart.liquid] をクリックします。
  6. ファイルで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で販売を開始する準備はできていますか?

無料体験を試す