Shopify 是一个流行的电子商务平台,为商家提供了丰富的功能和定制选项。其中,在购物车页面添加"继续购物"链接是一个常见的需求,可以让客户在将商品加入购物车后轻松返回浏览其他商品。本文将详细介绍在 Shopify 购物车页面添加这一功能的步骤。

将"继续购物"链接添加至购物车页面

要在 Shopify 购物车页面添加"继续购物"链接,可以按照以下步骤操作:

1. 登录 Shopify 后台,进入"在线商店 - 模板"页面。

2. 找到要编辑的模板,点击"操作 - 编辑代码"。

3. 在"Sections"目录中,找到"cart-template.liquid"文件(如果没有此文件,则在"Templates"目录中找到"cart.liquid")。

4. 在结账按钮的代码行附近,添加以下代码来创建"继续购物"链接:

- 指向目录页面的链接:

```html

Continue shopping

```

- 指向主页的链接:

```html

Continue shopping

```

- 指向上一个查看的产品系列的链接:

```html

Continue shopping

```

5. 如果添加了指向上一个查看的产品系列的链接,还需要在 theme.liquid 文件的结束 body 标签之前添加以下 JavaScript 代码:

```javascript

[removed]

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

}

[removed]

```

6. 保存更改并查看您的购物车页面,您应该能看到新添加的"继续购物"链接。

设置按钮样式(可选)

如果您使用的是 Shopify 的免费模板,您还可以为"继续购物"链接添加按钮样式,使其与模板中其他按钮的样式保持一致。可以通过在链接代码中添加类属性来实现。

应用主要按钮样式:

Continue shopping

```

应用辅助按钮样式:

```html

Continue shopping

```

- 对于 Supply 主题:

```html

Continue shopping

```

常见问题 FAQs

问: 如何在 Shopify 购物车页面添加"继续购物"链接?

答: 具体步骤如下:

1. 登录 Shopify 后台,进入"在线商店 - 模板"页面。

2. 找到要编辑的模板,点击"操作 - 编辑代码"。

3. 在"Sections"目录中,找到"cart-template.liquid"文件(如果没有此文件,则在"Templates"目录中找到"cart.liquid")。

4. 在结账按钮的代码行附近,添加相应的"继续购物"链接代码。

5. 如果添加了指向上一个查看的产品系列的链接,还需要在 theme.liquid 文件中添加对应的 JavaScript 代码。

6. 保存更改并查看您的购物车页面。

问: 如何设置"继续购物"链接的按钮样式?

答: 可以通过在链接代码中添加类属性来设置按钮样式,使其与模板中其他按钮的样式保持一致。

应用主要按钮样式: `Continue shopping`

• 应用辅助按钮样式:

- 对于 Supply 主题: `Continue shopping`