如何在没有APP的情况下在Shopify中制作产品描述标签？

Question

需要帮助在没有 APP 的情况下在 Shopify 中制作产品描述标签。只是为了使用标题标签，即 H4 和 h5。

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

Answer 1

可以做到，但是有点hacky。

在您的产品描述中添加 HTML 评论，例如 ，此评论应位于每个选项卡的开头，确保您在编辑器 HTML 模式下添加您的内容

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

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

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

循环 description_tabs 以呈现每个内容块

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

您将不得不编写一些 html/css/js 来完成这项工作，但这段流式代码应该会让您振作起来运行。

祝你好运！

Answer 2

第 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 步：保存单击“更新”或“保存”以保存您对产品所做的更改。然后继续查看您网站上的产品，确保标签正确显示。

希望您一切顺利！如果您有任何问题，请在下方留言并说明问题，我会尽力提供帮助。

Answer 3

感谢大家的帮助。但我已经创建了一个合适的解决方案，希望它能有所帮助。

在 {% section '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  %}

在架构中，将以下 object 添加到设置数组中（到 Enable/Disable 选项卡）：

{"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

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

如何在没有APP的情况下在Shopify中制作产品描述标签？

How to make product description tabs in Shopify with out APP?

tabs

product

shopify

shopify-template