所在分类:  Shopify 所属圈子: Shopify

shopify产品页面添加tabs

发帖3次 被置顶0次 被推荐0次 质量分1星 回帖互动4次 历史交流热度5.88% 历史交流深度0%
在配置模板过程中,有些模板并不支持产品页面多个tabs,产品图片下方只有产品描述。像布鲁克林模板和supply模板均是如此。

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

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

查看:cupshe

我将具体代码及安装流程汇总如下,若有需要,可以添加到自己的模板中(安装后具体样式需要自行调整)。
 1. 创建Snippets
          http://oygrm9j0o.bkt.clouddn.com/18-9-4/81791378.jpg
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;
}

http://oygrm9j0o.bkt.clouddn.com/18-9-4/84778019.jpg
4. 最后,在你想要的位置,插入如下代码
% include 'tabs-eric'%} 

 
效果如下:
http://oygrm9j0o.bkt.clouddn.com/18-9-4/64834158.jpg
 
注意:

插入在产品页面之后,会对所有的产品都生效,所以插入内容应该为产品通用内容,如(运输规则、付款方式、退换货等等)。
因为模板不同,插入后需要调整以适应于自己的模板。
已邀请:

极客跨境 - 极客跨境Blog:https://www.geekdtc.com/

赞同来自: huohou

哈哈哈 我们的模板直接在shopify的编辑框输入HTML代码就可以是先多个tables

要回复问题请先登录注册

x 点击咨询