Shopify店铺添加标签式描述遇问题，寻求技术协助

Hey there! 我来帮你搞定Shopify产品页的标签式描述问题～

一、先搞定Split标签的调用失效问题 #

首先得明确：Split标签的核心是用特定分隔符把产品描述拆成不同标签页内容，你之前调用失败大概率是分隔符用错或者没正确关联代码。

1. 先在Product.liquid里添加这段拆分逻辑代码：

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

2. 去产品后台编辑描述，在需要拆分的位置插入<!-- split -->（必须是英文符号，前后加换行更易识别），比如：

这是「产品详情」标签的内容

这是「规格参数」标签的内容

这是「售后说明」标签的内容

这样代码就能精准识别拆分点，不会再出现调用失效的情况啦～

二、修复标签页格式混乱+内容溢出问题 #

这部分要靠HTML结构+CSS样式来解决，代码都是复制粘贴就能用的，不用怕复杂：

步骤1：替换Product.liquid里的描述区域代码 #

找到你提到的{% section 'product-template' %}对应的产品描述模块（或者直接找到显示{{ product.description }}的地方），把原有代码替换成下面这段：

<div class="product-tabs">
  <!-- 标签头部按钮组 -->
  <div class="tab-nav">
    {% for tab in tab_content %}
      <button class="tab-btn {% if forloop.first %}active{% endif %}">
        {% if forloop.first %}产品详情{% elsif forloop.index == 2 %}规格参数{% else %}售后说明{% endif %}
      </button>
    {% endfor %}
  </div>
  <!-- 标签内容容器 -->
  <div class="tab-content-container">
    {% for tab in tab_content %}
      <div class="tab-content {% if forloop.first %}active{% endif %}">
        {{ tab }}
      </div>
    {% endfor %}
  </div>
</div>

注：你可以直接修改标签名称，比如把产品详情改成你需要的文字

步骤2：添加CSS样式（关键！解决盒状布局+溢出） #

找到主题里的theme.css或base.css文件，粘贴这段样式代码：

/* 标签页整体盒状容器 */
.product-tabs {
  max-width: 100%;
  margin: 20px 0;
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden; /* 彻底防止内容溢出容器 */
}

/* 标签头部样式 */
.tab-nav {
  display: flex;
  background-color: #f8f8f8;
}

.tab-btn {
  padding: 12px 20px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-weight: 500;
  border-bottom: 2px solid transparent;
}

.tab-btn.active {
  border-bottom-color: #000; /* 激活标签的下划线标记 */
  background-color: #fff;
}

/* 标签内容区域 */
.tab-content-container {
  padding: 20px;
  background-color: #fff;
}

.tab-content {
  display: none; /* 默认隐藏所有非激活标签内容 */
  line-height: 1.6;
}

.tab-content.active {
  display: block; /* 显示当前激活的标签内容 */
}

/* 解决内容溢出：自动换行处理 */
.tab-content p, .tab-content ul {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

步骤3：添加标签切换的JS代码（让标签能点击切换） #

如果点击标签没反应，把这段代码粘贴到Product.liquid的底部（或者theme.liquid的</body>标签之前）：

document.addEventListener('DOMContentLoaded', function() {
  const tabBtns = document.querySelectorAll('.tab-btn');
  const tabContents = document.querySelectorAll('.tab-content');

  tabBtns.forEach((btn, index) => {
    btn.addEventListener('click', () => {
      // 移除所有标签的激活状态
      tabBtns.forEach(b => b.classList.remove('active'));
      tabContents.forEach(c => c.classList.remove('active'));
      // 给当前点击的标签和对应内容添加激活状态
      btn.classList.add('active');
      tabContents[index].classList.add('active');
    });
  });
});

最后检查要点 #

1. 确认产品描述里确实插入了<!-- split -->分隔符
2. 所有代码都正确粘贴到对应文件中
3. 清除浏览器缓存后刷新产品页查看效果

要是还有适配问题，告诉我你用的Shopify主题名称，我再帮你微调细节～

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