添加嵌入代码

在Shopify管理员中创建购买按钮后,您就可以将其添加到您自己的网站或博客中。

将嵌入代码添加到您网站的源HTML的过程有所不同,具体取决于您希望购买按钮和购物车在您的发布平台上显示的方式和位置,以及有时您在该平台上使用的主题。

注意

如果您需要帮助将嵌入代码添加到Shopify之外的发布平台(例如Squarespace或WordPress.org博客),请直接与您的网站提供商或发布平台联系以获取支持。

相关主题

将嵌入代码添加到WordPress.org博客

将嵌入代码添加到Shopify博客

将嵌入代码添加到Squarespace

将嵌入代码添加到Wix

单独添加脚本标记

将嵌入代码添加到WordPress.org博客

您可以将嵌入代码添加到单个帖子和WordPress.org博客主页上的菜单中。

注意

嵌入式购买按钮与WordPress.org平台兼容,但与WordPress.com不兼容。 本文档描述了WordPress 4.2.2。 您的版本可能会有所不同。 您可以在WordPress支持网站上了解有关WordPress版本的更多信息。

将嵌入代码添加到WordPress帖子

要将嵌入代码添加到单个帖子, 请执行以下操作:

在Shopify中,创建一个购买按钮并从“嵌入代码”对话框中复制其嵌入代码(或单击“将嵌入代码复制到剪贴板”)。

在WordPress仪表板中,单击“帖子”。

单击“添加”以创建新帖子,或单击要显示“购买”按钮的现有帖子的名称。

从“添加新帖子”或“编辑帖子”页面,将文本编辑器从“可视”更改为“文本”模式。

将嵌入代码粘贴到您希望显示“购买”按钮或分类位置的编辑器主文本字段中。

完成后,单击“保存草稿”,“预览”或“发布”。

将嵌入代码添加到Wordpress菜单

要将嵌入代码添加到主页上的菜单, 请执行以下操作:

在WordPress仪表板中,单击“外观”。

单击“自定义”以打开主题编辑器,然后单击“窗口小部件”。

单击要添加“购买”按钮或自定义购物车代码的区域的名称。

打开现有的“文本”小部件,或单击“添加小组件”,然后单击“文本”。

将嵌入代码粘贴到“文本”小部件的主文本字段中。

保存更改。

注意

如果您想更改网站购物车的行为或外观,则可以将自定义购物车代码添加到WordPress.org博客主页上的菜单中。

将嵌入代码添加到Shopify博客

您可以在Shopify博客上的个别帖子中添加嵌入代码:

注意

“购买”按钮可创建单独的购物车。 如果您的客户移动到在线商店中的其他页面,则该商品将不再显示在购物车中。 您可以编辑“购买”按钮直接进入结帐页面。

在Shopify管理员中,单击“在线商店”。

单击博客帖子。

在“博客帖子”页面中,单击要编辑的博客文章的标题,或单击“添加博客帖子”以创建新博客文章。

在“编写博客文章”部分中,单击多文本编辑器中的“显示HTML”。

将您的嵌入代码粘贴到主文本字段中。

单击保存。

将嵌入代码添加到Squarespace

警告

Squarespace上的一些高级自定义是仅限于主题的。 Shopify使用不支持这些自定义,风险自负!

您可以将嵌入代码添加到Squarespace中的各个帖子以及主页上的菜单中。在某些情况下,您可能希望同时执行这两项操作。例如,您可以在主页上嵌入购物车,以便从嵌入单个帖子的“购买按钮”中接收购买。

要向Squarespace中的页面元素添加嵌入代码, 请执行以下操作:

在Squarespace仪表板中,打开要添加嵌入代码的网页。

在页面上找到要显示“购买”按钮或嵌入式购物车的元素,将光标移到“页面内容”区域上,然后单击“编辑”。

单击要添加嵌入代码的插入点。

在“内容块”对话框的“更多”部分中,单击“代码”。

从Shopify管理员处,从“嵌入代码”对话框中复制嵌入代码。

从Squarespace仪表板中,将嵌入代码粘贴到CODE对话框中。确保将文本字段设置为接收HTML。

在EDIT CODE对话框中单击APPLY。

在页面编辑器上再次单击“保存”。由于Squarespace在其信息中心中禁用JavaScript,因此您需要单独预览页面以查看已添加的购买按钮或嵌入式购物车。

注意

如果您将嵌入式购物车添加到Squarespace主页的菜单中,它将从您嵌入单个帖子的购买按钮接收订单。

将嵌入代码添加到Wix

在Shopify管理员中创建购买按钮或分类后,您可以使用Wix网站编辑器将其添加到您的Wix网站。

警告

如果要为多个产品或分类嵌入“购买按钮”,则需要先编辑嵌入代码,然后再将其添加到Wix HTML代码窗口小部件中。如果您在不编辑嵌入代码的情况下将多个购买按钮嵌入到Wix网站中,那么尝试购买多个产品的客户将会看到每个产品的单独购物车。

如果要在Wix网站上显示多个产品而不编辑嵌入代码,则可以嵌入一个分类。您可以在Shopify管理员中为要在Wix上显示的产品创建新分类。

要在Wix网站上为产品或分类嵌入单个“购买”按钮, 请执行以下操作:

从Shopify管理员处为产品或分类创建购买按钮,然后复制其嵌入代码。

在您的Wix帐户中,在“我的网站”部分中找到要编辑的站点,然后单击“编辑站点”。

在Wix网站编辑器中,单击+按钮,然后单击更多。

单击HTML代码以向页面添加HTML代码窗口小部件。

单击输入代码。

在“HTML设置”对话框中,在“在此处添加代码”字段中粘贴“购买按钮”或“分类”的嵌入代码,然后单击“更新”。

调整HTML代码小部件的大小以适应其内容。如果要使用购物车创建嵌入,请确保购物车选项卡显示在正确的位置。

完成后,单击“保存”。

嵌入多个产品或分类

要在您的Wix网站上嵌入多个产品或分类, 请执行以下操作:

从Shopify管理员处为产品或分类创建购买按钮,然后复制其嵌入代码。

将代码粘贴到代码编辑器或Wix网站构建器中。重复前两步,直到创建了所需的“购买按钮”。

编辑嵌入代码以确保它们以正确的对齐方式显示。

在您的Wix帐户中,在“我的网站”部分中找到要编辑的站点,然后单击“编辑站点”。

在Wix网站编辑器中,单击+按钮,然后单击更多。

单击HTML代码以向页面添加HTML代码窗口小部件。

单击输入代码。

在“HTML设置”对话框中,在“在此处添加代码”字段中粘贴已购买按钮的已编辑代码,然后单击“更新”。

调整HTML代码小部件的大小以适应其内容。如果要使用购物车创建嵌入,请确保购物车选项卡显示在正确的位置。

完成后,单击“保存”。

注意

如果您需要帮助使用Wix编辑器,请联系Wix支持。

单独添加脚本标记

某些平台(如Unbounce)要求您将嵌入代码的

要单独添加脚本标记, 请执行以下操作:

从创建购买按钮时生成的嵌入代码中,复制

元素和

打开要嵌入“购买”按钮的网站的页眉。

将整个

保存更改。

从Shopify管理员中的原始嵌入代码中,仅复制

元素。 例如:

打开您要在其中嵌入“购买”按钮的网站页面。

代码段粘贴到页面中。

保存更改。

[Shopify开店教程]添加嵌入代码 was last modified: 9月 10th, 2018 by hosimon

shopify在哪里填写html,[Shopify开店教程]添加嵌入代码相关推荐

  1. 如何在Instagram上开店?Instagram开店教程请收好

    Instagram 是国外非常重要的图像分享平台,具有很强的视觉吸引力.更重要的是,它是最受网红欢迎的社交媒体网站之一,每天有超过5亿用户访问它.巨大的流量和高活跃度,为卖家提供了大量的营销机会.而且 ...

  2. 【淘宝开店教程】淘宝直通车常见问题讲解

    转载者: powerpoint模板下载 搜索: 淘宝开店教程 淘宝直通车常见问题讲解 本文以淘宝家具类开直通车时经常遇到的问题,给大家讲解直通车推广的一些技巧.话不多说,先来看一下直通车推广过程中的一 ...

  3. 【淘宝开店教程】教你借618大促打造店铺爆款宝贝

    转载者: 商务ppt模板下载 搜索: 淘宝开店教程 教你借618大促打造店铺爆款宝贝 距离天猫618年中大促还有十多天,卖家与买家都是摩拳擦掌.而有经验的卖家们早已做好迎战准备,准备大赚一笔.机会总是 ...

  4. 想做抖音小店无货源还在全网找教程?这里有你最需要的开店教程

    大家好,我是电商糖果 最近随着互联网的快速发展,电商也在顺应时代的变化开始有了新的发展模式 抖音小店无货源,一家做短视频的平台却把电商做得风生水起,在双十一,双十二,年货节屡屡出圈. 抖音平台这个大腿 ...

  5. iOS 9应用开发教程之使用代码添加按钮美化按钮

    iOS 9应用开发教程之使用代码添加按钮美化按钮 丰富的用户界面 在iOS9中提供了很多的控件以及视图来丰富用户界面,对于这些视图以及控件我们在上一章中做了简单的介绍.本章我们将详细讲解这些视图. i ...

  6. ​网页图表Highcharts实践教程之图表代码构成

    ​网页图表Highcharts实践教程之图表代码构成 Highcharts第一个实例 下面我们来实现本书的第一个Highcharts实例. [实例1-1]下面来制作北京连续一周最高温度折线图.操作过程 ...

  7. 网页图表Highcharts实践教程之图表代码构成

    网页图表Highcharts实践教程之图表代码构成 Highcharts第一个实例 下面我们来实现本书的第一个Highcharts实例. [实例1-1]下面来制作北京连续一周最高温度折线图.操作过程如 ...

  8. visual studio2019连接SQL Server数据库,增删改查详细教程(C#代码)

    visual studio2019连接SQL Server数据库,增删改查详细教程(C#代码) 工具: 1.Visual Studio 2019 2.SQL Server数据库(我使用的2008) 操 ...

  9. [译]Vulkan教程(04)基础代码

    [译]Vulkan教程(04)基础代码 General structure 通用结构 In the previous chapter you've created a Vulkan project w ...

最新文章

  1. 我什么都没做,文章就自动变成了视频?AI神器解放视频编辑丨百度研究院出品...
  2. 重磅!2019年诺贝尔生理学或医学奖揭晓,“细胞感知氧气通路”摘得桂冠
  3. 每日一皮:为了找个程序员租客,我拼了!
  4. 天翼云从业认证(3.3)天翼云网络产品
  5. python学习-高阶函数(函数传参、返回函数(闭包)、匿名函数lambda)
  6. centos php 开启libgdgd_CentOS搭建PHP环境
  7. 某法院HP-P4500存储数据恢复案例
  8. js-cookie使用方法
  9. 让你久等了!《码出高效:Java 开发手册》正式发布
  10. C#通过序列化实现深表复制
  11. Oracle数据库模糊查询
  12. 【Oracle SQL】计算同比与环比(列转行进行偏移)
  13. 数组的常用算法(1)--由“为了集齐108将买多少袋干脆面”展开去
  14. java怎么连发子弹_HTML-坦克大战-完成子弹连发功能(三)
  15. 2017年营销行业八大趋势预测,H5居然...
  16. 身份证ocr的API接口,让身份证信息录入更快捷
  17. 【文件夹访问被拒绝】删文件夹的时候遇到“你需要权限来执行此操作 你需要来自 我的本\Administrator 的权限才能对此文件夹进行更改”
  18. Excel粘贴长文本数字 精度丢失
  19. android build.ninja,Android中的Ninja简介
  20. SQL Server 存储过程中使用raiserror抛出异常

热门文章

  1. ssm(springMVC + spring+MyBatis) 小例
  2. 模式-视图-控制器模式2.0
  3. 行内元素中间出现空隙
  4. ESFramework 可复用的通信框架(序)
  5. CreateThread函数
  6. Firefox 66回归!修复多项臭虫相关问题
  7. MVC日期格式化,后台使用Newtonsoft.Json序列化日期,前端使用”f”格式化日期
  8. LInux 下文件包的使用
  9. 将DataTable 数据插入 SQL SERVER 数据库
  10. oracle中游标的使用