如何在不使用APP的Shopify中制作产品描述标签？

问题描述

需要帮助，无需使用APP即可在Shopify中制作产品描述标签。只是使用标题标签，即H4和h5。

我不想在说明区域使用html代码。

解决方法

可以做到的，但是有点麻烦。

1. 在产品说明中添加HTML注释，例如<!--split-->，该注释应位于每个标签的开头，请确保您以编辑器HTML模式添加内容。

<p>tab 1 content</p><!--split-->
<p>tab 2 content</p><!--split-->
<p>tab 3 content</p>

1. 在您的产品模板中，分割产品描述，例如：

{% assign description_tabs = product.description | split: '<!--split-->' %}

1. 遍历description_tabs以呈现每个内容块

{% for tab in description_tabs %}
  <div id="tab-{{forloop.index}}">{{ tab }}</div>
{% endfor %}

您必须编写一些html / css / js才能使它工作，但是这种流畅的代码应该可以使您正常运行。

祝你好运！

,

步骤1：在Shopify信息中心中打开产品编辑器 打开要编辑的产品后，单击文本区域右上角的“查看HTML”按钮。 https://cdn.shopify.com/s/files/1/0783/2131/files/shopify-tabs-minimal-theme-1.jpg?4235358175750708465

第2步：将此代码粘贴到产品说明中 https://cdn.shopify.com/s/files/1/0783/2131/files/shopify-tabs-minimal-theme-2.jpg?8632844864695689229

您的产品现在应如下所示：

第3步：编辑每个标签的标签和内容 我强烈建议从HTML编辑器中而不是使用可视编辑器来编辑标签和内容。这是因为视觉编辑器往往会弄乱您粘贴的HTML代码。

第4步：保存 单击“更新”或“保存”以保存对产品所做的更改。然后继续浏览您网站上的产品，以确保标签正确显示。

希望您一切顺利！如果您有任何问题，请在下面留下评论并说明问题，我们将尽力为您提供帮助。

,

感谢大家的帮助。但是我创建了一个适当的解决方案，希望对您有所帮助。

• 在{％部分'product-template'％}文件中，找到以下代码：

  {{ product.description }}

替换为：

{%- assign product_description_content = product.description -%}

{%-if section.settings.enable_description_tabs -%}
  {%- assign product_description_content = product_description_content | split: '<h6>' | first -%}
{%- endif -%}

{% if product_description_content != '' %}
  <div id="product-description">
    {{ product.description }}
  </div>
{% endif %}

{%-if section.settings.enable_description_tabs and product_description_content == '' -%}
  <div id="product-description">
    {% include 'product-tabs' %}
  </div>
{% endif  %}

• 在架构中，将以下对象添加到设置数组中（以启用/禁用选项卡）：

{"type": "checkbox","id": "enable_description_tabs","label": "Enable Description Tabs","default": true,"info": "Heading 6 titles will be converted to tab headings,tab content will be everything between the Heading 6 titles." }

• 创建一个名为“ product-tabs”的代码段，并将以下代码放入其中： product-tabs.liquid

现在，在Shopify产品描述中，将h6分配给标题，并将内容放在下一行。

Make description as heading

Add h6 tag for heading

我希望这对其他人也有帮助。