ECSHOP,模版功能weshop_rwd PRO 響應式模板是專為 ECShop V2.7.3 繁體中文版響應式設計(Responsive Web Design),本站提供免費版下載,weshop_rwd PRO 能提昇訪客體驗度、下單率與回鍋率,管理者只需維護一套模板可節省大量時間,方便的後台設定只需動動滑鼠即可瞬間完成功能修改,簡繁自動轉換功能讓兩岸三地瀏覽無障礙 we-shop.net_ECSHOP 繁體中文版-響應式模板-虛擬主機::ECSHOP2.7.3繁體中文全支援-原來如此
weshop_rwd 響應式模板是專為 ECShop V2.7.3 繁體中文版響應式設計(Responsive Web Design),本站主機用戶免費獨享,weshop_rwd 能提昇訪客體驗度、搜索排行、網頁收錄,是網路開店最佳選擇,www.we-shop.net" />
目前位置: 首頁 > ECSHOP響應式模版

文章列表

ECSHOP響應式模板網路開店
ECSHOP響應式模板網路開店 2017-01-11
在經濟不景氣中,多數人都因為錯誤的政策而生活陷入苦境,公司更是關門的關門、裁員的裁員、減薪的減薪,可以預見的是這個年大家都不好過,因外日常開銷越來越重薪水卻越來越少,年紀輕的或許可以靠多找幾份工作補回來,年紀稍長的萬一被裁員可能就要註定失業了,這些人通常肩負家庭經濟重責大任,如此一來無疑是雪上加霜,難道就只能接受嗎?當然不是... 在電子商務崛起的年代裡,網路提供給沒有工作、無法外出工作或想兼職... 閱讀全文...
26、ECSHOP製作無限級響應式導航與垂直選單
26、ECSHOP製作無限級響應式導航與垂直選單 2017-03-10
由於ECSHOP與 jquery 的衝突,有些人可能對修改程式有些困,因此分享一下不依賴JQUERY的無限級響應式導航與垂直選單Script,這個腳本是純JS製作的,無論水平或垂直選單,都支援無限級響應式,在中大螢幕下滑鼠經過自動展開選單,手機則變成點擊展開並搭配滑動效果,在Bootstrap中要製作無限級選單不容易,但使用 ddlevelsmenu 這個JS腳本就可以輕易實現,不一定要用JQUE... 閱讀全文...
25、ECSHOP + Bootstrap3 製作多圖滾動首頁主廣告
25、ECSHOP + Bootstrap3 製作多圖滾動首頁主廣告 2017-03-03
使用依賴 jquery 的 owl.carousel 插件為網站的首頁主廣告,特點是可以多圖展示並輪播,使用不同寬度的圖片或視頻也不會變形,因為圖片不需太大,可加快手機載入速度,你也可以調用網站的促銷商品... index.dwt : <link href="{$tpl}css/owl.carousel.min.css" rel="stylesheet" type="text/css... 閱讀全文...
24、ECSHOP + Bootstrap3 製作響應式導航欄 + 源碼
24、ECSHOP + Bootstrap3 製作響應式導航欄 + 源碼 2017-03-01
許多人在修改響應式模板時,經常在不同尺寸間的布局無法適當地排版,特別是由資料庫取出的資料,因此建議如果你的網站已經穩定,可以將某部份資料改成靜態方式,例如底下的導航欄: HTML: <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"... 閱讀全文...
23、RWD響應式網頁設計- Ecshop DONE 完成訂單
23、RWD響應式網頁設計- Ecshop DONE 完成訂單 2017-02-13
比起其他頁面,結算中心的完成頁面算是簡單了,主要還是在於如何呈現,相信大家都有一份自己的藍圖,程式碼包涵了實體與虛擬商品的結算,如果你沒有虛擬商品的交易,當然這部份可以省略: <!-- 訂單送出成功 --> <div class=""> <table class="table"> <tr> <th class="tex... 閱讀全文...
22、RWD響應式網頁設計- Ecshop 結算中心
22、RWD響應式網頁設計- Ecshop 結算中心 2017-02-04
結算中心包涵商品列表、收貨人訊息、商品包裝、祝福賀卡、寄件方式、付款方式、 附言、餘額、紅包、缺貨處理、費用總計 多個區塊,為了避免頁面過於冗長,我將相同性質的功能以TAB形式表現,你也可以將用不到的區塊隱藏或乾脆刪除,讓整個頁面更簡潔: <!-- 開始訂單確認界面 --> <style type="text/css"> .modify {color: yello... 閱讀全文...
21、RWD響應式網頁設計- Ecshop 登入與收件地址
21、RWD響應式網頁設計- Ecshop 登入與收件地址 2017-01-14
當消費者確定進入結算中心時,可選登入、註冊或直接購買(視後台設定),若是會員登入且之前有購買紀錄,就會直接轉入結帳頁面,否則會與直接購買一樣轉入收件人填寫頁面,若是已登入會員則收件人資料將會自動寫入資料庫,供下次購買使用: <div class="row"> <div class="col-md-6"> <h3 class="text-cente... 閱讀全文...
20、RWD響應式網頁設計- flow 購買清單列表
20、RWD響應式網頁設計- flow 購買清單列表 2017-01-05
ECSHOP的購買清單列表(flow.php?step=cart)包括購買清單、我的收藏、商品相關配件、優惠活動四個表格,不過我看過有些模板只用了購買清單而已,我的收藏、商品相關配件卻省略了,雖然這樣不影響網站運作,不過可能在不知覺中損失了許多訂單: <div class="row"> <div class="col-md-12 flow... 閱讀全文...
19、RWD響應式網頁設計- flow 增加步驟提示
19、RWD響應式網頁設計- flow 增加步驟提示 2016-12-25
ECSHOP 的步驟是用來判斷應該顯示哪段HTML,你可以增加提示以便告訴消費者結帳有哪些步驟以及目前的步驟,lativ 原本模板都是使用圖片,但是在響應式模板裡應該儘可能的不使用圖片,以便加快網頁的顯示,因此除了將重複的程式碼集中外,並使用 BootStrap 的進度調,前後的差別如圖: <div class="flow_step text-center"&g... 閱讀全文...
18、RWD響應式網頁設計- flow 結帳頁面
18、RWD響應式網頁設計- flow 結帳頁面 2016-12-23
ECSHOP 的結帳頁面(flow.dwt)包含購物清單、登入與註冊、收貨地址、結算中心 、訂單完成等步驟,所以頁面冗長是一定的,還是一樣的作法,將每個步驟抽出來成單一的LBI,修改的時候只需針對個別的LBI即可,就算出錯也能清楚看出錯誤的位置: <body> <!-- #BeginLibraryItem "/library/page_header.... 閱讀全文...
17、RWD響應式網頁設計- goods 商品描述和其他
17、RWD響應式網頁設計- goods 商品描述和其他 2016-12-11
商品詳情頁(goods.dwt)的下半部有商品描述、商品屬性、超值組合、商品標記 、購買記錄、商品評論、相同外觀樣式的商品、相關商品、瀏覽歷史,為了讓頁面不至於過長,因此使用TAB的方式,但是TAB在超小螢幕時,還是可能受寬度限制,因此配合下拉選單,使用 hidden-xs 可以讓元素在超小營幕時隱藏,visible-xs 則相反,效果如圖: <div class="&quo... 閱讀全文...
16、RWD響應式網頁設計- goods 圖片和文字資訊
16、RWD響應式網頁設計- goods 圖片和文字資訊 2016-12-07
商品詳情頁(goods.dwt)程式碼蠻多的,很容易就搞錯,因此還是建議將程式碼分區塊獨立出來,不但能降低出錯率,就算出錯了也很容易找出錯誤位置,另外關於一開始提到的 ecshop 修改使用 jquery 的方法,過程中還是會發生衝突問題,除非你有能力解決,否則請參考 ecshop 如何正確使用 jquery ? 商品詳情頁(goods.dwt)經過整理後就比較容易閱讀了,下列的程式碼尚未... 閱讀全文...
15、RWD響應式網頁設計-category 商品分類頁
15、RWD響應式網頁設計-category 商品分類頁 2016-12-02
在開始商品分類頁(category.dwt)的RWD響應式網頁設計之前,還是要提醒大家,DWT必須先將網頁整體排版布局好,而LBI(區塊)可能由多個DWT調用,因此只需負責自己的樣式即可,如果樣只供該LBI使用可直接寫在檔案中,以減少style.css的檔案大小,過程中請多參考>官方文件 為了方便判別目前頁面,請在 includes/lib_main.php 的 $smarty-... 閱讀全文...
14、RWD響應式網頁設計-index 網站幫助與友情連結
14、RWD響應式網頁設計-index 網站幫助與友情連結 2016-11-28
網站幫助與友情連結這兩個區塊可以放在網頁的任何位置,或任何頁面上,只要將CSS調整好即可,所以我將檔案分成 help.lbi 和 links.lbi 方便調用,其實還有一個底部導航,我希望它全站顯示因此直接寫到 page_footer.lbi 了,: <!-- #BeginLibraryItem "/library/help.lbi" --><!-- ... 閱讀全文...
13、RWD響應式網頁設計-index 首頁的右側邊欄
13、RWD響應式網頁設計-index 首頁的右側邊欄 2016-11-28
ECSHOP 首頁剩下的區塊都放在側邊欄了,你應該只放需要用到的區塊以減低伺服器負擔,因為與主區域的布局不太一樣,因此另外使用側邊欄共用的CSS樣式設定,共用的樣式設定也是放在 style.css 裡方便引用,建議不要設置可編輯區域(除非是公用模板),否則能造成自己困擾,如需調整區塊順序可以直接移動代碼,側邊欄在中大螢幕時佔用3格寬度,小螢幕則佔全寬並移到主區域下方,因此需留意不同的寬度變化: ... 閱讀全文...
12、RWD響應式網頁設計-首頁調用新品、熱賣、精品、分類商品
12、RWD響應式網頁設計-首頁調用新品、熱賣、精品、分類商品 2016-11-27
ECSHOP的首頁新品、熱賣、精品、分類商品(recommend_new.lbi、recommend_hot.lbi、recommend_best.lbi、cat_goods.lbi)四個區塊的內容結構大同小異,因此可以使用相同的CSS樣式設定,共用的樣式設定都要放在 style.css 裡方便引用,順道一提的是如果你設置了可編輯區域,需要留意不同寬度的響應結果,主區我放了主廣告和新品、熱賣、精品... 閱讀全文...
11、RWD響應式網頁設計-首頁調用主廣告圖片輪播
11、RWD響應式網頁設計-首頁調用主廣告圖片輪播 2016-11-23
ECSHOP的首頁主廣告圖片輪播(index_ad.lbi)自帶的是使用FLASH播放器,但是FLASH播放器在手機上是無法播放的,所以必須使用純 javascript 來控制,如果你使用了 jquery 插件,請留意 jquery 版本和插件載入位置,要在首頁調用主廣告圖片輪播請使用如下語法: <!-- #BeginLibraryItem "/library/index_... 閱讀全文...
10、RWD響應式網頁設計-DWT調用商品分類樹
10、RWD響應式網頁設計-DWT調用商品分類樹 2016-11-23
商品分類樹(category_tree.lbi)會有多個DWT調用,所以獨立成一個LBI,在DWT如果要調用他,可以使用: <!-- #BeginLibraryItem "/library/category_tree.lbi" --><!-- #EndLibraryItem --> 如果在LBI要調用他,則必須使用: {includ... 閱讀全文...
9、RWD響應式網頁設計-index 首頁
9、RWD響應式網頁設計-index 首頁 2016-11-21
RWD響應式網頁設計教學其實適用在任何網站,只是有些人因為不懂HTML與CSS,自然做起來就有點吃力,RWD響應式網頁設計不過就是將寬度用CSS的媒體查詢來自動調整,其他的樣式並不需要改變,只要懂得簡單的HTML和CSS3應該就沒太大問題,很多指令不需要死記,準備好手冊隨時待查即可... 在動態網站裡除了前面提過的頁首和頁尾之外,就剩下內容區了,頁首和頁尾整個網站共用,但是網頁內容是隨著頁面... 閱讀全文...
8、ECSHOP響應式網頁製作-footer 頁面底部資訊
8、ECSHOP響應式網頁製作-footer 頁面底部資訊 2016-11-20
footer 是每個頁面的底部,由 page_footer.lbi 負責,和 header 一樣共用於每個網頁,因此你只需修改 page_footer.lbi ,整個網站的網頁底部也會跟著改變,footer 包含網站版權文字、其他訊息與客服資訊,你也可以加入自訂的文字或圖片,現在用瀏覽器(建議 FireFox) 開啟本機的網站首頁,用文字編輯器(建議 sublime Text) 開啟 page... 閱讀全文...
7、ECSHOP響應式網頁製作-header 中間導航欄
7、ECSHOP響應式網頁製作-header 中間導航欄 2016-11-19
當你在後台設置了中間導航欄之後,在頁面中便能看到選單,並且自動根據瀏覽器寬度做出響應,下圖是PC和手機的差異: 中間導航欄的基本程式碼如下,這是 BootStrap 的組件,大部分情況下只需照樣複製貼上即可,然後將選單的程式碼放到 ul 裡面,類似這樣: <nav class="navbar navbar-inverse" role="na... 閱讀全文...
6、ECSHOP響應式網頁製作-header LOGO、會員資訊、商品搜索
6、ECSHOP響應式網頁製作-header LOGO、會員資訊、商品搜索 2016-11-18
LOGO與會員資訊、商品搜索我把他分成左右兩邊,當然你也可以分成上下,會員資訊和商品搜索之間有一列自訂連結,是模版本來就有的,連結上的 ICON 在小螢幕時隱藏起來,避免太太高,另外由於寬度關係,文字的顯示長度也必須控制 補充一下:BootStrap 在 768px 時寬度都是100%,因此在指定元素尺寸時,盡量使用百分比而不是固定像素,對於圖片的高度或寬度只需指定其中一種,CSS會... 閱讀全文...
5、ECSHOP響應式網頁製作-header 頂部導航
5、ECSHOP響應式網頁製作-header 頂部導航 2016-11-15
我是以 lativ 模板作為教學依據,不太可能與你模板相同,因此只能當作參考,每個模板都有自己的布局方式,只要能掌握 BootStrap 的特性就能隨心所欲,因為響應式網頁是為了增加對移動設備(如:手機、平板)的友好度而設計,但移動設備載入速度遠不及PC,因此除了商品圖片無法避免外,應該盡量能不用圖片最好,或是使用SVG 格式的向量圖... 整個 header 的布局就像圖中看到的一樣,首先... 閱讀全文...
4、ECSHOP響應式網頁製作-BootStrap 簡單布局
4、ECSHOP響應式網頁製作-BootStrap 簡單布局 2016-11-14
ECSHOP 基本的模板檔(DWT)大約36個,加上樣板檔(LBI)約58個,如果再將DWT中的某些區塊再抽出來成為LBI,那肯定超過100個,因此修改為響應式網頁會花很多時間,在過程中不可能針對每個頁面詳細說明,只能針對幾個常用頁面提供個人的作法,或許不是正確,如果你有更好的作法,歡迎指正,感謝萬分! header 是每個頁面的頂部,通常是主導航格以上的區域,由 page_header.l... 閱讀全文...
3、ECSHOP響應式網頁製作-引入 BootStrap 響應式前端框架
3、ECSHOP響應式網頁製作-引入 BootStrap 響應式前端框架 2016-11-13
載入 BootStrap 可以用CDN的方式也可以將檔案放在自己的空間,我是放在自己的空間然後載入檔案,若要用CDN的方式就不用將檔案放在自己的空間裡,直接引用即可,不管你使用的是哪種方式,請先將DOCTYPE改成HTML5,作法如下: 將每個 dwt 標頭前四行 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E... 閱讀全文...
2、ECSHOP響應式網頁製作-檢查是否可用 jquery
2、ECSHOP響應式網頁製作-檢查是否可用 jquery 2016-11-13
因為大部分響應式前端框架都必須依賴 jquery,因此你的網站也必須能用 jquery,才能順利使用 BootStrap 來製作響應式網頁,這篇教學主要是確認你的網站能順利執行 jquery,有些模板本身已經內建或修改支援 jquery 庫,因此必須先確認,否則可能產生版本衝突問題,請在模板目錄的 library/page_footeer.lbi 最後加入: <script ... 閱讀全文...
1、ECSHOP響應式網頁製作-環境與工具準備
1、ECSHOP響應式網頁製作-環境與工具準備 2016-11-13
目前光台灣手機持有人口約 1330 萬,這還不包括其他的移動設備(如:平板、筆電...),在國人消費習慣已經改變的同時,如果你的ECSHOP網店還不能對各種移動設備友好的支持,那將會造成莫大的損失,比較明顯的是搜索排名持續下滑,曝光率越來越低,收錄量大不如前,直接影響的當然是訂單,不要以為你的客戶已經習慣了這樣的操作方式,或是你的商品夠好,當老客戶逐漸減少而新客戶不再增加時才驚覺有意,通常已經為... 閱讀全文...
響應式模板功能表
響應式模板功能表 2016-03-27
使用響應式模板一套就能搞定網站,不要在使用PC與手機分開的模板了,同樣的事情只需做一次,使用RWD響應式模板管理維護網站就是這麼簡單 閱讀全文...
weshop_rwd9 響應式模板(虛擬主機用戶獨享)免費安裝
weshop_rwd9 響應式模板(虛擬主機用戶獨享)免費安裝 2016-03-24
weshop_rwd 是 ECSHOP 專用的響應式(Responsive Web Design)模板,由 wewshop.tw 製作並提供免費下載。weshop_rwd 讓智慧型手機與平板也能像桌上型電腦瀏覽你的 ECSHOP 商城,使用BootStrap框架,所有布局代碼完全重寫,是網路上唯一真正免費實用的 ECSHOP 專用的響應式(Responsive Web Design)模板,適... 閱讀全文...
weshop_rwd 響應式模板特色
weshop_rwd 響應式模板特色 2016-03-08
weshop_rwd 系列是Ecshop專用的響應式模板,可用於ECSHOP 2.7.x版本: weshop_rwd 是免費版本 ,除具備 ECSHOP 原本應有的功能外,同時支援全站響應式布局並使用 JQUERY多種特效,非常適合小型的個人網站使用 weshop_rwd plus 是 weshop_rwd 的加強版,除了提供訪客新的前台體驗之外,還提供管理者快速的後台設定,別人改個功... 閱讀全文...
總計 60 個記錄 1 2 下一頁
瀏覽我的 Facebook
新北市樹林區中正路
andy@we-shop.net
ecshop_weshop
RSS 訂閱