shopify购物车页面添加“继续购物”链接办法
向购物车页面添加“继续购物”链接
备注
若是您使用 Shopify 的免费模板，，，， ， ，您可以联系 Shopify 支持团队获得关于此教程的资助。。。。。 。此教程需要 15 分钟的设计时间。。。。。 。若要相识详情，，，， ， ，请参阅 Support for themes。。。。。 。
备注
此自界说用于复古 Shopify 模板，，，， ， ，不适用于“Online Store 2.0”模板。。。。。 。
找到您的模板架构版本
探索“Online Store 2.0”模板自界说
您可以将继续购物链接添加到购物车页面，，，， ， ，使客户在将产品添加到购物车后可轻松返回浏览产品。。。。。 。您可以选择添加一个链接，，，， ， ，用于将客户定向回目录页面、您的主页或他们之前审查的最后一个产品系列页面。。。。。 。
向购物车页面添加“继续购物”链接
若要向您的购物车页面添加继续购物链接，，，， ， ，请执行以下操作：
PC：
在 Shopify 后台中，，，， ， ，转到在线市肆 > 模板。。。。。 。
找到要编辑的模板，，，， ， ，然后点击操作 > 编辑代码。。。。。 。
在 Sections 目录中，，，， ， ，点击
cart-template.liquid。。。。。 。若是您的模板中没有此文件，，，， ， ，则点击 Templates 目录中的cart.liquid。。。。。 。通过搜索
name="checkout"的文件来查找结账按钮的代码。。。。。 。结账按钮的代码行因模板而异，，，， ， ，但会如下所示：
<button type="submit" id="checkout" name="checkout" class="btn"> {{ 'cart.general.checkout' | t }} </button>下一步是粘贴新的代码行以建设继续购物链接。。。。。 。您粘贴的代码将取决于您希望链接转到的页面：
苹果系统：
在 Shopify 应用中，，，， ， ，轻触市肆。。。。。 。
在销售渠道部分中，，，， ， ，轻触在线市肆。。。。。 。
轻触 Manage themes（治理模板）。。。。。 。
找到要编辑的模板，，，， ， ，然后点击操作 > 编辑代码。。。。。 。
在 Sections 目录中，，，， ， ，点击
cart-template.liquid。。。。。 。若是您的模板中没有此文件，，，， ， ，则点击 Templates 目录中的cart.liquid。。。。。 。通过搜索
name="checkout"的文件来查找结账按钮的代码。。。。。 。结账按钮的代码行因模板而异，，，， ， ，但会如下所示：
<button type="submit" id="checkout" name="checkout" class="btn"> {{ 'cart.general.checkout' | t }} </button>下一步是粘贴新的代码行以建设继续购物链接。。。。。 。您粘贴的代码将取决于您希望链接转到的页面：
安卓系统：
在 Shopify 应用中，，，， ， ，轻触市肆。。。。。 。
在销售渠道部分中，，，， ， ，轻触在线市肆。。。。。 。
轻触 Manage themes（治理模板）。。。。。 。
找到要编辑的模板，，，， ， ，然后点击操作 > 编辑代码。。。。。 。
在 Sections 目录中，，，， ， ，点击
cart-template.liquid。。。。。 。若是您的模板中没有此文件，，，， ， ，则点击 Templates 目录中的cart.liquid。。。。。 。通过搜索
name="checkout"的文件来查找结账按钮的代码。。。。。 。结账按钮的代码行因模板而异，，，， ， ，但会如下所示：
<button type="submit" id="checkout" name="checkout" class="btn"> {{ 'cart.general.checkout' | t }} </button>下一步是粘贴新的代码行以建设继续购物链接。。。。。 。您粘贴的代码将取决于您希望链接转到的页面：
关于指向目录页面的链接
若要添加指向目录页面的链接，，，， ， ，请将下方代码粘贴到结账按钮对应代码之前或之后的新行中：
<a href=/channel/"/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。。。。。 。然后继续凭证后续办法操作。。。。。 。
在 Layout 目录中，，，， ， ，点击
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>
若要向“继续购物”链接应用辅助按钮样式，，，， ， ，请执行以下操作：
备注：添加此类对 Boundless 没有影响。。。。。 。
若是您使用的是 Supply 以外的免费模板，，，， ， ，请将属性 class="btn--secondary" 添加到您已粘贴的代码行中，，，， ， ，以便添加继续购物链接。。。。。 。您的代码应如下所示：
<a href=/channel/"/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商户官网原文详情：
Add a continue shopping link to your cart
Note
If you use a free theme from Shopify, then you might be able to contact Shopify Support for help with this tutorial. It requires 15 minutes of design time. To learn more, refer to Support for themes.
Note
This customization is for vintage Shopify themes, and doesn't apply to Online Store 2.0 themes.
Find out your theme's architecture version
Explore Online Store 2.0 theme customizations
You can add a Continue shopping link to your cart page that allows customers to easily return to browsing products after adding something to the cart. You can choose to add a link that will take customers back to your catalog page, back to your home page, or back to the last collection page that they were looking at.
Add a Continue shopping link to your cart page
To add a Continue shopping link to your cart page:
PC:
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
In the Sections directory, click
cart-template.liquid. If your theme doesn't have this file, then clickcart.liquidin the Templates directory.Find the code for the Checkout button by searching the file for
name="checkout". The line of code for the checkout button varies theme to theme, but will look something like this:<button type="submit" id="checkout" name="checkout" class="btn"> {{ 'cart.general.checkout' | t }} </button>The next step is to paste a new line of code to create a Continue shopping link. The code that you paste will depend on which page you would like the link to go to:
For a link that goes to your catalog page
To add a link that goes to your catalog page, paste the following code on a new line either before or after the code for the Checkout button:
<a href=/channel/"/collections/all" title="Continue shopping">Continue shopping</a>iPhone：
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
In the Sections directory, click
cart-template.liquid. If your theme doesn't have this file, then clickcart.liquidin the Templates directory.Find the code for the Checkout button by searching the file for
name="checkout". The line of code for the checkout button varies theme to theme, but will look something like this:<button type="submit" id="checkout" name="checkout" class="btn"> {{ 'cart.general.checkout' | t }} </button>The next step is to paste a new line of code to create a Continue shopping link. The code that you paste will depend on which page you would like the link to go to:
For a link that goes to your catalog page
To add a link that goes to your catalog page, paste the following code on a new line either before or after the code for the Checkout button:
<a href=/channel/"/collections/all" title="Continue shopping">Continue shopping</a>Android：
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
In the Sections directory, click
cart-template.liquid. If your theme doesn't have this file, then clickcart.liquidin the Templates directory.Find the code for the Checkout button by searching the file for
name="checkout". The line of code for the checkout button varies theme to theme, but will look something like this:<button type="submit" id="checkout" name="checkout" class="btn"> {{ 'cart.general.checkout' | t }} </button>The next step is to paste a new line of code to create a Continue shopping link. The code that you paste will depend on which page you would like the link to go to:
For a link that goes to your catalog page
To add a link that goes to your catalog page, paste the following code on a new line either before or after the code for the Checkout button:
<a href=/channel/"/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>Click Save. If you added a link that goes to either your catalog page or your home page, then you are done. If you added a link that goes to the last collection viewed, then you will need to add some JavaScript to your theme code. Continue to follow the next steps.
In the Layout directory, click
theme.liquid.Find the closing
</body>tag, near the bottom of the file. Paste the following code above the closing</body>tag:<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>Click Save.
Add button styling (optional)
If you use a free Shopify theme, then you can apply styling to your Continue shopping link to make it look like a button. By adding a class attribute to the code for your button link, you can make your button match the style of the other buttons in your theme. All free Shopify themes use the same class name for primary button styles, and most use the same class name for secondary button styles.
To apply primary button styling to your Continue shopping link:
Add the attribute
class="btn"to the line of code that you pasted to add a Continue shopping link. Your code should look like this:<a href="/collections/all" title="Continue shopping" class="btn"> Continue shopping </a>To apply secondary button styling to your Continue shopping link:
Note
Adding this class will not have an effect on Boundless.
If you use a free theme that is not Supply, then add the attribute
class="btn--secondary"to the line of code that you pasted to add a Continue shopping link. Your code should look like this:<a href=/channel/"/collections/all" title="Continue shopping" class="btn--secondary"> Continue shopping </a>If you use Supply, then add the attribute
class="btn-secondary"to the line of code that you pasted to add a Continue shopping link. Your code should look like this:<a href="/collections/all" title="Continue shopping" class="btn-secondary"> Continue shopping </a>
文章内容泉源：Shopify商户官方网站