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

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

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

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

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

管理画面から [オンラインストア] > [テーマ] の順に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

Shopifyアプリから [Store] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

Shopifyアプリから [Store] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

[セクション] ディレクトリで、[cart-template.liquid] をクリックします。テーマにこのファイルがない場合、[テンプレート] ディレクトリの [cart.liquid] をクリックします。
ファイルでname="checkout"を検索して、[チェックアウト] ボタンのコードを探します。チェックアウトボタンのコード列はテーマによって異なりますが、次のように表示されます。

<button type="submit" id="checkout" name="checkout" class="btn">
  {{ 'cart.general.checkout' | t }}
</button>

次のステップでは、[買い物を続ける] リンクを作成する新しいコード列を貼り付けます。貼り付けるコードは、どのページをリンク先にするかによって異なります。

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

### For a link that goes to your home page

To add a link that goes to your home page, paste the following code on a new line either before or after the code for the **Checkout** button:

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

### For a link that goes to the last collection viewed

To add a link that goes to the last collection viewed, paste the following code on a new line either before or after the code for the **Checkout** button:

<a
  id="continue-shopping"
  href=""
  title="Continue shopping">
  Continue shopping
</a>

[保存] をクリックします。カタログページまたはホームページに移動するリンクを追加した場合はこれで完了となります。最後に表示したコレクションに移動するリンクを追加した場合は、テーマコードにJavaScriptを追加する必要があります。次の手順に進みます。
レイアウトディレクトリーで、theme.liquidをクリックします。
ファイルの末尾の近くにある</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>

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

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

無料の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で販売を開始する準備はできていますか?