Shopify不仅适用于发展成熟的电子商务企业,还适合于博主、艺术家、作家、设计师、播客主持人和网红等任何希望通过在线销售项目获益的的人。
然而,搭建网站需要时间,将客户通过链接引导至网站会让结账变得困难,可能会对销售产生负面影响。此时,Shopify购买按钮(Buy Button)可以解决这个问题。
添加Shopify购买按钮(Buy Button)的三个步骤
1. 将购买按钮销售渠道添加到Shopify商店
首先,登录Shopify商店。如果在左侧菜单中的销售渠道(Sales channels)下可以看到购买按钮(Buy Button),可以跳过,直接进入第二个步骤。
在桌面上
- 打开Shopify应用商店中的Buy Button channel页面,你也可以通过后台进入该页面,“设置”>“访问 Shopify应用商店”,然后搜索“Buy Button(购买按钮)”来访问此页面。
- 点击“添加应用”,然后在下一个屏幕上点击“添加销售渠道(Add sales channel)”。
页面刷新后,就可以在左侧菜单的“销售渠道(Sales channels)”下看到购买按钮。为了方便后续访问,请确保将该渠道固定到导航(Pin to your navigation)中。
如果没有将该按钮固定,可以点击“销售渠道”,在已安装的渠道下就可以看到它。
在移动设备上
- 在移动设备上打开Shopify应用,从底部菜单选择“商店(Store)”。
- 在“销售渠道(Sales channels)”旁边,选择“添加渠道(Add channel)”在iPhone上或+在Android上。
- 从选项列表中选择“购买按钮(Buy Button)”,然后点击“添加购买按钮(Add Buy Button)”。
2. 创建购买按钮
添加购买按钮销售渠道后,就可以创建购买按钮了。转至购买按钮页面,然后点击点击“创建购买按钮(Create a Buy Button)”
你可以为单个产品或整个产品系列创建购买按钮。在下一个页面中,根据自身业务需求选择各种选项,然后搜索想用来创建购买按钮的产品或系列。
勾选复选框,然后点击“选择(Select)”。
选择后,就进入了购买按钮编辑器,在这里,你可以自定义购买按钮的外观。
如何自定义购买按钮
在购买按钮编辑器中,左侧列出了一些用于自定义购买按钮外观和感觉的选项,右侧是效果预览。
根据自己的喜好调整左侧的选项,预览会自动更新,你可以在调整时看到购买按钮的外观。你还可以点击编辑器顶部的桌面或移动图标,查看购买按钮在桌面和移动屏幕上的显示效果。
以下是购买按钮自定义的选项:
- 产品变体:选择希望添加购买按钮后可购买的产品变体,默认情况下,会选择所有变体。
- 布局:在“基本”、“经典”和“全视图”之间选择,右侧可以看到选择每个布局时的预览。
- 点击时的操作:选择“添加产品到购物车”、“直接结账”或“打开产品详情”。选择“添加产品到购物车”将创建一个购物车小部件;“直接结账”选项将创建一个立即购买按钮,直接将用户带入结账流程(请注意,使用此选项,客户无法将多个商品添加到购物车);“打开产品详情”选项将创建一个查看产品按钮,打开一个包含产品信息和添加到购物车按钮的弹出窗口。
- 按钮样式:你可以利用这个选项调整购买按钮的颜色、字体、大小和边角的形状。
- 布局:你可以使用布局菜单对按钮的布局进行更细致的调整,包括自定义字体颜色、按钮文本和排版设置。
- 购物车:你可以利用这个选项调整购物车小部件的设置,包括文本和颜色。请注意,如果选择的是“直接结账”布局,此选项将变为灰色,因为这个选项下没有购物车小部件。
- 详细弹出窗口:如果在“点击时的操作”下选择了“打开产品详情”,就可以在这个部分自定义弹出窗口的文本、颜色和排版选项。
- 高级设置:你可以利用这个设置来调整如何向用户提供结账服务,可以选择“打开弹出窗口”,创建一个在订单完成后关闭的弹出结账;或选择“在同一标签页中重定向”,直接把用户转移到Shopify商店的 结账页面,并在交易完成后将用户带回原来的页面。
请记住,调整这些设置不会更改已经嵌入的购买按钮。在进入下一步之前,确保购买按钮的格式符合你的要求。
对设计满意时,请点击右上角的“下一步”按钮。
3. 将购买按钮嵌入代码添加至网站的HTML
点击“下一步”时,就会自动生成购买按钮的嵌入代码。如果准备在网页上嵌入,请点击“复制代码”按钮,或者,如果你想返回购买按钮编辑器再做调整,可以点击“继续自定义”按钮。
在此处复制的代码可以粘贴到任何网页的HTML中,购买按钮和购物车就成功创建了,并直接与你的Shopify管理后台相连 。这样一来,你就可以在任何网页中管理和处理订单了。
请注意,添加嵌入代码的过程并非完全一致,会受到多种因素的影响,包括按钮的外观、建站工具以及网站的主题模版。
如果想在Shopify商店的登录页面或博客文章、Squarespace网站或WordPress博客中嵌入Shopify购买按钮,可以遵循以下步骤:
将嵌入代码添加至Shopify商店的登录页面或博客文章
Shopify商店将已内置了产品页面和购物车,然而,出于各种需求,你也可以将购买按钮直接添加到页面或博客文章中。
例如,你正在撰写关于新品的博客文章,出于方便考虑,你希望读者可以直接在文章页面购买,而不是跳转到其他页面上。
在这种情况下,可以遵循以下步骤:
- 首先,按照上述步骤复制购买按钮的嵌入代码
- 在Shopify管理后台中,转到“在线商店”>“博客文章”,或“在线商店”>“页面”,具体选择哪一个操作取决于你想将购买按钮添加到博客文章还是其他页面。
- 选择想要添加购买按钮的博客文章或页面。
- 在“内容”窗口中,选择“<>”按钮,从编辑视图切换到HTML视图。
- 将之前复制的嵌入代码粘贴到HTML编辑器中,放置在你希望其出现的位置,然后点击“保存”。
保存页面或博客文章后,购买按钮就成功添加了。如果想在发布前查看按钮外观,在页面编辑器右上角选择“预览”。如果按钮添加到了其它页面,则选择“查看页面”。
将购买按钮添加到Squarespace网站
在Squarespace上,你可以将购买按钮添加到单个文章或主页菜单中,以下是添加步骤:
- 首先,按照上述步骤复制购买按钮的嵌入代码。
- 登录Squarespace后台,打开想要添加购买按钮的页面。
- 将鼠标移到页面中你希望购买按钮出现的区域,然后点击“编辑”。
- 选择添加嵌入代码的插入点。
- 在“内容块”菜单中,在“更多”部分下选择“代码”。
- 在右上角的下拉菜单中选择“HTML”,然后将购买按钮嵌入代码粘贴到“代码”字段中。
- 点击“应用”。
请注意,有的Squarespace可定制模版可能需要更高级的HTML知识,在这种情况下,最好直接联系开发人员获取帮助。
将购买按钮添加到WordPress博客
要将购买按钮添加到WordPress.org网站的文章中:
- 首先,按照上述步骤复制购买按钮的嵌入代码。
- 在WordPress管理后台中,转至文章,并选择想要添加购买按钮的文章。
- 根据所使用的WordPress编辑器版本,完成以下其中一个步骤:
- 如果使用的是WordPress网站的经典编辑器,请点击编辑器中的“文本”选项卡,从可视视图切换到文本视图。
- 如果使用的是WordPress网站的区块编辑器,请点击“+”按钮,然后搜索并选择“自定义 HTML”。
- 将购买按钮嵌入代码粘贴至希望其出现的地方。
- 点击“保存草稿”、“预览”或“发布”。
你还可以通过以下步骤将嵌入代码添加到WordPress菜单中:
- 首先,按照上述步骤复制购买按钮嵌入代码。
- 在WordPress管理后台中,点击“外观”。
- 选择“自定义”,打开主题编辑器,然后选择“小部件”。
- 选择想要添加购买按钮的区域。
- 点击“添加小部件”,然后选择“文本”。
- 粘贴购买按钮的嵌入代码。
- 点击“保存并发布”。
请注意,由于HTML自定义限制,Shopify购买按钮只能与WordPress.org平台兼容,而与WordPress.com是不兼容的。
将购买按钮添加到Wix
将Shopify购买按钮添加到Wix网站的步骤如下:
- 首先,按照上述步骤复制购买按钮的嵌入代码。
- 在Wix管理后台中,从“我的网站(My Sites)”页面选择希望添加购买按钮的网站,然后选择“编辑网站”。
- 在Wix网站编辑器中,点击“+”,然后选择“更多”。选择“HTML代码”,就会在页面上添加一个 HTML代码小部件。
- 点击“输入代码”。在“HTML设置”弹出窗口中,将购买按钮嵌入代码粘贴到“在此处添加代码”字段中。
- 点击“应用”。
- 根据喜好调整HTML代码小部件的大小。如果嵌入了带购物车的购买按钮,请确保购物车选项卡可见。
- 完成调整后,点击“保存”。
值得注意的是,如果想要为多个产品嵌入购买按钮,最好嵌入一个集合购买按钮,而不是为每一个产品都嵌入按钮。如果你嵌入多个单品购买按钮,访客将看到每个产品都有一个独立的购物车。
添加Shopify购买按钮脚本代码
在某些情况下,建站工具(例如 Unbounce)会要求将script代码单独粘贴到页眉中,同时将代码的其余部分粘贴到页面的正文中,即你希望购买按钮显示的位置。
为此,就需要将购买按钮嵌入代码中的script元素与div元素分开。div元素在代码顶部看到,是这样的:
<div id="product-component-1655929612938"></div>
script元素是嵌入代码其余的部分,比div元素长得多,以 script type="text/javascript" 开头,以 /script 结尾。
将这些元素分开后,请执行以下步骤:
- 打开要嵌入购买按钮页面的页眉。
- 将script元素完整地复制并粘贴到页面页眉中。
- 保存更改。
- 打开要添加Shopify购买按钮页面的页面编辑器。
- 将div元素复制并粘贴到页面中希望购买按钮显示的位置。
- 保存更改。
使用Shopify购买按钮为网站添加电子商务功能
Shopify购买按钮(Buy Button )可帮助电商卖家在任何页面或平台上直接向客户销售商品,无需跳转至其他页面,可以减少阻力,促进销售。例如,卖家也可将购买按钮(Buy Button)策略性地放置在博客页面上,客户无需离开当前页面即可轻松购买产品。
对于博主、艺术家、作家、设计师、播客、网红以及希望通过其作品获利的人来说,Shopify购买按钮提供了一种简单的方式,让他们无需构建全新的网站即可利用Shopify的电子商务平台。
你可以自定义Shopify购买按钮的样式、颜色和功能, 将任何页面或网站转变为功能齐全的在线商店。
免费试用Shopify,无需信用卡!
Shopify购买按钮(Buy Button)——常见问题
如何在Shopify上添加购买按钮(Buy Button)?
Shopify购买按钮(Buy Button) 有什么作用?
借助Shopify购买按钮(Buy Button),访客无需直接访问网站即可购买Shopify商店中的产品。你可以使用自定义的HTML将购买按钮添加到任何非Shopify网站或博客,从而将Shopify电子商务工具集成到非 Shopify网站上。
Shopify购买按钮(Buy Button) 安全吗?
安全。使用购买按钮(Buy Button)时, 访客会被引导至完全受保护且符合PCI标准的Shopify结账页面来处理交易,因此,Shopify购买按钮是一种安全可靠的产品和服务销售方式。Shopify的合规性涵盖所有六个 PCI 标准类别,适用于Shopify平台上的每个结账流程。
Shopify购买按钮(Buy Button) 的费用是多少?
Shopify购买按钮(Buy Button) 是Shopify的其中一个订阅套餐,属于入门套餐,每月5美元(约35元人民币)。
使用Shopify购买按钮(Buy Button) 有哪些好处?
有了Shopify购买按钮(Buy Button),你无需创建网站,即可使用Shopify的安全结账和电子商务管理工具在任何网页或博客文章上销售产品或服务。购买按钮可以提供顺畅的结账体验,有助于在高流量页面上实现更多销售。