延譽(yù)寶SaaS云軟件為電商和會(huì)員系統(tǒng)搭建提供了豐富的所見即所得的設(shè)置選項(xiàng),特使是對(duì)于商城首頁的排版設(shè)計(jì),除了基礎(chǔ)設(shè)置項(xiàng)之外,商城運(yùn)營推廣過程中,還可以通過增加自定義HTML代碼,讓H5商城實(shí)現(xiàn)個(gè)性化首頁定制。
設(shè)置路徑: 延譽(yù)寶SaaS云>>商城設(shè)置>>商城模板>>首頁模板選項(xiàng)>>HTML代碼內(nèi)容
傳送門:一鍵直達(dá) https://yanyubao.tseo.cn/Supplier/Index/shop_index/setting_type/index_option.html
前提:啟用模板26 。
“通版商城V2”的富媒體組件也支持HTML代碼的二次渲染,除了JavaScript代碼,其他部分都兼容,在APP和小程序中都可以自由定制歡迎界面。
可以在這里增加自定義HTML代碼,實(shí)現(xiàn)商城首頁的個(gè)性化展示。
以下是部分設(shè)置案例推薦:
示例01:實(shí)現(xiàn)商城首頁任意排版
可以通過HTML代碼中引入圖片,實(shí)現(xiàn)商城首頁的任意排版。考慮SEO因素,也可以直接嵌入文本內(nèi)容。
代碼如下,因?yàn)橐龅蕉鄰垐D片的無縫拼接,所以這里代碼中不要換行:
<img src=”https://img.alicdn.com/imgextra/i4/791260090/O1CN018L30uZ1CXGGAgNl0v_!!791260090.png” alt=”” style=”width:100%;” /><img src=”https://img.alicdn.com/imgextra/i2/791260090/O1CN01rVO30Z1CXGGFtVdBO_!!791260090.png” alt=”” style=”width:100%;” /><img src=”https://img.alicdn.com/imgextra/i1/791260090/O1CN01PzE6LJ1CXGGNq77fS_!!791260090.png” alt=”” style=”width:100%;” /><img src=”https://img.alicdn.com/imgextra/i1/791260090/O1CN01OnQPYn1CXGGBZ1yAe_!!791260090.png” alt=”” style=”width:100%;” /><img src=”https://img.alicdn.com/imgextra/i2/791260090/O1CN018oJlXL1CXGGCm4aYt_!!791260090.png” alt=”” style=”width:100%;” /><img src=”https://img.alicdn.com/imgextra/i3/791260090/O1CN01xzGJ8W1CXGG8aHgXZ_!!791260090.png” alt=”” style=”width:100%;” /><img src=”https://img.alicdn.com/imgextra/i4/791260090/O1CN01RGs74b1CXGGAgPETG_!!791260090.png” alt=”” style=”width:100%;” /><img src=”https://img.alicdn.com/imgextra/i3/791260090/O1CN01CAZzZM1CXGGBhc58P_!!791260090.png” alt=”” style=”width:100%;” /><img src=”https://img.alicdn.com/imgextra/i2/791260090/O1CN01j9IpCL1CXGG2u40Rk_!!791260090.png” alt=”” style=”width:100%;” /><img src=”https://img.alicdn.com/imgextra/i4/791260090/O1CN01aGyghJ1CXGGESqBhz_!!791260090.png” alt=”” style=”width:100%;” /><img src=”https://img.alicdn.com/imgextra/i3/791260090/O1CN01L7Zx7v1CXGGGCc163_!!791260090.png” alt=”” style=”width:100%;” /><img src=”https://img.alicdn.com/imgextra/i3/791260090/O1CN01olDXqc1CXGGB3xThq_!!791260090.png” alt=”” style=”width:100%;” /><img src=”https://img.alicdn.com/imgextra/i2/791260090/O1CN01QOn6Zp1CXGGB3ysyA_!!791260090.png” alt=”” style=”width:100%;” />
示例02:實(shí)現(xiàn)商城首頁的跑馬燈
本案例實(shí)現(xiàn)在商城的頂部實(shí)現(xiàn)跑馬燈效果,展示最近成交的訂單信息,是商城促銷的一種方式。
代碼如下:
<div style="display: none;position: absolute; top: 50px; left: 20px; z-index:1000;color:#fff;" id='divTestDisplay'>我要顯示的文字</div> <script type="text/javascript"> var ad_list =['新訂單來自FR.A 4分鐘前~', '新訂單 來自你來自何方 7分鐘前', '新訂單 來自玲玲玲玲A 9分鐘前']; console.log(ad_list); window.onload = function () { setTimeout(show, 500); } //顯示 function show() { // 獲取隨機(jī)數(shù) var rand = Math.floor( Math.random() * ad_list.length ); console.log('====>>>'+rand ); var data_str = ad_list[rand]; console.log('====>>>'+data_str ); document.getElementById('divTestDisplay').innerHTML = data_str; document.getElementById('divTestDisplay').style.display = "block"; setTimeout(hide, 1000); } //隱藏 function hide() { document.getElementById('divTestDisplay').style.display = "none"; setTimeout(show, 1000); } </script>
更多示例:持續(xù)更新中
免費(fèi)商城系統(tǒng)為基礎(chǔ)會(huì)員提供了H5商城和小程序商城模板,也是商城APP的開發(fā)基礎(chǔ),不同平臺(tái)共用一個(gè)后臺(tái)。跳轉(zhuǎn)原文地址:http://www.yhowl.cn/2468.html? ?持續(xù)關(guān)注后續(xù)商城自定義HTML精彩案例更新。
最近更新
- 網(wǎng)站轉(zhuǎn)APP,WordPress轉(zhuǎn)小程序,安卓蘋果微信百度支付寶抖音全平臺(tái)小程序
- 小程序和APP在線開發(fā)制作說明:超過100個(gè)設(shè)置選項(xiàng)自動(dòng)生成企業(yè)官網(wǎng)/商城網(wǎng)站/拼團(tuán)秒殺分銷/智能建站2.0
- DeepSeek能用來做小程序嗎?答案都在這兒!
- 延譽(yù)小工單軟件產(chǎn)品介紹和使用幫助
- 物聯(lián)網(wǎng)的底層通信與應(yīng)用案例深度剖析
- 企業(yè)網(wǎng)站與商城 APP 開發(fā):AI 助力有限,程序員地位難撼
- 電腦端登錄忘記密碼怎么辦?
- 國際版進(jìn)銷存軟件:不容忽視的多重弊端
- 獨(dú)立站熱度不減,谷歌百度排名依然堅(jiān)挺
- 獨(dú)立站技術(shù)方案:WordPress三合一企業(yè)網(wǎng)站建設(shè)