2024 年如何製作電子商務網站（簡單指南）

您想將陷入困境的實體店轉變為線上業務嗎？線上業務可以吸引更廣泛的受眾並提高銷售額。如今，許多用戶希望在線上擴展傳統業務或在數位市場上開展新業務。本指南提供了創建成功的電子商務網站的逐步方法，以促進銷售並增強客戶互動。我們將介紹如何使用 Divi 和 WooCommerce 在幾分鐘內產生完整的線上商店、如何設計它以適合您的品牌等等。

為什麼需要建立電子商務網站？

出於多種原因，建立電子商務網站在當今的商業世界中變得至關重要，尤其是隨著購物習慣轉向線上。以下是建立一個如此重要的一些關鍵原因：

• 擴大覆蓋範圍：電子商務網站可以讓您的企業接觸到本地以外的客戶。您可以隨時隨地向人們銷售產品—24/7，沒有實體界線。
• 提供顧客便利：人們喜歡網上購物的便利性。無論客戶使用手機、平板電腦或電腦，都可以在方便的時候購物。透過電子商務網站，您可以讓購買過程變得順暢且方便。
• 成本效益：經營電子商務網站比經營實體店更具成本效益。您可以減少管理費用，例如租金、水電費，在某些情況下還包括員工費用。
• 數據與分析：電子商務網站提供豐富的數據，可以幫助您更了解客戶。您可以追蹤他們的購物習慣，了解哪些產品效果最好，並使用這些數據來改善行銷策略和客戶體驗。

如您所知，讓我們開始建立創建電子商務網站的原因！

如何透過 7 個步驟建立電子商務網站

當您遵循正確的步驟並使用適當的工具時，使用 WordPress 建立自己的電子商務網站就會變得非常簡單。無論是新手還是經驗豐富的開發人員，您都可以輕鬆推出具有視覺吸引力的線上商店。操作方法如下：

1. 取得網域名稱和 WordPress 託管

在建立網站之前，您需要準備好一些必需品 - 您的網域、主機服務和 WordPress 設定。

如果您仍在尋找託管提供者，SiteGround 透過管理所有這些方面提供了便捷的解決方案。

領域

您的網域名稱（或網域）是您網站的網址（例如，elegantthemes.com），選擇一個能夠反映您的品牌且易於記住的網域至關重要。理想情況下，您的網域應該讓訪客了解您的電子商務業務。

選擇網域後，搜尋可靠的網域註冊商進行註冊。 Namecheap 是一個不錯的選擇，或者如果您選擇它們進行託管，也可以直接透過 SiteGround 獲得折扣域名。

訪問 NameCheap

如果您擁有一個網域，則可以透過更新名稱伺服器輕鬆將其連接到您的託管提供者。

WordPress 託管

您的網站需要一個可靠的線上家園，託管就可以發揮作用。由於我們將使用 WordPress，因此選擇高品質的 WordPress 託管提供者非常重要。一個好的主機將使您的網站管理變得簡單，同時確保其在速度和安全性方面表現良好。

SiteGround 提供 WordPress 託管計劃，起價為每月 3.99 美元，提供經濟實惠的選擇。使用 SiteGround 設定 WordPress 託管非常簡單。

觀看下面的視頻，了解如何設定您的網域和託管。

安裝 WordPress

許多 WordPress 託管提供者（例如 SiteGround）在設定過程中提供一鍵式 WordPress 安裝。

如果此選項不可用，只需前往託管提供者的儀表板即可。選擇 WordPress 安裝程式並按照提供的步驟進行操作。安裝完成後，您將收到一封包含登入詳細資訊的確認電子郵件。若要造訪您的站點，請前往yourwebsite.com/wp-admin並使用您在安裝過程中建立的憑證登入。

2.安裝Divi主題

使用 Divi 建立您的電子商務網站從未如此簡單。這個多功能主題使您能夠創建視覺上令人驚嘆且完全可自訂的網站，而無需任何程式設計經驗。 Divi 以其強大的設計功能而聞名，並提供針對不同類型的電子商務網站量身定制的各種預製佈局。

Divi 連結了電子商務網站的所有點：

• 它使您能夠使用可視化的拖放介面輕鬆設計和自訂您的線上商店，無需編碼。
• Divi 提供 211 個預先設計的佈局和 30 個專門針對電子商務的佈局包，讓您可以輕鬆建立產品頁面、結帳頁面等。
• Divi 的 WooCommerce 模組可讓您顯示、過濾和自訂您的產品。此外，您可以使用拖放模組建立獨特的產品頁面佈局，顯示產品詳細資訊、評論、圖像等。
• 您可以存取 Divi 擴充市場來整合多個支付網關，例如 PayPal 和 Stripe。

下載並安裝 Divi

您可以從 Elegant Themes 購買 Divi，年度許可證價格為89 美元，終身許可證價格為249 美元。購買後，請按照以下步驟下載主題並將其安裝在您的 WordPress 網站上：

1. 導覽至外觀 > 主題。
2. 按一下“新增主題”，然後按一下“上傳主題” 。
3. 選擇您下載的 Divi .zip 檔案並點擊立即安裝。
4. 安裝後，按一下啟動將 Divi 設定為活動主題。

觀看下面的影片以了解更多資訊。

設定完成後，您就可以開始建置了。如果您想在深入了解之前了解更多信息，請查看我們有關使用 Divi Builder 的教程。

開始使用 Divi

3. 建立您的電子商務網站

在 WordPress 上安裝 Divi 主題後，您可以建立您的電子商務網站。無需擔心 — Divi Quick Sites 可以自動建立您的商店，因此您無需從頭開始！

啟動入職嚮導

在 WordPress 中啟動 Divi 主題後，您將可以存取 Divi 的入門嚮導，該嚮導將引導您完成設定過程。只需點擊按鈕即可登入並啟動您的 Divi 許可證。

登入後，您將到達 Divi 主儀表板。在這裡，您可以管理您的網站、存取文件、取得支援並開始使用 Divi Quick Sites 建立新網站。首先，只需從 Divi 儀表板點擊「產生新網站」即可。

使用 Divi AI 取得快速站點

使用電子商務入門網站（或使用 AI）產生您的網站

接下來，您可以選擇使用預製的入門網站或 Divi 的 AI 網站建立器來建立新的電子商務網站。 Divi 提供了一個令人驚嘆的線上商店入門網站模板，因此請點擊「選擇網站模板」即可開始。

在螢幕上，您將看到幾個入門網站模板。選擇線上商店起始站點。如果您擔心模板與您品牌的顏色、字體或圖像不相符，請不要擔心；這些可以稍後定制。

Divi Quick Sites 將提示您提供有關新網站和要包含的頁面的詳細資訊。

1. 在表格中填寫您的網站名稱、口號和徽標。
2. 上傳您的徽標以將其自動添加到您的網站（如果有）。
3. 從入門網站中選擇所需的頁面，並根據需要新增自訂頁面以啟動流程。
4. 準備好後，點擊“產生並發布我的網站”按鈕。

注意：選擇商店頁面將自動安裝 WooCommerce 和線上商店的預先建置頁面（商店、產品範本、結帳等）。由於您正在建立電子商務網站，因此包含用於啟用產品清單和交易的商店頁面至關重要。

輸入您的網站詳細資料後，Divi Quick Sites 將使用您的輸入在兩分鐘內產生網站。它將自動建立所有必要的元素，包括頁面、範本、樣式和導覽選單。

一旦您的網站準備就緒，將會出現一個確認頁面，其中包含訊息“您的網站已準備就緒！”

您還將看到創建的所有頁面和主題模板的列表，以及教程和文件的鏈接，以幫助您開始自訂新網站。

開始使用 Divi

4.檢查您的新網站

在我們繼續其餘過程之前，您可以查看您的即時網站以探索全新的線上商店設計。

以下是您網站上將自動產生的所有頁面和模板，包括 WooCommerce 頁面和模板。

網站頁面

WooCommerce 商店、產品、購物車和結帳頁面模板

開始使用 Divi

5. 配置 WooCommerce 並新增產品

由於 WooCommerce 已經安裝在 Divi Quick Sites 網站產生過程中，因此我們可以使用 WooCommerce 設定精靈來簡化流程。

WooCommerce 設定精靈

啟動後，WooCommerce 會自動提示您開始設定精靈。 WooCommerce 將在此處指導您完成商店的關鍵設定步驟。若要開始設定精靈，請導覽至 WooCommerce 部分並選擇主頁。

設定精靈將提示您輸入有關商店的詳細信息，例如您的地址和電子郵件。

選擇最能代表您商店的產業和產品類別。

接下來，選擇您計劃在商店中包含的產品類型。某些選項（會員資格、預訂等）需要在您的網站上安裝其他外掛程式。

注意：外掛程式有付費版本和免費版本。探索我們推薦的會員、預訂等插件，以增強您的電子商務網站。例如，Memberpress 或 Paid Memberships Pro 等工具可以幫助您建立具有多種付款選項的基於訂閱的商店。此外，像 Amelia 這樣的插件可讓您建立一個預訂網站，其中包含預約日曆等功能，供訪客安排預訂。

設定精靈將提示您有關商店的其他問題。

選擇您可能需要的任何其他插件。您可以查看 Jetpack 和 MailPoet 以確定它們是否滿足您的需求。但是，如果您希望收稅、處理信用卡付款或管理運輸，這些免費插件可能會很有用。

此時，您可以將焦點轉移到 WooCommerce 中的其他設定。

WooCommerce 設定

設定電子商務商店可能具有挑戰性，但 WooCommerce 簡化了流程。您可以管理以下內容：

• 常規設定：貨幣、產品和結帳選項。
• 產品設定：商品展示和庫存管理。
• 運輸設定：運輸方式和費用。
• 付款設定：客戶付款選項。
• 帳戶設定：用戶註冊和隱私控制。
• 電子郵件設定：儲存通訊首選項。
• 進階設定：商店的自訂配置。

如需進一步協助，請參閱我們的 WooCommerce 設定指南，其中提供了導覽這些基本頁面的逐步說明。

新增產品類別

類別使客戶可以更輕鬆地在您的商店中找到商品。例如，如果您銷售服裝，您可以創建諸如手提包、椅子和桌子等類別。最好在添加產品之前進行設定。

若要建立類別，請導覽至儀表板中的WooCommerce > 產品，然後按一下類別。它們的功能與 WordPress 貼文類別和標籤類似。在將類別新增至您的商店之前，請先填寫類別的所有必填欄位。

如果有任何占位符類別，您可以編輯或刪除它們。選擇類別和標籤時，請考慮最直觀、最容易讓客戶理解的。

將產品新增至您的 WordPress 電子商務商店

您可以單獨新增產品或使用 CSV 檔案同時匯入它們。

若要單獨新增產品，請導覽至產品 > 新增產品。

輸入產品名稱。

提供產品描述並上傳產品圖片。

首先，選擇您要建立的產品類型。然後，確定商品的價格並根據需要調整庫存水準。您也可以指定單一產品的運送詳細資訊。您可以在右側邊欄上為您的產品分配類別和標籤。

滿意後，點擊“發布”。您可以根據需要向商店添加任意數量的產品。

使用 WooCommerce 管理您的產品庫存，並查看我們在 WooCommerce 中設定運輸的綜合指南。

設定付款和運輸

提供多樣化的支付選項對於維持客戶滿意度至關重要。 WooCommerce 支援多種網關，例如 PayPal、Stripe 和銀行轉帳。然而，當與 Divi 的建構器和 Woo 結帳模組結合使用時，您可以完全自訂結帳頁面設計。

WooCommerce 設定可讓您選擇最適合您業務的付款方式。根據您的偏好，啟用直接銀行轉帳、貨到付款或支票付款等付款方式。

WooCommerce 的靈活性可確保您的運送選項經過量身定制，以滿足客戶的期望。以下是最終確定商店的送貨詳細資訊所涉及的步驟：

1. 前往WooCommerce > 設定 > 運輸
2. 根據地理區域定義區域
3. 為每個區域分配特定的運輸方式，例如統一費率、免費送貨或本地取貨。

6.設計和客製化您的電子商務網站

現在您的入門網站已上線，是時候將其與您的品牌保持一致了。您無需花費數小時單獨調整每個元素，而是可以使用更快、更有效的方法快速有效地自訂您的網站。

設計 WooCommerce 頁面

WooCommerce 為您的商店提供了一組基本頁面，可以使用 Divi 輕鬆自訂這些頁面。這些包括：

1. 商店頁面，顯示您的所有產品
2. 購物車頁面，顯示購物車的內容
3. 結帳頁面，客戶可以在其中完成購買
4. 用於管理使用者帳戶的「我的帳戶」頁面
5. 附加頁面，例如產品類別和標籤的頁面

透過 Divi，您可以使用 Divi Builder 直接編輯每個頁面，或使用主題產生器為這些頁面建立自訂範本。

Divi 主題產生器對於為產品頁面、類別頁面和網站上的其他設計元素建立範本特別有用。

例如，您可以從部落格下載免費的產品頁面範本並將其應用到主題產生器，為您的所有產品提供一致、有吸引力的佈局。或者，您可以從頭開始設計產品頁面範本。

如需其他支持，請參閱有關建立購物車頁面、配置結帳頁面以及將 Divi 與 WooCommerce 頁面結合使用的指南。

開始使用 Divi

編輯 Divi 入門網站主題產生器模板

每個 Divi 入門網站都包含主題產生器模板，用於管理網站關鍵部分的佈局，例如頁首、頁尾和部落格文章。設定網站後，您可以透過造訪Divi > 主題產生器來查看這些範本。

您可以透過選擇全域頁首、自訂正文或全域頁尾部分旁的鉛筆圖示來修改任何入門網站的範本。對頁首或頁尾所做的任何變更都會套用至所有範本。若要查看實際效果，請按一下預設網站範本的鉛筆圖示。

開啟範本後，您可以使用 Visual Builder 的選單設定來變更標題的背景顏色、插入標誌以及調整字體和顏色。您也可以像在網頁上一樣新增、刪除 Divi 模組並設定其樣式。

使用範本的優點是對標題（或其他主題產生器範本）的任何調整都會自動反映在整個網站中。

自訂全域字體和顏色

個人化您的入門網站以與您的品牌保持一致非常簡單。無需調整每個頁面上每個元素的每種顏色或字體。該網站帶有預先配置的全域顏色和字體。您可以在 Divi Builder 中編輯元素時修改這些全域設置，任何更新都會自動套用到整個網站。

若要修改新入門網站主頁上的全域字體和顏色，請按一下前端的「啟用 Visual Builder」。

按一下您要自訂的模組。我們將在主頁上自訂一個文字模組，優先考慮全域字體。點選滾輪圖示可開啟選項卡進行修改。

您建立的起始網站包括預設的全域字體，可以保留這些字體或將其替換為您的品牌特定字體。您可以使用 Divi Builder 輕鬆自訂全域字體。導航至“設計”選項卡，捲動至“文字”部分，然後選擇“字體”。

您也可以上傳自己的字體或從我們的庫中選擇，其中包括 Google 字體。

我們可以選擇優先考慮相同文字模組的全域顏色，但在我們的例子中，我們選擇自訂按鈕模組的全域顏色。您需要修改全域顏色設定來自訂您的品牌顏色。與全域字體一樣，現有的全域顏色繼承自電子商務起始網站。

點擊按鈕模組的滾輪圖示即可開始操作。

向下捲動到按鈕部分並調整按鈕文字顏色。

從「已儲存」標籤切換到「全域」標籤以查看目前的全域色彩。

要進行更改，請按一下每種顏色並選擇您喜歡的選項。您也可以輸入自訂顏色的十六進位代碼。在我們的例子中，我們將文字顏色從白色變更為黑色。

以同樣的方式，根據需要修改所有顏色。要新增其他顏色，只需點擊最後一個全域顏色旁邊的加號圖示即可。

開始使用 Divi

編輯全域預設

Divi 全域預設可讓您在不同的 Divi 模組中重複使用樣式。將它們視為可應用於按鈕、文字模組、簡介和其他元素的樣式範本。透過為模組（如按鈕）建立全域預設，您可以將其設定為預設樣式或為網站上的各種按鈕建立不同的預設。這可確保套用您喜歡的樣式時的一致性，無論是按鈕、文字或其他常用模組。 Divi Starter Sites 包含其模板中使用的所有模組的預設，因此您通常不需要建立新模組。但是，您可以輕鬆調整這些現有預設以符合您的品牌風格。

與編輯全域字體和顏色一樣，首先從前端按一下「啟用 Visual Builder」。

如前所述，每個 Divi 入門站點都有自己的預設。例如，若要修改入門網站上的現有按鈕預設，請按一下模組標題下預設部分旁的下拉箭頭。在我們的例子中，我們正在修改電子商務入門網站的交易部分中的一個按鈕。

接下來，找到模組預設，例如我們案例中的「Online Store Tertiary Light」。將滑鼠懸停在預設上以顯示其選單，然後按一下鉛筆圖示進行編輯。

修改 Divi 預設時，模組的標題會從紫色變成灰色，表示正在進行設計調整。

請隨意套用您喜歡的任何設計修改，然後透過選擇綠色複選標記來儲存模組。在本例中，我們將按鈕的顏色從橙色變更為黑色。

底部會跳出確認對話框，詢問您是否要繼續更改預設。點擊“是”儲存您的調整。

模組的標題將恢復為紫色。最後按一次綠色儲存按鈕即可完成預設。

開始使用 Divi

7. 透過外掛程式和整合增強您的電子商務網站

專注於電子郵件註冊和社交媒體分享可以幫助您的電子商務網站吸引更多流量並增加銷售。 Divi 提供內建優化工具，並可與流行的 WordPress 社群媒體和電子郵件註冊外掛程式順利配合。這裡有一些工具可以幫助您開始。

電子郵件行銷

增加電子郵件清單對於與受眾保持聯繫並向他們通報電子商務商店的更新至關重要。 Elegant Themes 的 Bloom 外掛程式是一個出色的工具，用於設計引人注目的電子郵件選擇加入表單。安裝外掛程式後，您可以自訂表單以符合您網站的風格和要求。 Bloom 還與多個電子郵件行銷平台集成，使您能夠有效管理清單並實現自動化通訊。

綻放

社會的

您可以使用 Elegant Themes 的 Monarch 外掛程式輕鬆地將社交分享按鈕新增至您的網站。啟動後，設定 Monarch 將這些按鈕放置在頁首、頁尾或貼文內的顯眼位置。這會鼓勵訪客分享您的內容，從而增加您的電子商務網站在社群媒體上的存在。

獲得君主

Divi 市場中的產品

Divi 提供了一個充滿活力的插件、擴充功能和子主題市場，專門設計用於增強您的 Divi 支援的電子商務網站。您可以購買這些並將它們整合到您的網站中。

例如，Divi 的輪播是一種流行的擴展展示，以視覺上吸引人的方式展示最暢銷或特價的產品。它非常適合吸引人們對特定商品的注意並促進銷售。您可以在市場上以3.19 美元的價格購買。要對其進行測試，您可以查看其螢幕截圖和現場演示。

參觀迪維市場

基本 WordPress 插件

每個 WordPress 網站都可以從某些基本外掛程式中受益匪淺。以下是一些強烈推薦的可用於 WordPress 的外掛範例：

• SEO 外掛（如排名數學）
• 備份插件（如 UpdraftPlus）
• 影像優化外掛程式（如 EWWW Image Optimizer）
• 速度優化外掛程式（如 WP Rocket）
• 安全插件（如 Solid Security 或 Sucuri）
• 社群媒體插件
• 行銷外掛

結論

到 2024 年，推出一個成功的電子商務網站需要的不僅僅是功能；還需要更多的功能。它旨在為您的客戶創造無縫、引人入勝的體驗。 Divi 讓您能夠打造一個視覺上迷人、用戶友好的商店，在體現您的品牌形象的同時提供頂級的性能。透過整合智慧型外掛程式並利用 Divi 中強大的自訂選項，您的網站將不僅僅是一個店面。

想建立您的第一個電子商務網站嗎？開始使用 Divi 並促進您的電子商務業務。您可以探索我們精選的外掛程式和工具表，這些外掛程式和工具可能對您的電子商務網站有價值。