shopify设置商店模板和将表单字段设置为必填字段步骤

2024-01-01 14:01:26
By

为配置添加模板设置

  1. 在 Config 目录中,点击 settings_schema.json

  2. 在代码中查找第一个右大括号 },。在右大括号 }, 下方的新行中,粘贴以下代码:

{ "name": "Hear About Us", "settings": [ { "type": "text", "id": "hau_form_options", "label": "Form options", "default": "Facebook, Twitter, Google, Instagram, Youtube", "info": "Separate each option with a comma" }, { "type": "header", "content": "Form validation" }, { "type": "checkbox", "id": "hau_form_validation", "label": "Enable form validation", "default": true }, { "type": "text", "id": "hau_error_message", "label": "Error message", "info": "The error message that is displayed when no selection is made", "default": "Please select an option below" }, { "type": "text", "id": "hau_error_message_other", "label": "Other field error message", "info": "The error message that is displayed when there is no input in the 'Other' field", "default": "Please fill the text field below" }, { "type": "header", "content": "Error styling" }, { "type": "color", "id": "hau_error_color", "label": "Color", "default": "#ff0000" } ] },
  1. 点击保存

将表单字段设置为必填字段

若要防止客户在不选择您是如何了解到我们商店的?表单字段中选项的情况下继续结账,您可以将该字段设置为必填字段。

  1. 在 Sections 目录中,点击 cart-template.liquid。如果您的模板中不包含 cart-template.liquid,请点击 Templates 目录中的 cart.liquid

  2. 在购物车表单字段中查找以下 novalidate 属性:

novalidate
  1. 将 novalidate 属性替换为以下代码:

{% unless settings.hau_form_validation %}novalidate{% endunless %}
  1. 点击保存

  2. 在模板编辑器中,点击侧边栏上的模板设置

  3. 点击了解我们选项卡。

  4. 表单验证下,确保已启用启用表单验证设置。

备注:您可以通过修改错误消息其他字段错误消息文本字段设置来自定义显示的错误消息。您还可以通过更改错误样式下的颜色设置来自定义错误颜色。

Shopify商户官网原文详情:

Include the snippet in your cart page

To include the How did you hear about us? snippet in your cart page:

  1. In the Sections directory, click cart-template.liquid. If your theme doesn't include a cart-template.liquid, then click cart.liquid in the Templates directory.

  2. Find the closing </form> tag in the code. On a new line above the closing </form> tag, paste the following code:

    {% render 'hear-about-us' %}
  3. Click Save.

Add theme settings for configuration

  1. In the Config directory, click settings_schema.json.

  2. Find the first closing curly bracket }, in the code. On a new line below the closing curly bracket },, paste the following code:

    { "name": "Hear About Us", "settings": [ { "type": "text", "id": "hau_form_options", "label": "Form options", "default": "Facebook, Twitter, Google, Instagram, Youtube", "info": "Separate each option with a comma" }, { "type": "header", "content": "Form validation" }, { "type": "checkbox", "id": "hau_form_validation", "label": "Enable form validation", "default": true }, { "type": "text", "id": "hau_error_message", "label": "Error message", "info": "The error message that is displayed when no selection is made", "default": "Please select an option below" }, { "type": "text", "id": "hau_error_message_other", "label": "Other field error message", "info": "The error message that is displayed when there is no input in the 'Other' field", "default": "Please fill the text field below" }, { "type": "header", "content": "Error styling" }, { "type": "color", "id": "hau_error_color", "label": "Color", "default": "#ff0000" } ] },
  3. Click Save.

Make the form field required

To prevent customers from proceeding to the checkout without selecting an option in the How did you hear about us? form field, you can make the field required.

  1. In the Sections directory, click cart-template.liquid. If your theme doesn't include a cart-template.liquid, then click cart.liquid in the Templates directory.

  2. Find the following novalidate attribute in the cart form code:

    novalidate
  3. Replace the novalidate attribute with the following code:

    {% unless settings.hau_form_validation %}novalidate{% endunless %}
  4. Click Save.

  5. In the theme editor, click Theme settings on the sidebar.

  6. Click the Hear About Us tab.

  7. Under Form Validation, make sure the Enable form validation setting is enabled.

文章内容来源:Shopify商户官方网站



(本文内容根据网络资料整理和来自用户投稿,出于传递更多信息之目的,不代表本站其观点和立场。本站不具备任何原创保护和所有权,也不对其真实性、可靠性承担任何法律责任,特此声明!)


常见问答(FQAS)


如何设置商店模板?

登入Shopify管理面板,按照以下步骤设置商店模板:

如何添加表单字段?

登入Shopify管理面板,进入“设置”>“收集客户信息”>“表单”,点击“创建新表单”,添加所需字段。

如何设置表单字段为必填?

创建或者编辑表单字段后,找到“状态”选项,将其设置为“必填”。提交表单前系统会检查必填字段是否已填写。

提交表单后如何获取客户信息?

表单提交后,客户信息会保存到“客户”模块中。您也可以在“设置”>“通知”中设置表单提交后的自动通知。

如何修改已创建的模板?

登入Shopify管理面板,进入“商店设计”模块,选择需要修改的模板进行编辑即可。您可以更改布局、样式、插入新部件等。