10亿+海关交易数据,1.2亿企业数据,2亿+企业联系人数据,1000千万真实采购商。覆盖200+个国家及地区,95%外贸重点拓展市场,可根据行业、经营范围等多方位挖掘目标客户。
免费试用您可以在店面中隐藏添加到购物车按钮,并在将来再次显示这些按钮。
备注:此自定义设置与动态结账按钮不兼容。如果您的模板支持动态结账,请按照在产品页面上隐藏动态结账按钮的步骤来阻止显示按钮。
备注:本教程的步骤将根据您使用的是分区模板还是未分区模板而有所不同。分区模板支持通过拖放来安排主页的布局,未分区模板则不支持。
如果想了解您的模板是否支持分区,请转到模板的编辑代码页面。如果 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 模板中,“添加到购物车”按钮的代码如下所示:
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}"> <span id="AddToCartText-{{ section.id }}"> {% unless current_variant.available %} {{ 'products.product.sold_out' | t }} {% else %} {{ 'products.product.add_to_cart' | t }} {% endunless %} </span> </button>
找到代码后,将它放入 Liquid {% comment %}
和 {% endcomment %}
标记之间。这将会阻止该代码在您的商店中显示,但如果您想稍后更改您的新模板,您可以轻松将其恢复。
Using the example above, the new code would look like this: ``` liquid {% comment %} <button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}"> <span id="AddToCartText-{{ section.id }}"> {% unless current_variant.available %} {{ 'products.product.sold_out' | t }} {% else %} {{ 'products.product.add_to_cart' | t }} {% endunless %} </span> </button> {% endcomment %}
点击保存以确认更改。
当您准备好再次显示添加到购物车按钮时,请返回到编辑 HTML/CSS 页面上的 product-template.liquid
文件,删除 {% comment %}
和 {% endcomment %}
标记,然后点击保存。
Shopify商户官网原文详情:
Disable your cart
You can hide your Add to cart buttons on your storefront and reveal them again in the future.
Sectioned and non-sectioned themes
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 to open your
product-template.liquid
file. Find the HTML code for the Add to cart button. You can search for the word cart as 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 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 to open your
product-template.liquid
file. Find the HTML code for the Add to cart button. You can search for the word cart as 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 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 to open your
product-template.liquid
file. Find the HTML code for the Add to cart button. You can search for the word cart as 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:
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}"> <span id="AddToCartText-{{ section.id }}"> {% unless current_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 %} <button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}"> <span id="AddToCartText-{{ section.id }}"> {% unless current_variant.available %} {{ 'products.product.sold_out' | t }} {% else %} {{ 'products.product.add_to_cart' | t }} {% endunless %} </span> </button> {% endcomment %}
Click Save to confirm your changes.
When you are ready to show your Add to cart buttons again, go back to your
product-template.liquid
file on the Edit HTML/CSS page, remove the{% comment %}
and{% endcomment %}
tags, and click Save.
文章内容来源:Shopify商户官方网站
(本文内容根据网络资料整理和来自用户投稿,出于传递更多信息之目的,不代表本站其观点和立场。本站不具备任何原创保护和所有权,也不对其真实性、可靠性承担任何法律责任,特此声明!)
许多商店采用购物车按钮会自动隐藏和显示的设计,这可以避免按钮一直在页面顶部占用空间。当用户将产品添加到购物车时,按钮会显示;当购物车为空时,按钮会隐藏。这通常可以让用户界面看起来更简洁。
如何手动控制购物车按钮是否显示?有些主题可能允许你在自定义设置里控制购物车按钮是否默认显示。你也可以使用一些插件来控制按钮,比如通过用户行为(如鼠标移动)来决定是否显示。如果主题不支持,你可能需要编写一些自定义代码来实现更细粒度的控制。
把产品加入购物车后按钮为什么还会短暂显示?为了给用户更佳的体验反馈,许多主题设置购物车按钮在添加产品成功后会短暂显示几秒钟,然后再隐藏。这可以让用户清楚地知道产品已经成功添加到购物车。一般重载页面后按钮也会立即显示一下再隐藏。