如何将您的 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 免费赠品！