Shopify产品描述如何设置折叠展示？

在跨境电商独立站中，产品描述可能包含材质、规格、使用方法等信息。内容较长时，可以通过“可折叠行”展示，让客户点击标题后再查看详情。设置时，需要先补充产品描述的调用代码，再到主题编辑器中添加对应区块。

一、为什么要将Shopify产品描述设置为折叠展示？

产品描述折叠后，页面默认显示标题，客户需要了解详细内容时再点击展开。这样可以减少长篇描述默认占用的页面空间，同时保留完整介绍，方便客户按需阅读。

如果产品页面还有配送说明、保养方法等内容，也可以分别安排在不同折叠行中。建议使用明确的标题，让客户知道每一行展示什么，不必反复展开查找。

1、备份主题，打开代码编辑器

在Shopify独立站后台打开在线商店的主题管理页面，先复制需要修改的主题，在副本中操作。找到副本的操作菜单，选择“编辑代码”。Shopify建议编辑代码前创建备份，方便需要时重新开始。

2、添加产品描述调用代码

在sections文件夹中打开main-product.liquid，搜索block.settings.content。确认找到的是collapsible_tab折叠区块中的内容输出位置，不要直接修改其他搜索结果。Dawn在这里会输出折叠行文字和关联页面内容。

在该内容输出代码的上方添加以下代码，保留原有输出代码，然后保存。

{% if block.settings.page.content == blank and block.settings.content == blank %}
{{ product.description }}
{% endif %}

3、按需设置产品描述默认展开

如果希望客户进入产品页时直接看到描述，可以设置默认展开；希望保持收起状态，则跳过这一步。

找到同一折叠区块的<details>开始标签，在结束符号>之前加入下面的判断，保留原来的其他属性。此写法同样只在文字和关联页面内容均为空时添加open属性。

{% if block.settings.page.content == blank and block.settings.content == blank %} open{% endif %}

4、在产品页面添加“可折叠行”

回到同一个主题副本的可视化编辑器，切换到需要调整的产品模板。在左侧“产品信息”区域点击“添加块”，选择“可折叠行”。

Shopify

5、填写标题，保持内容为空

将标题设置为Description，图标按页面需要选择。“行内容”保持为空，也不要选择关联页面，让前面添加的代码读取产品描述。如果填写了文字或选择了有内容的页面，就会显示相应内容。

Shopify

6、保存并检查展示效果

保存设置后，在电脑端和手机端预览，检查展开、收起，以及描述中的图片、列表和链接。如果出现重复描述，检查原来的“描述”区块是否仍在显示，以及是否存在多个空内容折叠行。

确认效果符合需要后，再发布修改后的主题。后续仍在产品后台维护描述，无需将每款产品的介绍重复填写到折叠行中。

1、为什么Shopify产品描述折叠后没有显示内容？

先检查产品后台是否填写了描述，再确认调用代码是否添加正确。按照本教程设置时，折叠行的文字内容和关联页面都应留空，才能触发产品描述的显示。

2、为什么Shopify产品描述在页面中出现了两次？

可能是原来的描述区块仍在显示，也可能有多个空内容折叠行同时调用了产品描述。检查产品模板，保留一个描述展示位置即可，不需要删除产品后台的描述。

3、Shopify不同产品使用同一个折叠模板，会显示相同描述吗？

使用本教程的代码时，折叠行会读取当前产品各自的描述。多个产品可以共用模板，同时展示不同的产品介绍。

4、Shopify产品描述可以默认展开吗？

可以。对于本教程使用的折叠结构，可以通过设置对应details标签的open属性实现默认展开。修改时应限定到产品描述这一行，避免其他折叠内容也一起展开。

5、修改Shopify产品描述后，需要重新设置折叠行吗？

如果折叠行通过本教程代码读取产品描述，就不需要重新设置。保存产品后台的描述修改后，折叠区域会读取更新后的内容。