国产成人剧情av麻豆果冻,国产无遮挡又爽又黄的视频,天天躁夜夜躁狠狠躁婷婷,性色香蕉av久久久天天网,真人性生交免费视频

所在分類:  Shopify 所屬圈子: Shopify

shopify產(chǎn)品頁面添加tabs

發(fā)帖3次 被置頂0次 被推薦0次 質(zhì)量分1星 回帖互動(dòng)4次 歷史交流熱度5.88% 歷史交流深度0%
在配置模板過程中,有些模板并不支持產(chǎn)品頁面多個(gè)tabs,產(chǎn)品圖片下方只有產(chǎn)品描述。像布魯克林模板和supply模板均是如此。

但是多個(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
? ? ? ? ??http://oygrm9j0o.bkt.clouddn.com/18-9-4/81791378.jpg
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;
}

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

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

插入在產(chǎn)品頁面之后,會(huì)對所有的產(chǎn)品都生效,所以插入內(nèi)容應(yīng)該為產(chǎn)品通用內(nèi)容,如(運(yùn)輸規(guī)則、付款方式、退換貨等等)。
因?yàn)槟0宀煌?,插入后需要調(diào)整以適應(yīng)于自己的模板。
已邀請:

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

贊同來自: huohou

哈哈哈 我們的模板直接在shopify的編輯框輸入HTML代碼就可以是先多個(gè)tables
要回復(fù)問題請先登錄注冊

加入賣家社群
關(guān)注公眾號(hào)
加入線下社群
廣告 ×
10s