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

为配置添加模板设置

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. 在表单验证下，确保已启用启用表单验证设置。

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

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 ceeding 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. Repla 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.

特别声明：以上文章内容仅代表作者本人观点，不代表ESG跨境电商观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与ESG跨境电商联系。