社区 发现 Shopify shopify产品页面添加tabs
shopify产品页面添加tabs
但是多个tabs对于产品页面来说是很有必要添加的,可以将产品描述/客户评价/运输规则等在区分的同时不占用过多的页面。用户体验也会好很多。
在浏览过程中发现cupshe网站这个模板做的很好看,也很实用。
查看:cupshe
我将具体代码及安装流程汇总如下,若有需要,可以添加到自己的模板中(安装后具体样式需要自行调整)。
1. 创建Snippets
2. 将如下代码粘贴到创建的文件之中(tabs-eric)
填写你自己的内容
填写你自己的内容
填写你自己的内容
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'%}
效果如下:
注意:
插入在产品页面之后,会对所有的产品都生效,所以插入内容应该为产品通用内容,如(运输规则、付款方式、退换货等等)。
因为模板不同,插入后需要调整以适应于自己的模板。
7 个回复
极客跨境 - 极客跨境Blog:https://www.geekdtc.com/
赞同来自: huohou