Tabs 如何在Shopify中使用out应用程序制作产品描述选项卡？

需要帮助在Shopify with out应用程序中创建产品描述选项卡。只需使用标题标签，即H4和h5

---

我不想在描述区域中使用html代码。

这是可以做到的，但是有点不规范

在产品描述中添加HTML注释，例如

，此注释应位于每个选项卡的开头，请确保在编辑器HTML模式下添加内容

表1内容

表2内容

表3内容

在产品模板中拆分产品描述，如：

您需要编写一些html/css/js来完成这项工作，但这段流动代码应该可以让您启动并运行

---

祝你好运

步骤1：在Shopify仪表板中打开产品编辑器 打开要编辑的产品后，单击文本区域右上角的“查看HTML”按钮。

步骤2：将此代码粘贴到产品描述中

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

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

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

---

我希望你一切顺利！如果您有任何问题，请在下面留下评论，并描述问题，我会尽力帮助您。

谢谢您的帮助。但我已经创造了一个合适的解决方案，我希望它会有所帮助

• 在{%section'产品模板'%}文件中找到以下代码：

  {{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  %}

{%-assign product\u description\u content=product.description-%}
{%-if section.settings.enable_description_tabs-%}
{%-分配产品描述内容=产品描述内容分割：''first-%}
{%-endif-%}
{%if产品描述内容！=''%}
{{product.description}}
{%endif%}
{%-if section.settings.enable_description_选项卡和产品_description_content==''-%}
{%include'产品选项卡'%}
{%endif%}

• 在模式中，在设置数组中追加以下对象（以启用/禁用选项卡）：

{“type”：“checkbox”，“id”：“enable_description_tabs”，“label”：“enable description tabs”，“default”：true，“info”：“标题6标题将转换为选项卡标题，选项卡内容将是标题6标题之间的所有内容”。}

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

现在，在Shopify产品描述中，为标题指定h6，并在下一行输入内容

---

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

您好，谢谢您的回复。我已经尝试了许多这种解决方案，但都不起作用。基本上，我喜欢显示标记基本选项卡。就像任何Shopify应用程序制作标签一样。你能提供一个你想要实现的例子吗？也许是你迄今为止所做工作的代码片段？基本上，我想让标签就像应用程序一样工作。代码不是很好，但我将尝试做一些工作并与您共享GitHub链接。谢谢Hanks Karim的帮助，你可以查看我的答案并给你反馈。谢谢Hanks Ahsan，但我们希望在产品描述中不使用html。此解决方案适用于所有主题。在产品描述中，您只需为标题添加h6标记，下面的文本将成为选项卡内容。

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

{%- 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  %}