社區(qū) 發(fā)現(xiàn) Shopify shopify產(chǎn)品頁面添加tabs
shopify產(chǎn)品頁面添加tabs
但是多個(gè)tabs對于產(chǎn)品頁面來說是很有必要添加的,可以將產(chǎn)品描述/客戶評(píng)價(jià)/運(yùn)輸規(guī)則等在區(qū)分的同時(shí)不占用過多的頁面。用戶體驗(yàn)也會(huì)好很多。
在瀏覽過程中發(fā)現(xiàn)cupshe網(wǎng)站這個(gè)模板做的很好看,也很實(shí)用。
查看:cupshe
我將具體代碼及安裝流程匯總?cè)缦?,若有需要,可以添加到自己的模板?安裝后具體樣式需要自行調(diào)整)。
?1. 創(chuàng)建Snippets
? ? ? ? ??

2.?將如下代碼粘貼到創(chuàng)建的文件之中(tabs-eric)
?
填寫你自己的內(nèi)容
填寫你自己的內(nèi)容
填寫你自己的內(nèi)容
?
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'%}
?
效果如下:

?
注意:
插入在產(chǎn)品頁面之后,會(huì)對所有的產(chǎn)品都生效,所以插入內(nèi)容應(yīng)該為產(chǎn)品通用內(nèi)容,如(運(yùn)輸規(guī)則、付款方式、退換貨等等)。
因?yàn)槟0宀煌?,插入后需要調(diào)整以適應(yīng)于自己的模板。
7 個(gè)回復(fù)
極客跨境 - 極客跨境Blog:https://www.geekdtc.com/
贊同來自: huohou