发起问题
shopify产品页面添加tabs
在配置模板过程中,有些模板并不支持产品页面多个tabs,产品图片下方只有产品描述。像布鲁克林模板和supply模板均是如此。

但是多个tabs对于产品页面来说是很有必要添加的,可以将产品描述/客户评价/运输规则等在区分的同时不占用过多的页面。用户体验也会好很多。

在浏览过程中发现cupshe网站这个模板做的很好看,也很实用。

查看:cupshe

我将具体代码及安装流程汇总如下,若有需要,可以添加到自己的模板中(安装后具体样式需要自行调整)。
 1. 创建Snippets
          
2. 将如下代码粘贴到创建的文件之中(tabs-eric)
 
<div  class="Product__Tabs">
<div class="Collapsible">
<button class="accordion">SHIPPING标题修改</button>
<div class="panel">
<p>填写你自己的内容</p>
</div>
</div>
<div class="Collapsible">
<button class="accordion">RETURN & EXCHANGE标题可修改</button>
<div class="panel">
<p>填写你自己的内容</p>
</div>
</div>
<div class="Collapsible">
<button class="accordion">CONTACT US标题可修改</button>
<div class="panel">
<p>填写你自己的内容</p>
</div>
</div>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
</script>

 
3. 将如下css代码,放入模板css文件的末尾
button.accordion {
background-color: #fff;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
margin-bottom: 0;
}
.Collapsible {
border-top: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
overflow: hidden;
margin-bottom: -1px;
margin-top: -1px;
box-sizing: border-box !important;
}

button.accordion:after {
content: '\002B';
color: #777;
font-weight: 300;
float: right;
margin-left: 5px;
}

button.accordion.active:after {
content: "\2212";
}

div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.Product__Tabs {
margin: 50px 0;
}


4. 最后,在你想要的位置,插入如下代码
% include 'tabs-eric'%} 

 
效果如下:

 
注意:

插入在产品页面之后,会对所有的产品都生效,所以插入内容应该为产品通用内容,如(运输规则、付款方式、退换货等等)。
因为模板不同,插入后需要调整以适应于自己的模板。
优雅疯姿态 2018/9/4
我来回答
0个回复