如何在产品标题下方添加项目符号形式的短描述？

1. 纯HTML/CSS实现 #

直接在标题标签后插入无序列表，搭配简单样式优化排版：

<!-- 产品标题 -->
<h2 class="product-title">XX无线蓝牙耳机</h2>
<!-- 项目符号短描述 -->
<ul class="product-short-desc">
  <li>续航长达30小时</li>
  <li>IPX5级防水</li>
  <li>支持主动降噪</li>
</ul>

添加基础样式让布局更协调：

.product-short-desc {
  margin: 8px 0 16px 0;
  padding-left: 20px;
  list-style-type: disc; /* 项目符号样式 */
}
.product-short-desc li {
  margin-bottom: 4px;
  font-size: 14px;
  color: #666;
}

2. Shopify平台实现 #

• 进入后台产品管理，打开目标产品的编辑页
• 在描述编辑区，先确认标题显示正常，再点击编辑器的「项目符号列表」按钮，逐条输入短描述内容
• 若需要更灵活的自定义效果，可在主题代码的product-template.liquid文件中，找到标题输出位置，添加以下代码（需先在产品页创建多文本自定义字段short_desc_bullets）：

<h1>{{ product.title }}</h1>
{% if product.metafields.custom.short_desc_bullets %}
  <ul class="product-bullets">
    {% for bullet in product.metafields.custom.short_desc_bullets | split: "\n" %}
      <li>{{ bullet }}</li>
    {% endfor %}
  </ul>
{% endif %}

3. 自定义电商系统开发（PHP/Node.js示例） #

• 在产品数据库表中新增short_bullets字段，存储以逗号或换行分隔的描述内容
• 前端渲染时读取字段内容并拆分，生成无序列表：

// PHP示例
$productTitle = "XX智能手表";
$shortBullets = explode(',', "心率监测,睡眠分析,15天续航");
?>
<h2><?php echo $productTitle; ?></h2>
<ul>
  <?php foreach($shortBullets as $bullet): ?>
    <li><?php echo $bullet; ?></li>
  <?php endforeach; ?>
</ul>

内容的提问来源于stack exchange，提问作者Muhammad Azeem