shopify添加到购物车按钮中隐藏和显示步骤的核心内容

如果使用禁用购物车备注Shopify 免费模板，您可以联系 Shopify 支持团队获得本教程的帮助。本教程设计时间为 15 分钟。详情请参考Support for themes

shopify添加到购物车按钮中隐藏和显示步骤文本

禁用购物车

备注

如果您使用Shopify 免费模板，您可以联系 Shopify 支持团队获得本教程的帮助。本教程设计时间为 15 分钟。详情请参考Support for themes。

备注

本定义用于复古 Shopify 模板不适用于 模板Online Store 2.0”模板。

找到你的模板架构版本

探索“Online Store 2.0自定义模板

您可以将购物车按钮隐藏在商店中，并在来再次显示。

注：此自定义设置与动态结账按钮不兼容。如果您的模板支持动态结账，请遵循将动态结账按钮隐藏在产品页面上的步骤，以防止显示按钮。

分区模板和未分区模板

注：本教程的步骤将根据您使用的是分区模板还是未分区模板而有所不同。分区模板支持主页的布局，而未分区模板则不支持。

如果您想知道您的模板是否支持分区，请转到模板的编辑代码页面Sections目录中有文件，您正在使用分区模板。未分区模板在 2016年 10 月之前发布Sections目录中没有文件。

若使用已分区模板，请点击Sectioned themes按钮并按说明操作(已分区模板)。如果使用旧的未分区模板，请点击Non-sectioned themes按钮并按说明操作(未分区模板)。

PC:

在 Shopify 后台，转到网店>模板。

找到要编辑的模板，然后点击操作>编辑代码。

在Sections点击打开目录product-template.liquid文件。搜索购物车按钮对应的 HTML 代码。您可以先搜索cart一词。

“添加到购物车”按钮的代码因模板而异。请查找包含Add to cart、AddToCart或add-to-cart类似文本<input>或<button>标记。

苹果系统：

在 Shopify 后台中，转到在线商店>模板。

找到要编辑的模板，然后点击操作>编辑代码。

在Sections点击打开目录product-template.liquid文件。搜索购物车按钮对应的 HTML 代码。您可以先搜索cart一词。

按钮的代码因模板而异。请查找包含Add to cart、AddToCart或add-to-cart类似文本<input>或<button>标记。

安卓系统：

在 Shopify 后台，转到网店>模板。

找到要编辑的模板，然后点击操作>编辑代码。

在Sections点击打开目录product-template.liquid文件。搜索购物车按钮对应的 HTML 代码。您可以先搜索cart一词。

按钮的代码因模板而异。请查找包含Add to cart、AddToCart或add-to-cart类似文本<input>或<button>标记。

在 Debut 模板中添加到购物车按钮的代码如下:

<buttontype="submit"name="add"id="AddToCart-{{section.id}}"{%unlesscurrent_variant.available%}disabled="disabled"{%endunless%}class="btnproduct-form__cart-submit{%ifproduct.options.size==1andproduct.variants[0].title=='DefaultTitle'%}product-form__cart-submit--small{%endif%}"><spanid="AddToCartText-{{section.id}}">{%unlesscurrent_variant.available%}{{'products.product.sold_out'|t}}{%else%}{{'products.product.add_to_cart' |t}}{%endunless%}</span></button>

找到代码后，放入 Liquid{% comment %}和{% endcomment %}标记之间。这将阻止代码显示在您的商店中，但如果您想稍后更改您的新模板，您可以轻松恢复。

Usingtheexampleabove,thenewcodewouldlooklikethis:```liquid{%comment%}<buttontype="submit"name="add"id="AddToCart-{{section.id}}"{%unlesscurrent_variant.available%}disabled="disabled"{%endunless%}class="btnproduct-form__cart-submit{%ifproduct.options.size==1andproduct.variants[0].title=='DefaultTitle'%}product-form__cart-submit--small{%endif%}"><spanid="AddToCartText-{{section.id}}">{%unlesscurrent_variant.available%}{{'products.product.sold_out'|t}}{%else%}{{'products.product.add_to_cart' |t}}{%endunless%}</span></button>{%endcomment%}

注意

Make sure that you don't comment out the<form>tags for your product page. Your comment tags should not surround any<form>or</form>tags,otherwise customers could experience errors when viewing your product page. ```

点击保存确认更改。

当您准备再次显示添加到购物车按钮时，请返回编辑 HTML/CSS 页面上的product-template.liquid删除{% 文件comment %}和{% endcomment %}标记，然后点击保存。

Shopify商户官网原文详情：

Disable your cart

Note

If you use afree 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 toSupport 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 hide yourAdd to cartbuttons on your storefront and reveal them again in the future.

Note

This customization isn't compatible with dynamic checkout buttons. If your theme supports dynamic checkout,then prevent the buttons from showing by following the steps tohide dynamic checkout buttons on product pages.

Sectioned and non-sectioned themes

Note

The steps for this tutorial differ depending on whether you are using asectionedor anon-sectionedtheme. A sectioned theme lets you drag and drop to arrange the layout of your home page,and a non-sectioned theme doesn't.

To figure out whether your theme supports sections,go to the theme'sEdit codepage. If there are files in theSectionsdirectory,you are using a sectioned theme. Non-sectioned themes were released before October 2016,and do not have files in theSectionsdirectory.

If you are using a sectioned theme,click theSectioned themesbutton and follow the instructions. If you are using an older,non-sectioned theme,click theNon-sectioned themesbutton and follow the instructions.

PC：

From your Shopify admin,go toOnline Store>Themes.

Find the theme you want to edit,and then clickActions>Edit code.

In theSectionsdirectory,click to open yourproduct-template.liquidfile.Findthe HTML code for theAdd to cartbutton. You can search for the wordcartas a start.

The code for the add to cart button varies theme to theme. Look for an<input>or<button>tag with text likeAdd to cart,AddToCart,oradd-to-cart.

iPhone：

From theShopify app,tapStore.

In theSales channelssection,tapOnline Store.

TapManage themes.

Find the theme you want to edit,and then clickActions>Edit code.

In theSectionsdirectory,click to open yourproduct-template.liquidfile.Findthe HTML code for theAdd to cartbutton. You can search for the wordcartas a start.

The code for the add to cart button varies theme to theme. Look for an<input>or<button>tag with text likeAdd to cart,AddToCart,oradd-to-cart.

Android：

From theShopify app,tapStore.

In theSales channelssection,tapOnline Store.

TapManage themes.

Find the theme you want to edit,and then clickActions>Edit code.

In theSectionsdirectory,click to open yourproduct-template.liquidfile.Findthe HTML code for theAdd to cartbutton. You can search for the wordcartas a start.

The code for the add to cart button varies theme to theme. Look for an<input>or<button>tag with text likeAdd to cart,AddToCart,oradd-to-cart.

In the Debut theme,the add to cart button code looks like this:

<buttontype="submit"name="add"id="AddToCart-{{section.id}}"{%unlesscurrent_variant.available%}disabled="disabled"{%endunless%}class="btnproduct-form__cart-submit{%ifproduct.options.size==1andproduct.variants[0].title=='DefaultTitle'%}product-form__cart-submit--small{%endif%}"><spanid="AddToCartText-{{section.id}}">{%unlesscurrent_variant.available%}{{'products.product.sold_out'|t}}{%else%}{{'products.product.add_to_cart' |t}}{%endunless%}</span></button>

When you find the code,wrap it in Liquid{% comment %}and{% endcomment %}tags. This will stop the code from being shown on your store,but will let you easily put it back if you want to change your new template later.

Using the example above,the new code would look like this:

{%comment%}<buttontype="submit"name="add"id="AddToCart-{{section.id}}"{%unlesscurrent_variant.available%}disabled="disabled"{%endunless%}class="btnproduct-form__cart-submit{%ifproduct.options.size==1andproduct.variants[0].title=='DefaultTitle'%}product-form__cart-submit--small{%endif%}"><spanid="AddToCartText-{{section.id}}">{%unlesscurrent_variant.available%}{{'products.product.sold_out'|t}}{%else%}{{'products.product.add_to_cart' |t}}{%endunless%}</span></button>{%endcomment%}

Caution

Make sure that you don't comment out the<form>tags for your product page. Your comment tags should not surround any<form>or</form>tags,otherwise customers could experience errors when viewing your product page.

ClickSaveto confirm your changes.

When you are ready to show yourAdd to cartbuttons again,go back to yourproduct-template.liquidfile on theEdit HTML/CSS page,remove the{% comment %}and{% endcomment %}tags,and clickSave.

文章内容来源：Shopify官家官网