让客户选择一个选项

当客户访问您在线商店中的产品页面时,系统会默认选中第一个可售多属性。您可以使用此自定义设置来停用自动选择第一个可售多属性。这样一来,系统会提示客户手动选择多属性,然后才会显示所选多属性。

选择一个选项

分区模板和未分区模板

备注:本教程的步骤将根据您使用的是分区模板还是未分区模板而有所不同。分区模板支持通过拖放来安排主页的布局,未分区模板则不支持。

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

如果您使用已分区模板,请点击 Sectioned themes(已分区模板)按钮并按照说明进行操作。如果您使用较旧的未分区模板,请点击 Non-sectioned themes(未分区模板)按钮并按照说明进行操作。

适用于分区模板的步骤

选择您的模板

此自定义的步骤因您的模板而异。点击模板的按钮,然后按照以下说明操作:

适用于未分区模板的步骤

向多属性下拉菜单中添加提示符

若要向多属性下拉菜单中添加提示符,请执行以下操作:

  1. Snippets 目录中点击添加新片段
  2. 将新的代码片段命名为 pick-an-option

添加新片段

  1. 在新的片段文件中,粘贴托管在 GitHub 上的此代码
  2. 点击保存
  3. Layout 目录中,点击 theme.liquid
  4. 找到文件底部附近的结束 </body> 标签。在结束 </body> 标签正上方的新代码行中粘贴以下代码:
{% render 'pick-an-option' %}

包括选择一个选项片段

  1. 点击保存
  2. 查找包含添加到购物车窗体的文件。它的 action 属性将已设置为 /cart/add。 它应该是以下四个文件之一:

    • Templates 下的 product.liquid 模板
    • 布局下的 theme.liquid 布局
    • Snippets 下的 product.liquid 片段
    • Snippets 下的 single-product.liquid 片段
  3. 在表中查找此代码:

<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

将其替换为:

<option {% if forloop.length <= 1 and variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
  1. 查找并替换以下代码:
    • Minimal、Pop 或 Supply:如果您使用 Minimal、Pop 或 Supply,请查找此代码的所有匹配项:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

替换为:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
  • 其他免费 Shopify 模板:如果您使用的是任何其他 Shopify 模板,请查找此代码:
{% assign current_variant = product.selected_or_first_available_variant %}

将其替换为:

{% assign current_variant = product.selected_variant %}
  1. 点击保存

更改 Add to cart(添加到购物车)按钮语言设置

您可以更改“添加到购物车”按钮的语言设置,以便在未进行任何选择之前,产品不会显示为“不可售”。

  1. 在 Shopify 后台中,转至在线商店 > 模板
  2. 找到要编辑的模板,然后点击 ... > 编辑默认模板内容
  3. 筛选条件框中,开始键入 unavailable 以显示“不可用”翻译。
  4. 将文本不可用替换为 Make a selection
  5. 点击保存

准备好开始使用 Shopify 进行销售了吗?

免费试用