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

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

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

デスクトップ

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
[セクション] ディレクトリで、[cart-template.liquid] をクリックします。テーマにこのファイルがない場合、[テンプレート] ディレクトリの [cart.liquid] をクリックします。
ファイルで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. [保存する] をクリックします。

iPhone

Shopifyアプリで [...] ボタンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
[セクション] ディレクトリで、[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>

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

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

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

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

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

Android

Shopifyアプリで [...] ボタンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
[セクション] ディレクトリで、[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>

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

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

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

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