Question

我在向Shopify商店添加标签式说明时遇到问题，我已尝试过以下选项但没有运气！

第一个问题是我不确定我是否正确使用了分割标记，因为该函数不会提取代码。

其次，选项卡式描述在一个视图中显示所有信息。似乎不是一个盒子格式更多的溢出？

任何帮助都将不胜感激！我不是编码员，但我试了一下。你能帮忙吗？

Product.liquid

选项-1：替换{％section＆＃39; product-template＆＃39; ％}，HTML下面

选项-2：无替换只需添加

要么产品template.liquid

选项-3：替换{％section＆＃39; product-template＆＃39; ％}，HTML下面

选项-4：无替换只需添加

要么产品描述HTML编辑器

选项-5：添加HTML

HTML

<div id="product_tabs">
  <ul>
    <li class="tab_1"><a href="#tabs-1"><h4>Description</h4></a></li>
    <li class="tab_2"><a href="#tabs-2"><h4>Specs</h4></a></li>
    <li class="tab_3"><a href="#tabs-3"><h4>Shipping</h4></a></li>
    <li class="tab_4"><a href="#tabs-4"><h4>Returns/Refunds</h4></a></li>
  </ul>
  <div id="tabs-1">
    {% if product.description contains '<!-- split -->' %} 
      {{ description[0] }} 
    {% else %} 
    <p>No Content</p>
    {% endif %}
  </div>
  <div id="tabs-2">
    {% if product.description contains '<!-- split -->' %} 
      {{ description[1] }}
    {% else %}
      <p>No Content</p>
    {% endif %} 
  </div>
                   <div id="tabs-3">
    {{ pages.shipping-policy.content }}
  </div>
  <div id="tabs-4">
    {{ pages.refund-policy.content }}
  </div>
</div>

CSS 添加到Theme.scss.liquid

#product_tabs > ul {
  list-style: none;
  margin: 0;
}
#product_tabs > ul > li {
  display: inline-block;
  border: 1px solid;
  padding: 10px;
}
#product_tabs > ul > li h4 {
  margin: 0;
}
#product_tabs > ul > li.ui-tabs-active {
  background: #ddd;
}

Answer 1

在我看来似乎没有任何东西使标签处于活动或非活动状态。你忘记发布一些代码吗？如果没有，它解释了为什么一切都在一次显示。如果什么都没有告诉它什么时候显示它将像你描述的那样背靠背显示所有内容。

有关拆分工作的解释，请参阅here。基本上它可以从阵列中拉出来;但是我不知道为什么你的产品描述会是一个数组。

shopify官方帮助中心创建了一个关于制作过去曾为许多人工作的标签的帖子，请参阅here。

HTML标签说明

1 个答案: