写给初学者的HTML和CSS编码规范

TML配置

文件应以“”首行顶格开始，推荐使用“”。
必须申明文档的编码charset，并且使用UTF-8编码。
移动端必须使用 viewport 适配
页面title是极为重要的不可缺少的一项。

以下是一个标准的html结构

html复制代码<!DOCTYPE html>
<html>
  <head>
    <!-- 必须声明 utf-8 编码格式 -->
    <meta charset="utf-8">
    <!-- 页面标题不能为空 -->
    <title>京东商城:商家后台</title>
    <!-- 移动端必须使用 viewport 适配需要, PC 看场景需要使用 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
     
    <!-- 样式文件 以外链形式在此处引入 -->
    <link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
  </head>
  <body>
    <!-- 页面主体 -->
    <div class="warp">
      <header>顶部内容区域，比如：菜单头</header>
      <div class="content">主内容区域</div>
      <footer>顶部页尾区域，比如：备案号</footer>
    </div>
     
    <!-- js文件 在此处引入 -->
    <script type="text/javascript" src="//wl.jd.com/joya.js"></script>
  </body>
</html>

主框架(jQuery,vue,react,angular等) 避免混合使用

避免多个框架混合使用，在同一个工程里面要保持主框架的一致性，多框架同时使用会造成代码混乱，后期会变得越来越难维护。

Css开发规范

1、全局样式禁止使用!important

2、避免使用导入式引入css样式文件；

css复制代码<style type="text/css">
  @import url(./demo.css);
</style>

未使用的js/css禁止引用

历史页面会有一些功能下线，在去除页面初始化的js语句的同时，也要将依赖的js文件删除，避免资源加载浪费

文件必须使用gzip压缩

开启Gzip压缩功能，可以使网站的css、js 、xml、html 文件在传输时进行压缩，提高访问速度

api接口中，无用字段占传输比例30%以上时，删除无用字段

在开发过程中，发现无用字段占传输比例30%以上时，请进行返回数据的删减，加快数据请求速度

关于图片压缩

上传图片之前一定要做图片的无损压缩，节省网络流量,推荐网站tinypng

HTML的标准结构

html复制代码<!DOCTYPE html>
<html>
  <head>
    <!-- 必须声明 utf-8 编码格式 -->
    <meta charset="utf-8">
    <!-- keywords 关键词 和 Description 页面描述 便于搜索引擎检索，不强制使用 -->
    <meta name="Keywords" Content=”关键词1,关键词2,关键词3,关键词4″>
    <meta name="Description" Content=”页面描述″>
    <!-- 移动端必须使用 viewport 适配需要, PC 看场景需要使用 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <!-- 推荐手动引入指定路径 favicon  -->
    <link rel="shortcut icon" href="path/to/favicon.ico">
    <!-- 样式文件必须以外链形式在此处引入 -->
    <link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
    <!-- 内联样式 -->
    <style type="text/css">
      .warp {
        margin: 0;
        padding: 0;
      }
    </style> -->
    <!-- 页面标题不能为空 -->
    <title>页面标题</title>
  </head>
  <body>
  <!-- 页面主体 -->
    <div class="warp">
    <header>顶部内容区域，比如：菜单头</header>
    <div class="content">主内容区域</div>
    <footer>顶部页尾区域，比如：备案号</footer>
    </div>
 
    <!-- JavaScript 文件在此处引入 -->
    <script type="text/javascript" src="//wl.jd.com/joya.js"></script>
  </body>
</html>

不同模块区域可使用简要备注标识模块内容
HTML 标签语义化使结构清晰，比如：
CSS 外链引入必须放在中
JS 外链引入必须放在中
省略图像、媒体文件、样式表和脚本等嵌入式资源 URL 协议头部声明 ( http:// , https:// )，用//代替。
favicon 在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证 favicon 可访问，避免404，必须遵循以下两种方法之一：1。在 Web Server 根目录放置 favicon.ico 文件，2。使用 link 指定 favicon

HTML标签使用守则

标签小写

原生 HTML 标签元素小写使用，自定义组件使用小驼峰命名（自定义标签避免和原生标签同名）

html复制代码<!-- 错误 ❌ -->
<DIV></DIV>
<SPAN></SPAN>  
 
<!-- 正确 ✅ -->
<div></div>  
<p></p> 
 
<!-- 自定义组件 -->
<shareDialog><shareDialog/>

套用规则

禁止在行内元素中嵌套块级元素❗️

html复制代码<!-- 错误的嵌套 ❌ -->
<span><div></div></span>  
<i><p></p></i>     
 
<!-- 正确的嵌套 ✅ -->
<div><span></span></div>  
<p><i></i></p>

更多标签使用规则介绍请查看尾部附录

属性定义

定义属性赋值时，使用双引号，禁止单双引号混用

html复制代码<!-- 错误的定义 ❌ -->
<input id="formTitle" type='text' placeholder="请输入标题">   
 
<!-- 正确的定义 ✅ -->
<input id="formTitle" type="text" placeholder="请输入标题" data="formTitle">

正确闭合

除自闭合标签外，所有标签都需正确的编写闭合标签

常用自闭合标签： <br />、<col />、<img />、<input />、<link />、<meta />、<keygen />

ID、Class 命名使用规范

ID 和 Class 取通用且有意义的名字；

使用连字符 - 作为 ID、Class 名称界定符，不要驼峰命名法和下划线；

避免选择器嵌套层级过多，尽量少于 3 级；

使用命名空间防止命名冲突，利于维护；

css复制代码/* 不推荐: 无意义 不易理解 */
#yee-1901 {}
#meunBtn {}
.login_input {}
 
/* 推荐: 明确详细 */
#gallery {}
#login {}
.login-input {}
.meun-btn {}

避免选择器和 Class、ID 叠加使用
声明顺序，相关属性应为一组，建议遵循：定位布局属性 -> 盒模型属性 -> 文本属性 -> 视觉属性 -> 其他属性
对于 JS 操作相关选择器前面需加上特殊应用标识前缀

css复制代码/* 标准的声明顺序 */
.declaration-order {
  /* 布局属性 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
 
  /* 盒模型属性 */
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  margin: 10px;
  float: right;
  overflow: hidden;
 
  /* 文本属性 */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  text-align: center;
 
  /* 视觉属性 */
  background-color: #f5f5f5;
  color: #fff;
  opacity: .8;
 
  /* 其他属性 */
  cursor: pointer;
}

图片相关使用规范

<img/>标签守则

src 属性不能为空，需添加默认值（托底图片路径）
为重要图片添加 alt 属性，当无法显示图像时，浏览器将显示替代文本，便于 SEO 及用户阅读
为图片标签增加 width 和 height 属性，避免图片加载从无到有，导致页面抖动
大量图片流资源，使用懒加载技术按需加载

html复制代码<!-- 禁止 src 取值为空 -->
<img src="" />
 
<!-- 推荐 -->
<img src="xxxx" alt="xxx" style="width:100px;height:100px;" />

图片资源守则

大小

尺寸小于 50 × 50 的请使用字体图标（iconfont）或者将多个图标合成一张大图使用（雪碧图）尺寸大于 50 × 50 的图片，引入前先使用在线压缩对其进行压缩，图片大小尽量控制在 300kb 以内

倍率

PC端、移动端推荐使用 2倍图 (@2x），避免设备分辨率过高，图片显示失真模糊如有兼容 iPad 场景等特殊场景，可使用 3倍图（@3x）

html复制代码<img src="//logo@200x200.jpg" alt="xx" style="width:100px;height:100px;"/>

2倍图：图片展示区域大小 : 图片实际尺寸 = 1 ：2

无论使用几倍图，图片大小都需遵守上条限制

如遇图片倍图问题，可咨询 @UI童鞋

性能守则

避免不必要的 DOM 操作浏览器遍历 DOM 元素的代价是昂贵的。最简单优化 DOM 树查询的方案是，当一个元素出现多次时，将它保存在一个变量中，来避免多次查询 DOM 树。

js复制代码/* 推荐用变量保存频繁使用的 DOM 元素*/
var ul = document.getElementsByTagName('ul')[0],
  lis = document.getElementsByTagName('ul')[0].getElementsByTagName('p')
   
/* 推荐用变量保存频繁使用的 DOM 元素*/
var ul = document.getElementsByTagName('ul')[0],
  lis = ul.getElementsByTagName('li')

异步加载第三方内容当你无法保证嵌入第三方内容比如埋点、调研等资源正常工作的时候，你需要考虑用异步加载这些代码，避免阻塞整个页面加载。
减少标签的数量编写 HTML 代码时，尽量避免多余的标签嵌套，避免 DOM树的冗余
控制静态资源数量

1个页面中建议CSS文件不要超过3个（1个组件库样式文件、1个项目公共样式、1个页面样式）； JS文件不要超过5个（1个框架文件、1个组件库文件、1个项目公共库文件、1个页面脚本文件、1个埋点文件）。

编码建议

缩进使用 2个空格样式建议引入 CSS reset 重置各浏览器自带样式差异 github.com/necolas/nor… JS 中字符串定义使用 '' 单引号

其他建议

保持一定的代码洁癖，尤其在大型项目中

代码逻辑应当直截了当，清晰易读，保持与业务逻辑与代码一一对应关系，减少逻辑错误的可能性，降低二次开发成本；
删除过期无用代码，减少代码过大，造成不必要的维护成本
代码尽量复用，拥有组件化思想
代码命名合理化，即使不写注释情况下，也可以让其他开发人员一眼明白意思
性能调至最优，降低耦合度，避免别人做不合理的优化时而造成的混乱
整洁的模块边界，明确的划分模块之间的逻辑边界，尽量保证职责单一，避免功能交叉混杂
让代码没有改进的余地，在开发时把各种情况都想到了，如果有人企图改进它，总是会回到原点

性能检测工具 - Lighthouse简介 Lighthouse是一个Google开源的自动化工具，主要用于改进网络应用的质量。Lighthouse会对各个测试项的结果打分，并给出优化建议，这些打分标准和优化建议可以视为Google的网页最佳实践。

Chrome拓展程序谷歌商店安装lighthouse后，在右上角或者菜单里点击图中图标，Options可以配置测试项目，点击Generate report即可测试。

命令行

js复制代码<!-- 安装 lighthouse 组件（Node.js V5.0 或以上版本） -->
npm install -g lighthouse
<!-- 启动测试 （测试过程中会自动打开 Chrome 完成后会在当前目录生成一个静态HTML文件） -->
lighthouse https://www.baidu.com/ --view
<!-- 帮助-->
lighthouse --help

检测结果

【附录】常用的标签规范

标签	语义	嵌套常见错误	常用属性
<a></a>	超链接/锚	a不可嵌套a	href,name,title,rel,target
<div></div>	块级容器
<p></p>	段落	不能嵌套块级元素
<span></span>	内联容器（行内元素）	不可嵌套块级容器
<form></form>	表单		action,target,method,name
<input />	输入框	不可嵌套元素	type,name,value,checked,disabled,maxlength,readonly,accesskey
<textarea></textarea>	多行文本输入控件		name,accesskey,disabled,readonly,rows,cols
<img />	图像	不可嵌套元素	alt,src,width,height
<label></label>	标签（常用input元素定义标注）	不可嵌套块级容器	for
<table></table>	表格	只可嵌套表格子元素	width,align,background,cellpadding,cellspacing,summary,border
<tbody></tbody>	表格主体	只能嵌套在table内
<thead></thead>	表头	只能嵌套在table内
<tr></tr>	表格行	嵌套于table或thead、tbody、tfoot
<td></td>	表格中的单元格	只用于tr	colspan,rowspan
<th></th>	表格中的标题单元格	只用于tr	colspan,rowspan
<tfoot></tfoot>	表格表尾	只用于table
<button></button>	按钮	不可嵌套表单、表格等块级元素	type,disabled
<select></select>	列表框或下拉框	只能嵌套option或optgroup	name,disabled,multiple
<option></option>	select中的一个选项	只能嵌套在select内	value,selected,disabled
<ol></ol>	有序列表	只能嵌套li
<ul></ul>	无序列表	只能嵌套li
<li></li>	无序列表项	只能嵌套在 ul 或 ol 内
<iframe></iframe>	内嵌一个网页		frameborder,width,height,src,scrolling,name
<br />	换行
<link />	引用样式或icon	不可嵌套任何元素	type,rel,href
<meta />	文档信息	只用于head内	content,http-equiv,name
<script></script>	引用脚本	不可嵌套任何元素	type,src
<style></style>	引用样式	不可嵌套任何元素	type,media
<title></title>	文档标题	只用于head内

点赞收藏支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。

作者：StriveToY
链接：https://juejin.cn/post/7262378982255394873

么是小程序在线制作工具？

小程序已经成为企业、商家乃至个人展示自身、提供服务的重要平台。然而，对于许多人来说，从零开始开发一个小程序可能是一项既复杂又耗时的任务。这时，小程序在线制作工具就派上了用场。简而言之，小程序在线制作工具是一种在线平台，它为用户提供了丰富的模板和简易的编辑界面，让用户无需编写复杂的代码，即可快速创建并发布小程序。无论是想要搭建一个在线商城，还是推出一个互动游戏，甚至是制作一个展示型的小程序，这些工具都能提供一站式的解决方案。

小程序在线制作工具的最大亮点之一，就是其提供的海量模板。这些模板涵盖了各行各业，无论是电商、餐饮、教育还是娱乐，都能找到适合的模板。用户只需挑选心仪的模板，然后根据自身需求进行简单的编辑和设置，即可快速生成一个功能完善、界面精美的小程序。此外，这些工具还支持实时预览和一键发布，极大地提高了制作效率。使用小程序在线制作工具，能让你轻松拥有属于自己的小程序，实现更广泛的商业价值和影响力。

小程序在线制作工具有哪些？

易极赞提供了丰富的行业小程序模板的设计，支持可视化编辑页面，免安装一键生成。开箱即用

使用小程序模板制作数码商城的优势？

使用小程序模板制作数码商城具有诸多好处，包括节省开发时间和成本、提升用户体验和竞争力。

拥有一个专业的数码商城小程序是拓展业务、提升品牌形象的关键。使用小程序模板来制作数码商城，不仅省去了从零开始开发的繁琐过程，更带来了诸多好处。首先，模板化的设计让商城搭建变得简单快捷，无需专业的编程技能，即可通过简单的操作完成商城的搭建。这大大节省了开发时间和成本，让您能够更快速地投入运营。

小程序模板提供了丰富的功能和样式选择，满足了数码商城的各种需求。您可以根据自己的喜好和商城特点，选择合适的模板样式，并轻松添加商品展示、购物车、订单管理等功能。这些功能能够提升用户体验，增强用户粘性，帮助您的商城在众多竞争对手中脱颖而出。此外，小程序模板还支持自定义设置，您可以根据实际需求调整商城的布局、颜色、字体等细节，使商城更具个性化和专业化。

数码小程序案例展示

下面的小程序模板，你可以在易极赞的小程序模板库中找到，支持一键发布，在线编辑，小程序数码商城方案所见即所得。

易极赞提供近80套小程序模板案例，开箱即用，在线编辑

越来越多的平台提供在线制作小程序的工具，通过预制的模板来创建微信小程序。平台提供用户友好的界面和预先设计好的模块，允许你使用拖放功能来定制和建立一个小程序。比如你可以在易极赞上，选择一个你喜欢的数码模板，一键即可生成发布自己的小程序。小程序上线后将拥有如下业务功能。

微信支付：支持微信支付，方便快捷安全地完成购买。客户可以使用微信支付轻松购买商品，无需繁琐的注册和支付流程。实时到账，安全可靠，让客户更放心。
产品上架：轻松上传和发布您的产品，让更多客户了解并购买。简单易用的产品上传功能，让您轻松添加和管理产品。支持多种产品展示方式，如图文详情、视频展示等，让客户更直观地了解产品。
分销功能：实现客户邀请客户，让更多人参与您的销售网络。客户可以通过分享商城小程序给朋友或朋友圈，邀请更多人购买。被邀请客户可以成为您的下级分销商，享受更多优惠和返利。
会员管理：提供会员卡服务，吸引更多客户并提高忠诚度,客户可以成为会员并享受专属优惠和特权。会员卡可以设置不同的等级和福利，满足不同客户需求。
小票机打印：收到新的订单后，小票机自动打印，
优惠促销功能：支持限时秒杀，团购，满减优惠券等常用电商功能。

数码小程序开通制作流程

接下来，根据业务需求，自定义修改模板内的内容，包括文字、图片、按钮等，确保小程序内容符合品牌形象和用户需求。随后，进行功能模块的调试与优化，确保小程序运行流畅、功能完善。最后，进行严格的测试，确保小程序在不同设备和网络环境下均能正常运行。整个流程无需从零开始编写代码，大大节省了开发时间，让您快速拥有专业级的数码小程序。

第一步，选择一个小程序模板，然后点击创建小程序。

第二步，在线编辑小程序，修改文本和图片，上传产品等

第三步，提交到微信公众号官网，提交申请小程序，并将我们创建的站点绑定到小程序上，这样我们的一个数码商城小程序就创建好了

数码小程序：打造沉浸式品牌体验新纪元

数码小程序，不仅是您品牌与潜在客户之间沟通的桥梁，更是展现品牌魅力与实力的窗口。以下，我们为您揭示数码小程序背后的魅力：

1，视觉盛宴：审美与设计并重
数码小程序，首先以独特的美学设计吸引用户的目光。它如同一张精美的名片，让用户在第一时间感受到品牌的精致与独特，进而激发点击与探索的欲望。

2，线上线下无缝衔接：实体店与小程序互动
对于拥有实体店的数码品牌，小程序提供了线上线下的无缝衔接。用户可以在小程序中轻松找到您的实体店位置，一键导航，实现线上线下的无缝转换。

3，客户至上：小程序构建个性化服务体系
数码小程序更是一个强大的客户管理系统。通过收集用户信息，提供个性化服务，建立长期稳定的客户关系，让每一位用户都感受到品牌的关怀与温暖。

4，社交互动：微信生态中的活跃分子
作为微信生态的一部分，数码小程序充分利用了社交属性。用户可以在小程序中分享内容、参与活动，与好友互动，将品牌信息传播得更远、更广。

5，创新体验：娱乐与智能的完美结合
数码小程序不仅仅是一个购物平台，更是一个创新的体验中心。它结合了娱乐性与智能性，如推出独特的品牌小游戏，让用户在互动中深入了解品牌历史与文化，体验与众不同的数字化之旅。

制作一个数码商城小程序需要多少钱

许多企业主在筹备数码商城小程序时常常犹豫不决，担心技术难度高、成本高昂。

如今，随着小程序制作平台的兴起，这些担忧已不复存在。无需专业的技术或设计背景，只需选择一个与你业务相匹配的数码商城小程序模板，借助小程序在线制作平台，你可以轻松制作出一个功能齐全、设计精美的商城小程序。通过简单的操作，替换图片、调整文案，即可让你的商城小程序焕然一新，快速上线。

与传统的商城建设方式相比，使用数码商城小程序制作平台具有诸多优势。首先，技术门槛低，无需雇佣专业技术人员，即可轻松完成商城的搭建。其次，成本投入少，平台提供一站式服务，包括服务器托管、带宽支持等，无需额外支付高额费用。此外，这些平台还提供网站安全、备份和性能优化等服务，让你能够专注于业务的发展，而无需为商城的运营而烦恼。

原文出自易极赞

https://www.yjzan.com/yjznews/c02fb991.html

Shopify后台创建 Buy Button 后，就可以将其添加到自己的网站或博客。

将嵌入代码添加到您网站的源 HTML 的过程略有不同，具体取决于您希望 Buy Button 和购物车显示的方式和位置、您的发布平台，有时还取决于您在该平台上使用的模版。

备注:如果您需要将嵌入代码添加到 Shopify 以外的发布平台（例如 Squarespace 或 WordPress.org 博客）方面的帮助，请直接联系您的网站提供商或发布平台获取支持。

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

您可以将嵌入代码添加到 WordPress.org 博客的各篇文章以及主页上的菜单中。

备注:嵌入式 Buy Button 与 WordPress.org 平台兼容，但与 WordPress.com 不兼容。本文档介绍的是 WordPress 4.2.2。您的版本可能有所不同。您可以在 WordPress 支持网站上了解有关 WordPress 版本的详细信息。

将嵌入代码添加到 WordPress 文章

步骤：

在 Shopify 中，创建 Buy Button，并从嵌入代码对话框中复制其嵌入代码（或单击 Copy embed code to clipboard（将嵌入代码复制到剪贴板））。

在您的 WordPress 控制面板中，单击 Posts（文章）。

单击 Add New（新增）以新建文章，或单击您想显示 Buy Button 的现有文章的名称。

在 Add New Post（添加新文章）或 Edit Post（编辑文章）页面中，将文本编辑器从 Visual（视觉）更改为 Text（文本）模式。

在编辑器的主文本字段中，将嵌入代码粘贴到您希望显示 Buy Button 或产品系列的位置。

完成后，单击 Save Draft（保存草稿）、预览或发布。

将嵌入代码添加到 Wordpress 菜单

步骤：

在 WordPress dashboard（WordPress 控制面板）中，单击外观。

单击自定义以打开模版编辑器，然后单击小组件。

单击要添加 Buy Button 或自定义购物车代码的区域的名称。

打开现有文本小组件，或依次单击添加小组件和文本。

将嵌入代码粘贴到文本小组件内的主要文本字段。

保存更改。

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

将嵌入代码添加到您的 Shopify 博客

备注: Buy Button 会创建一个单独的购物车。如果客户移动至您在线商店中的不同页面，产品则不会再显示在购物车中。您可以编辑 Buy Button以直接指向结账。

步骤：

在 Shopify 后台中，转到在线商店 > 博客文章。

在博客文章页面中，单击要编辑的博客文章的标题，或单击添加博客文章以创建新的博客文章。4. 在撰写博客文章部分，单击格式文本编辑器中的显示 HTML。

5. 将您的嵌入代码粘贴到主文本字段中。6. 单击保存。

将嵌入代码添加到 Squarespace

备注: Squarespace 上的部分高级自定义项是特定于模版的。Shopify 不支持这些自定义项。

您可以将嵌入代码添加到 Squarespace 的各文章中以及主页上的菜单中。在某些情况下，您可能希望同时添加到上述两处位置。例如，您可以在主页上嵌入购物车，以便接收来自嵌入各文章的 Buy Button 的购买。

步骤：

在 Squarespace 控制面板中，打开您要在其中添加嵌入代码的网页。

找到您希望显示 Buy Button 或嵌入式购物车的页面上的元素，将光标移到页面内容区域上，然后单击编辑。

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

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

在 Shopify 后台，复制嵌入代码对话框中的嵌入代码。

在您的 Squarespace 控制面板中，将嵌入代码粘贴到代码对话框中。请务必将文本字段设置为接收 HTML。

在 EDIT CODE（编辑代码）对话框中单击 APPLY（应用）。

再次单击页面编辑器上的保存。由于 Squarespace 在其控制面板中禁用了 JavaScript，因此您需要单独预览页面才能查看您添加的 Buy Button 或嵌入式购物车。

如果您完成了步骤，但 Buy Button 并未加载，则您可能需要禁用 Ajax 加载。要查看更多详细信息，请转到启用或禁用 Ajax。

备注:如果您将嵌入式购物车添加到 Squarespace 主页上的菜单中，它将接收来自您嵌入各文章的 Buy Button 的订单。

将嵌入代码添加到 Wix

在 Shopify 后台内创建 Buy Button 或产品系列后，您可以使用 Wix 网站编辑器将其添加到您的 Wix 网站。

备注: 如果您想为多个产品或产品系列嵌入 Buy Button，则需要先编辑嵌入代码，然后再将其添加到 Wix HTML 代码小组件。如果您在没有编辑嵌入代码的情况下将多个 Buy Button 嵌入到您的 Wix 网站中，那么当客户尝试购买多个产品时，将会看到每件产品对应一个单独的购物车。

如果您想在不编辑嵌入代码的情况下在您的 Wix 网站上显示多种产品，则可以嵌入产品系列。您可以在 Shopify 后台内为您想显示在 Wix 上的产品创建新的产品系列。

步骤：

在 Shopify 后台中，为产品或产品系列创建 Buy Button，然后复制其嵌入代码。

从您的 Wix 帐户中，在 My Sites（我的网站）部分中找到您想编辑的网站，然后单击 Edit Site（编辑网站）。

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

单击 HTML 代码以将 HTML 代码小组件添加到页面中。

单击 Enter Code（输入代码）。

在 HTML Settings（HTML 设置）对话框中，将 Buy Button 或产品系列的嵌入代码粘贴到 Add your code here（在此处添加您的代码）字段中，然后单击 Update（更新）。

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

完成后，单击保存。

嵌入多个产品或产品系列

步骤：