本教程適用於瞭解 ECshop 和 ECshop模板DIY 以及它們的日常使用,在檢視前閣下需要至少會使用一種編輯器(exp:Dreamweaver, editplus, emacs, vi, ee ...意思就是視覺化的HTML編輯器或者直接文字編輯器,我在講的時候用Dreamwaver來講,這樣比較適合初學者和設計師)。 這個教程目前由我一個人維護，但我相信，過不了多久就會有多人 持續地 維護。其中的內容需要不斷地更新。如果您有興趣參加,嘿嘿，PM我。我們一起為大家服務啊.
通過對本教程的學習，只要您邊看邊跟著做，一定能夠學會自己做模板的。:) 下列章節的適用於ECshop程式。 同時這裡許多內容和一些 Smarty相關。 假如您已經熟悉這些內容可跳過不閱讀。假如您是ECshop新手並且想diy一下自己的店鋪， 那您應該認真詳細地從頭到尾讀一遍這些章節。( ps: 大家不要緊張，我會盡量用人類的語言和大家交流，實在萬不得已才會用機器語言展示給大家 )
希望大家能夠通過本教程，想要什麼模板都能自己做出來。哈哈！一起加油吧！
第一章節：
讀取這些內容，您將瞭解： 每個前臺頁面所對應的模板頁面,模板
檔案的目錄結構。 一些最基本的ECshop模板修改方法。 模板的路徑以及相關包含檔案的方法(深入瞭解Dreamweaver模板製作)。 一些常用模板例子講解.模板存放路徑：ecshop/themes/xxxxx 其中的 xxxxx 就是某一套模板，如系統一般會自帶的模板檔名叫做 default, (即：ecshop/themes/default )裡面放的就是安裝好時的預設模板,以下所有的說明都是針對預設模板來講解.操作前提，將您當前使用的模板調整為default模板,然後清空快取。接下來我們進入default目錄,可以看到以下檔案目錄：images/ (存放模板中用到的圖片)
library/ ( 存放一些小模板檔案及重複被用到的模板檔案 )
style.css (模板樣式檔案)
index.dwt (首頁的模板 index.php)
goods.dwt ( 商品顯示頁的模板 goods.php)
*.dwt (表示其它.dwt檔案)
蝦米？難道你不相信這些就是模板嗎？好，那我證明給你看看.我們把把images裡面的logo.gif檔案的名字,改為logo2.gif,然後我們隨便找一張gif圖片，起名為logo.gif放到images目錄中，然後我們重新整理首頁。看到沒？首頁logo被修改了。如果你覺得大小不合適，那麼我們開啟library目錄中的 page_header.lib 檢視原始碼，然後搜尋 images/logo.gif 然後看它後面 width="130" height="56" 把130和56改為相應的值就可以了，到前臺重新整理看看。好接下來我們用dreamweaver開啟index.dwt檔案,在原始碼中搜尋 {$page_title} ，找到後，將{$page_title} 修改為 超級無敵的大賣場. 然後到到瀏覽器前臺重新整理，看看頁面有什麼變化。蝦米？沒有發現嗎？看看瀏覽器頭部啊，呵呵，是不是網站的標題被改變了？哈哈，對，{$page_title}就是網站標題的標籤 ( 注： 標籤是從{開始到}結束哦，{和}屬於標籤的一部分 ). 整個ECshop的模板就是一個一個這樣的標籤組成了，控制網站內容和
資料的動態顯示。比如（{$keywords} )控制網站的關鍵字標籤，{$description} :網站描述標籤 ，( 這就是模板中的標籤，每個標籤都會對應程式裡面的一個值，網站執行時模板引擎會來讀取模板頁面，然後把對應的標籤用對應的值進行替換，就顯示出我們看到的網站頁面了,明白了吧。這一段內容對於新手來說，可能一下子不能完全消化,還有什麼問題就留言，我會更新到這裡來)很簡單8,哈哈，大家真是冰雪聰明，孔明再世啊，這麼快就學會了，如果你上一步你操作很超級非常very的簡單的話，接下來的學習也時一樣的哦.接下來要怎麼改呢？廣告之後我們繼續。.....黃金廣告位...歡迎購買......需要的話PM我.....(PS:人不能無恥到這個地步)....哈哈...大家不要著急，欲速則不達，呵呵，下面我們真正開始做ECshop的模板了，( 不懂HTML的觀眾準備好Dreamweaver哦 )1.我們到/themes/default目錄中，把index.dwt改名為index_bak.dwt, 然後用Dreamweaver新建一個HTML檔案,然後儲存到/themes/default目錄中，命名為 index.dwt, 好，我們重新整理前臺看看，哈哈，什麼也沒有哦. 好，在我們新建的index.dwt中找到<title>,我們把<title>和</title>中間的內容替換 為:{$page_title},在<body>和</body>之間也放入一個{$page_title}, 重新整理前臺看看.嘿嘿，看到什麼了？網站標題被列印出來了吧？如有操作時候有彈出對話方塊:點選確定就可以了，:)2.接下來我們選擇視覺化介面編輯：然後在{$page_title}後面按Enter鍵換行,然後輸入: 商店公告：{$shop_notice}到瀏覽器重新整理首頁重新整理看看，呵呵。商店公告被調出來了，可以去網站後臺 系統設定->商店設定->網店資訊->商店公告 修改內容，然後到瀏覽器再重新整理網站首頁看看，呵呵，商店公告是被動態掉出來的哦.3.繼續在{$shop_notice}後面按Enter鍵換行，然後輸入
程式碼:
網站快訊：{foreach from=$new_articles item=article}
{$article.short_title}
{/foreach}
注：換行的地方按Enter鍵哦,好重新整理前臺看看 ，呵呵，網站快訊被調出來了哦。好我們再到網站後臺->文章管理->網站列表->新增文章，選擇 網站快訊這個分類，隨便新增一篇內容，完成後前臺重新整理看看。兩篇文章都被動態掉出來了哦。註釋：
引用:
{foreach from=$new_articles item=article} : 迴圈的開始,
{/foreach} : 迴圈的結束
$new_articles: 為要迴圈的東西，這裡為網站快訊
{$article.short_title} : 快訊標題的標籤
模式為：{foreach from=$post item=name}
Content
{/foreach}
{foreach from=$post item=name}和{/foreach}標籤中間可以任意新增要迴圈的內容content(可以為任意的東西)，迴圈的次數受到 $post的限制（這裡要填什麼我都會告訴大家的.)name為當前這個迴圈的物件。方便呼叫資料。以後這個迴圈我們會經常的用到哦. 還是不懂也沒有關係，每次遇到我都會講哪裡要怎麼設定的，多用就會了。我們也可以這麼寫哦 , 注意： 在程式碼編輯的檢視裡面編輯
複製內容到剪貼簿
程式碼:
<table>
{foreach from=$new_articles item=article}
<tr><td>
{$article.short_title}
</td></td>
{/foreach}
</table>
哈哈，儲存,重新整理首頁看看，表格被一行一行的迴圈出來了哦好累啊，今天先寫到這裡，晚上有時間繼續，哈哈如果喜歡就給我點支援啊，多給我提問題，我希望能夠更完善幫助更多的人。明天的預告：產品列表呼叫，還有產品縮圖哦，呵呵！產品分類呼叫呢！