Shopify购买按钮:如何在3个步骤添加电子商务功能到任何网站

与Shopify购买按钮，你可以完全整合Shopify的电子商务工具与任何网站，无论是建立在WordPress, Squarespace, Wix或其他任何网站网站建设者．

Shopify不只是面向成熟的电子商务企业。任何想要将他们的项目变现的人——无论是博主、艺术家、作家、设计师、播客或有影响力的人——都能从中受益网上销售．

但是建立一个在线商店需要时间，并且重欧宝体育官网入口首页定向网络流量会增加结帐过程中的摩擦，这可能会对你的销售产生负面影响。Shopify购买按钮是您的解决方案!

1.将购买按钮销售渠道添加到Shopify商店

你会想从OB欧宝娱乐APP登录你的Shopify商店．如果你看到购买按钮列在你销售渠道在左侧菜单中，销售渠道已经添加，您可以跳过步骤2。

在桌面

1. 进入购买按钮销售渠道页面在Shopify应用程序商店(你也可以通过设置>访问Shopify应用商店和搜索购买按钮⁠)。
2. 点击添加应用程序,然后增加销售渠道在下一个屏幕上。

页面刷新后，您应该可以看到购买按钮列在销售渠道在左边的菜单上。一定要把频道固定在你的导航上，以便在路上容易访问。

如果你没有固定购买按钮，你可以通过点击再次找到它销售渠道然后购买按钮在你安装的通道下。

在移动

1. 打开Shopify应用在移动设备上，然后选择商店从底部菜单。
2. 旁边销售渠道中,选择添加通道(在iPhone上)或+(Android)。
3. 选择购买按钮从选项列表中，然后轻按添加购买按钮．

2.创建一个购买按钮

添加了Buy Button销售渠道之后，就可以开始创建Buy Button了。OB欧宝娱乐APP通过单击导航到您的购买按钮页面购买按钮(如果你把它固定到你的导航)或通过转到>应用程序和销售渠道>购买按钮．

在那里，点击创建一个购买按钮．

您可以为单个产品或整个产品集合创建“购买按钮”。在下一个屏幕上，您将被要求选择您更喜欢的选项。单击首选选项，然后搜索要用于创建“购买按钮”的产品或系列。

确保填满复选框并单击选择．

一旦你做出选择，你会被带到购买按钮编辑器，在那里你可以自定义购买按钮的外观。

如何定制你的购买按钮

在Buy Button编辑器中，您将看到左侧列出了许多选项，用于自定义Buy Button的外观和感觉。在右边，你会看到你的购买按钮的预览。

根据自己的喜好调整左边的选项。你的预览会自动更新调整，所以你可以看到你的购买按钮看起来像你在创建它。在预览版中，你可以通过点击编辑器顶部居中的桌面或手机图标来查看购买按钮在桌面和手机屏幕上的显示方式。

下面是你可以自定义的选项:

• 产品变体:选择你想通过“购买”按钮购买的产品种类。默认情况下将选择所有变量。
• 布局:在“基本”、“经典”和“全视图”中选择。在右边，当你从layout下拉菜单中选择时，你会看到每个布局的预览。
• 当人们点击时的动作:在“将产品添加到购物车”、“直接结帐”或“打开产品详细信息”之间进行选择。“将产品添加到购物车”选项将在屏幕右侧创建一个购物车小部件。“直接结帐”选项将创建一个立即购买按钮，用户将直接结帐(注意，客户不能使用此选项向购物车添加多个商品)。“打开产品详细信息”选项将创建一个“查看产品”按钮，该按钮将打开一个弹出窗口，其中包括产品信息和一个“添加到购物车”按钮。
• 按钮样式:在这里，你可以调整购买按钮的颜色、字体、大小和角落形状。
• 布局:“布局”菜单将允许您对按钮的布局进行更精细的调整。您可以自定义字体颜色、按钮文本和排版设置。
• 购物车:在这里，您将能够调整您的购物车小部件的设置，包括副本和颜色。请注意，如果您使用“直接结帐”布局，这个选项将是灰色的，因为没有购物车小部件。
• 详细的弹出:如果你选择“当人们点击时执行操作”下的“打开产品详细信息”，你就可以自定义此部分弹出框的文本、颜色和排版选项。
• 高级设置:在这里，您可以调整如何为用户提供结帐服务。您可以选择“打开弹出窗口”(这将创建一个弹出式结帐，当订单完成时关闭)，或“重定向到同一选项卡”(这将从用户的浏览器窗口发送到您的Shopify结帐页面，并在交易完成后将其返回到您的页面)。

请记住，对这些设置进行调整不会改变已经嵌入的购买按钮。这就是为什么在进入下一步之前，花点时间调整购买按钮到你喜欢的程度是很好的。

当你对你的设计感到满意时，点击右上角的Next按钮。

3.添加购买按钮嵌入代码到您的网站HTML

当您单击Next时，购买按钮的嵌入代码将自动生成。如果您准备将代码嵌入到网页上，请单击“复制代码”按钮;如果您想返回“购买按钮”编辑器进行调整，请单击“继续自定义”按钮。

你在这里复制的代码可以粘贴到任何网页的HTML，它会创建一个购买按钮和购物车，将直接连接到你的Shopify管理，让你管理和处理订单从任何网页从你的Shopify管理。

添加嵌入代码的过程可能略有不同，这取决于你想要按钮的显示方式、你使用的网站构建器，甚至是你在平台上使用的主题。

以下是一些最常见的嵌入Shopify购买按钮的地方，以及你需要遵循的步骤:

在Shopify商店的登录页或博客文章中添加嵌入代码

你的Shopify商店已经内置了产品页面和购物车，但偶尔可能会有你想直接在页面或博客文章中添加购买按钮以增加便利性的情况。

例如，如果你正在写一篇关于新发布产品的博客文章，你可能想给读者一个直接从文章中购买的简单方法，而不是将他们链接到一个单独的页面。

在这种情况下，你需要遵循以下步骤:

1. 从你的Shopify管理，转至欧宝体育官网入口首页网上商店>博客文章或欧宝体育官网入口首页网上商店>页，这取决于你是把它添加到博客文章还是页面上。
2. 选择要添加“购买”按钮的博客文章或页面。
3. 在内容窗口，选择<>按钮从Edit视图切换到HTML视图。

1. 将您之前复制的嵌入代码粘贴到HTML编辑器中，您希望它出现在任何位置。单击Save。

一旦你保存了你的页面或博客文章，你的购买按钮将被添加到页面。如果您想在不发布的情况下查看它的外观，请选择预览(或视图页面如果你要把它添加到一个页面)在页面编辑器的右上角。

添加一个购买按钮到Squarespace网站

在Squarespace，你可以将购买按钮添加到个人帖子或主页的菜单中。添加一个购买按钮到你的Squarespace网站:

1. 登录到你的Squarespace仪表板，打开你想要添加购买按钮的页面。
2. 悬停在页面内容区域的页面元素，你想要购买按钮出现并单击编辑．
3. 选择要在其中添加嵌入代码的插入点。
4. 从内容块菜单，在更多的部分中,选择代码．
5. 一定要超文本标记语言从右上角的下拉菜单中选择，然后将“购买按钮”嵌入代码粘贴到代码字段。
6. 点击应用．

请记住，一些自定义Squarespace主题可能需要更高级的HTML自定义知识。在这种情况下，最好直接向开发人员寻求帮助，向站点添加自定义代码。

添加一个购买按钮到WordPress博客

在你的WordPress.org网站上添加一个购买按钮:

1. 从你的WordPress仪表板，去你的帖子，并选择一个你想添加购买按钮。
2. 根据你使用的WordPress编辑器版本，完成以下步骤之一:
   • 如果您正在为您的WordPress网站使用经典编辑器，请单击文本选项卡从可视视图切换到文本视图。
   • 如果您正在为您的WordPress站点使用块编辑器，请单击+按钮，然后搜索并选择自定义HTML．
3. 将“购买按钮”嵌入代码粘贴到您希望它出现的位置。
4. 点击保存草稿,预览,或发布，这取决于你想采取的行动。

你也可以通过完成以下步骤将嵌入代码添加到WordPress菜单中:

1. 在WordPress仪表板上单击外观．
2. 选择定制打开主题编辑器，然后选择小部件．
3. 选择您想添加购买按钮的区域。
4. 点击添加小部件,然后文本⁠。
5. 粘贴购买按钮嵌入代码。
6. 点击保存和发布．

请注意，Shopify购买按钮与WordPress.org平台兼容，但不兼容WordPress.com，由于HTML定制的限制。

为Wix添加一个购买按钮

要添加Shopify购买按钮到您的Wix网站，请遵循以下步骤:

1. 从Wix仪表板中，从我的网站您想要添加“购买”按钮的页面，然后选择编辑网站．
2. 在Wix网站编辑器中，单击+,然后更多的．选择HTML代码．这将向页面添加HTML代码小部件。
3. 点击输入代码．在HTML的设置弹出，粘贴您的购买按钮嵌入代码到在这里添加代码字段。
4. 点击应用．
5. 根据自己的喜好调整HTML代码小部件的大小。如果您在购物车中嵌入了Buy按钮，请记住确保购物车标签是可见的。
6. 调整完成后，单击保存．

值得注意的是，如果您想为多个产品嵌入Buy Button，最好是嵌入一个集合Buy Button，而不是为单个产品嵌入一个Buy Button。如果你嵌入了多个单一产品的购买按钮，那么访问者将看到每个产品的单独购物车。

添加Shopify购买按钮脚本标签

在某些情况下，网站建设者(如Unbounce)将要求您粘贴<脚本>标签，而将其余的代码粘贴在页面的主体中，无论你想要购买按钮出现的地方。

为了做到这一点，您需要分离<脚本>元素的< div >元素的购买按钮嵌入代码。你会看到< div >元素添加到代码顶部。它看起来是这样的:

< div id = "产品组件- 1655929612938”> < / div >

script元素(长得多)构成了嵌入代码的剩余部分，从OB欧宝娱乐APP<脚本type = " text / javascript”>以> < /脚本．

一旦你分离了这些元素，下面是要采取的步骤:

1. 打开要嵌入购买按钮的网站的页眉。
2. 复制并粘贴<脚本>元素，在其整体，到您的网站页眉。
3. 保存更改。
4. 现在，打开要添加Shopify购买按钮的页面编辑器。
5. 复制并粘贴< div >元素进入页面，你想要你的购买按钮出现的任何地方。
6. 保存更改。

添加电子商务到任何网站与Shopify购买按钮

Shopify的“购买按钮”帮助卖家在客户所在的地方与他们见面——无论是页面还是平台。直接向客户销售的便利性，而无需将他们发送到另一个页面，减少了摩擦，有助于促进销售。

对于店主来说，在博客页面上有策略地设置“购买按钮”可以让顾客不用离开页面就能轻松购买产品。

对于博主、艺术家、作家、设计师、播客、有影响力的人，以及任何想要将他们的作品货币化的人，Shopify的购买按钮提供了一种利用Shopify的简单方法电子商务平台而不用建一个全新的网站。

通过可定制的样式、颜色和功能，Shopify购买按钮可以让您将任何页面或网站变成一个成熟的在线商店。欧宝体育官网入口首页

OB欧宝娱乐APP开始14天免费试用shopify -不需要信用卡!

电子邮件地址 OB欧宝娱乐APP开始免费试用