如何將您的 Etsy 商店集成到您的 Divi 網站中

在今天的 Divi 帖子中，我們將向您展示如何將您在 Etsy Shop 中的商品整合到您的 Divi 網站中。 這可能是您對自己網站的需求或您從客戶那裡收到的請求。 將您的 Etsy 商品添加到您的網站可以幫助您產生更多銷售額。 特別是如果您擁有一個具有吸引力的目標受眾和大量訪問者的網站。 通過將 Etsy 商店集成到您的網站，您可以更輕鬆地吸引目標受眾。

我們將演示如何通過 Etsy Shop 插件添加 Etsy 商店商品，這將在桌面上提供以下結果：

可能性

並非每個人都喜歡將 Etsy 商店添加到個人網站。 有些人更願意使用允許人們直接從網站購買產品的電子商務選項。 當您將 Etsy 商店集成到您的 WordPress 網站時，並不意味著購買實際上會發生在您的網站上。 該插件只是幫助您以原始形式顯示 Etsy 項目。 對於實際的購買過程，感興趣的訪問者將被重定向到您在 Etsy 網站上的 Etsy 商店。

但是，如果您想與您的 Etsy 商店和您在那裡的觀眾保持這種聯繫，您有兩種方法可以解決這種情況。

手動將您的產品添加到您的 WordPress 網站

由於插件只會幫助您將訪問者重定向到 Etsy 網站，您也可以手動集成您的 Etsy 項目。 儘管這聽起來像是更多的工作，但它也有一些優點。 例如，您可以隨意設置項目的樣式。 您可能會有更多的空間和空間來製作與您的網站風格相同的項目。 您唯一需要的是每個項目的直接（最好是唯一的）鏈接。

雖然手動添加 Etsy 產品有很多優點，但也有一些缺點。 一旦您手動添加這些項目並更改樣式，您的訪問者將不會立即知道他們將被重定向到 Etsy 網站。 因此，您是在給它們一個驚喜。

使用插件添加您的產品

您的另一種可能性是使用插件。 這通常是最簡單的方法，可以為您節省大量時間。 除此之外，項目的佈局類似於它們在 Etsy 網站上的顯示方式。 訪問者將更容易識別物品的來源。 這是我們將在帖子的下一部分中向您展示如何操作的可能性。

有兩個插件可以完成這項工作：Etsy Shop 插件和 Etsy 360。Etsy Shop 插件是免費使用的，我們將向您展示如何設置它，而 Etsy 360 是付費的。 不幸的是，如果您想在桌面上顯示您的 Etsy 項目，您只能使用 Etsy Shop 插件。 該插件沒有響應。 因此，如果您正在尋找響應式解決方案，您可以試試 Etsy 360。

如何將您的 Etsy 商店集成到您的 Divi 網站中

訂閱我們的 YouTube 頻道

開始將您的 Etsy Shop 與 Etsy Shop 插件集成

要將您的 Etsy 商店添加到您的 Divi 網站，我們需要提前做一件事； 免費的 Etsy Shop 插件，由 Frederic Sheedy 創建。 通過使用此插件，您無需花費大量精力在您的網站上添加您最喜歡的 Etsy 商店商品。 過去，Etsy 提供了 Etsy Mini 的可能性，但不幸的是，他們最近暫停了這個選項——使 Etsy Shop 插件成為目前最有利的可能性。

沒有任何進一步的到期； 讓我們開始吧。

下載 Etsy 商店插件

您需要採取的第一步是下載插件。 您可以通過單擊以下鏈接下載該插件。

將插件上傳到您的網站

下載插件後，您可以通過轉到WordPress 儀表板 > 插件 > 添加新 > 並將插件上傳到您的網站來上傳它。 確保您還激活了插件。

獲取您的 Etsy 商店 API 密鑰

下載插件後，您需要執行的下一步是獲取 Etsy 商店的 API 密鑰。 可能您已經擁有這樣的 API，但如果您沒有，我們將向您展示如何立即獲取。

為您的 Etsy 帳戶創建一個新應用

下載 Etsy Shop 插件並轉到設置後，您可以在 Etsy API 密鑰字段下方看到一個鏈接，該鏈接顯示在何處創建新的 Etsy 應用程序。 單擊該鏈接。

開始創建新應用程序後，您需要填寫有關正在創建的應用程序的一些詳細信息，如下圖所示。

一旦你填寫了所有需要的信息，你的應用程序就會被製作出來。 在下圖中，您可以看到創建應用程序後可以在何處找到 API 密鑰。

將 API 密鑰複製到您的插件中

您需要做的下一件事是返回到您的插件設置並填寫 API 密鑰。

確保您在新窗口中打開商店

當您仍在插件設置中時，建議您在新窗口中打開每個鏈接。 這樣，您不僅會將訪問者發送到另一個頁面，而且會將他們保留在兩個頁面上。

將短代碼添加到 Divi Builder 中的文本模塊

您需要做的下一件事是將短代碼集成到您的網站中。 您可以通過將其添加到您希望項目顯示的頁面中的新文本模塊來輕鬆完成此操作。

打開要添加項目的頁面並將文本模塊添加到全角行。 接下來，打開行的設置並將行的自定義寬度更改為“680px”。

接下來，將短代碼添加到“內容”選項卡中的“內容”框中。 未經任何修改，短代碼如下所示：

[etsy-shop shop_name="*your-etsy-shop-name*" section_id="*your-etsy-shop-setion-id*"]

現在，將 *your-etsy-shop-name* 和 *your-etsy-shop-section-id* 替換為您自己的。 為此，請轉到您的商店（或您想要展示 Etsy 產品的任何其他商店）並選擇左側的一個部分。

完成此操作後，您會注意到 URL 中的 Etsy 商店名稱和部分 ID。

禁用手機

不幸的是，Etsy Shop 插件只能在台式機上正常工作。 它沒有響應性，因此，如果您正在尋找一種免費的解決方案來幫助您僅通過桌面產生銷售，那麼這是一個非常合適的選擇。 如果沒有，您可能想看看 Etsy 360 是關於什麼的，或者您可以手動添加要展示的元素。

結果

只需複制這兩件事並將它們放在您的短代碼中即可。 保存設置後，當您單擊預覽時，您的 Etsy 項目應該會出現在您的桌面網站上-為您提供以下結果：

最後的想法

在這篇文章中，我們向您展示瞭如何將 Etsy 商店添加到您的網站。 我們已經向您介紹了安裝 Etsy Shop 插件的過程。 有些人更喜歡用插件添加 Etsy 項目，讓他們的訪問者被重定向到 Esty 網站，而其他人則寧願選擇電子商務網站。 如果您正在尋找第一種可能性，這篇文章將幫助您。 如果您有任何問題或建議，請務必在下方評論區留言！

請務必訂閱我們的電子郵件通訊和 YouTube 頻道，這樣您就不會錯過重大公告、有用提示或 Divi 免費贈品！