登录
开始免费试用

向购物车页面添加“继续购物”链接

您可以将继续购物链接添加到购物车页面，使客户在将产品添加到购物车后可快速返回浏览产品。您可以选择添加一个链接，用于将客户定向回目录页面、您的主页或他们之前查看的最后一个产品系列页面。

继续购物

本页相关主题

向购物车页面添加“继续购物”链接

桌面
  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
  3. 在 Sections 目录中，点击 cart-template.liquid。如果您的模板中没有此文件，则点击 Templates 目录中的 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. 在 Layout 目录中，点击 theme.liquid。

 8. 在文件底部附近查找结束 </body> 标记。将以下代码粘贴到结束 </body> 标记上方：

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


var defaultLink = &#x22;/collections/all&#x22;;

{% if template contains &#x27;collection&#x27; %}
  sessionStorage.collection = &#x22;{{ collection.url }}&#x22;;
{% endif %}

{% if template contains &#x27;cart&#x27; %}
  if( !sessionStorage.collection ) {
    sessionStorage.collection = defaultLink;
  }
  document.getElementById(&#x22;continue-shopping&#x22;).href = sessionStorage.collection;
{% endif %}

}
</script>

 9. 点击保存。

iPhone
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，点击在线商店。
  3. 点击管理模板。
  4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
  5. 在 Sections 目录中，点击 cart-template.liquid。如果您的模板中没有此文件，则点击 Templates 目录中的 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. 在 Layout 目录中，点击 theme.liquid。
  3. 在文件底部附近查找结束 </body> 标记。将以下代码粘贴到结束 </body> 标记上方：
<script>
  if(Storage !== undefined) {


var defaultLink = &#x22;/collections/all&#x22;;

{% if template contains &#x27;collection&#x27; %}
  sessionStorage.collection = &#x22;{{ collection.url }}&#x22;;
{% endif %}

{% if template contains &#x27;cart&#x27; %}
  if( !sessionStorage.collection ) {
    sessionStorage.collection = defaultLink;
  }
  document.getElementById(&#x22;continue-shopping&#x22;).href = sessionStorage.collection;
{% endif %}

}
</script>
  1. 点击保存。
Android
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，点击在线商店。
  3. 点击管理模板。
  4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
  5. 在 Sections 目录中，点击 cart-template.liquid。如果您的模板中没有此文件，则点击 Templates 目录中的 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. 在 Layout 目录中，点击 theme.liquid。
  3. 在文件底部附近查找结束 </body> 标记。将以下代码粘贴到结束 </body> 标记上方：
<script>
  if(Storage !== undefined) {


var defaultLink = &#x22;/collections/all&#x22;;

{% if template contains &#x27;collection&#x27; %}
  sessionStorage.collection = &#x22;{{ collection.url }}&#x22;;
{% endif %}

{% if template contains &#x27;cart&#x27; %}
  if( !sessionStorage.collection ) {
    sessionStorage.collection = defaultLink;
  }
  document.getElementById(&#x22;continue-shopping&#x22;).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>
没有找到您需要的答案？我们将为您提供帮助。