页面装修介绍

1、页面装修介绍每一个店铺标配的4个页面都可以分别进行装修，在没有装修之前系统在每个页面默认了一些常规内容，对于这些内容你可以删除、和修改。每个页面的装修操作完全一样，这里我们以“店铺首页”的装修为例进行讲解。页面装修要遵循的原则：先【添加布局】-然后在布局里【添加模块】-然后【设置】模块的内容-最后【发布】共5个环节。1、 布局介绍名词解释布局：是指将页面划分为不同结构的条格，页面的所有装修内容必须放置到布局内；每一个页面可以有多个布局。目前系统提供了12个布局供选择和组合使用。特别说明：每一个页面的最顶部会有一个通栏布局（没有删除、移动操作）该布局里面放置的模块会自动强制显示在店铺所有页面。建

2、议在该布局内仅放置店铺招牌、店内导航和主推活动的banner等内容；如果只想将内容显示在当前页面，请手动添加新的布局后再添加模块，请勿使用该默认布局。2、添加布局 2.1可用的布局列表在装修页面点击顶部左上角的【添加布局】按钮，打开如下选择器：一共有12个布局供选择。      2.2使用说明点击【添加】后，该布局将显示在页面的最底部，如果必要需手动向上移动。添加后的可视化页面显示“通栏布局（990）”：当鼠标移动到布局区域内的时候会出现布局的名字、尺寸和操作，如上图：名词解释通栏（990）：是该布局名称，同时指出该布局为宽

3、度990px的通栏布局红叉：表示删除该布局的操作，布局被删除时它所包含的内容也会一并被删除且无法恢复，操作需谨慎。绿色箭头：表示布局可用的上下移动操作 重复以上操作我们可以根据设计目的向当前网页添加多个不同版式的布局，比如在某个页面添加了7个布局，显示如下：注意事项：布局添加后显示为一个虚线框，每一行虚线框都是一个独立的布局。上图中选中的是左右布局，常用来左侧放置分类，右侧放置推荐商品。你可以根据自己的设计思路，选择使用1个或者多个布局；布局的使用数量建议不要超过10个。3、模板介绍选择了布局就等于是为装修设定好了大纲和框架，接下来我们就要往框架里放置内容。名词解释功能模块：提供某些

4、特效内容的系统功能称为功能模块。目前系统已有5个目录分类共15个功能模块。可用的“模块”列表在任意一个布局的左下角有一个为名为【添加模块】的操作按钮，点击会弹出如下： 由上图可以看出模块的所属目录和名称。 上图为“店铺基础模块”，该目录下共有4个功能模块：分页显示商品：如果您有M个商品，设置每页显示20个，那么就会有M/20个分页，直接点击页码即可查看对应页面的商品列表；每一个页面上的商品可以按照【销量】【价格】【好评数】进行排序。默认是按照SKU的上架时间从晚到早排序的，您可以通过更换【模版】来调整默认排序。商品类目：该模块用来显示店铺内的商品分类。店内搜索：该模块是店铺

5、内搜索框，您可以根据设计要求将该模块放置在合适的位置。店内搜索结果：顾名思义用来显示搜索结果的，该模块默认在“店铺内搜索结果页面”预置了，如无特殊要求请不要删除。第二个目录显示如下： 由上图可见该目录下有2个模块：销售排行：用来显示店铺内商品的销售榜单，默认是前10个。商品推荐：这个模块使用的频率最高，诸如“热卖”“店长推荐”“重点推荐”等等均可以使用这个模块来实现。品牌团：仅适用于第三方卖家。商家可在该模块的“设置”里通过SKU ID录入参加了品牌团购的商品。第三个目录为“店铺营销”模块，显示如下： 由上图可看到该目录共有4个模块：自定义内容区：大家又称为“HTML编辑器

6、”，也是装修店铺使用频率最高的模块之一，目前自定义内容可以上传图片、写代码等。如果您懂一些dreamweaver、html、CSS DIV的话，使用这个模块可以让您装修出更炫的效果。导航：比较好理解，即为输入一个关键词 并配置一个链接网址即可。图片轮播：主要应用于活动和商品的推广，可在模块设置里添加大图、小图、图片标题和图片链接地址。 雷宁轮播图：通过编辑需要轮播的html片段以及背景颜色，实现html片段的轮播效果！接下来看第四个目录“公司相关”，截图如下： 由上图可以看出该目录包含3个模块：店铺简介：即显示品牌介绍内容的模块。店铺公告：即显示店铺内公告信息的模块。店招模

7、块：即显示店铺招牌内容的模块。接下来看第五个目录“公司相关”，截图如下： 由上图可以看出该目录包含1个模块搭配详情：展示用户在搭配购里面的商品搭配，在“设置”里输入搭配id可置入搭配信息。在装修的时候根据设计可以添加以上15个模块中的任意一个或者多个，同一个模块在一个页面上是可以多次被使用的。4、添加模块4.1、添加“分页显示商品”模块4.1.1添加的操作流程选中要添加模块的布局，比如：点击【添加模块】按钮，依次找到目标模块后点击【置入】，如下图：模块置入完毕后，可对模块进行修饰和内容完善，操作如下： 4.1.2设置点击模块的【设置】，会弹出如下操作面板：如上图，默认选中的

8、是【皮肤】操作。4.1.3皮肤名词解释皮肤：用来美化该模块的边框和周边，详细功能如下图：说明：皮肤选择：系统预置了2套皮肤，可以快速选择使用标题栏：用来设置模块标题区域范围内皮肤的操作内容区：用来设置模块内容区域范围内皮肤的操作底部栏：用来设置模块最底下区域范围内皮肤的操作4.1.4模板每一个模块系统都预置了1个或多个模版，通过更换模版可以使模块显示样子瞬间变化：说明：模版共分为“最近使用”“我的创建”和“系统模版”，分别含义如下：最近使用：里面放置的是你最近使用过的模版，可以快速选择无须寻找我的创建：里面放置的是你自己创建的模版系统模版：官方或第三方开发者提供模版4.1.5选项卡名词解释选项

9、卡：是指和模块标题并列显示的可添加超链接的功能。选项卡的使用如下：使用说明：输入“超链接文本” 和“网址”如上图中的，然后点击【增加】，可以添加多个，最后点击【批量更新】，最后记得点击【保存】哦，待页面【发布】后可看到效果，点击【刷新】可即可看到效果哦。4.2添加“商品类目”模块4.2.1添加的操作流程选中要添加该模块的布局，点击【添加模块】按钮：选中“商品类目”模块，点击【置入】：置入后显示如下：点击模块名称后面的【设置】可进行该模块的内容完善和显示效果更换等。4.2.2设置点击【设置】后显示如下：默认选中的是【皮肤】。4.2.3皮肤同4.1.3操作4.2.4模板同4.1.44.2.5选项卡

10、同4.1.5     4.3添加“店内搜索”模块4.3.1   添加的操作流程选中要添加该模块的布局，然后点击左下角的【添加模块】，举例如下：点击【添加模块】后，弹出的操作面板中找到“店内搜索”模块，并点击【置入】：置入后默认显示如下：如上图可见，该模块位于“分页显示商品”的下面。名词解释模版的拖拉移动：鼠标移动到模块上，并按下左键，不松开左键同时移动鼠标可将模块移动到一个新的位置，比如上下交换位置等。这时，用鼠标选中“店内搜索模块”，按下左键向上拖拉鼠标，待移动到目标位置时松开鼠标左键，即可将该模版移动到上面（同理也可以往下移动、跨

11、布局移动等），如下：松开鼠标：即可完成模块的上下移动，当然模块的移动不局限于布局内，也可以在布局间来回移动哦。点击该模块名称后面的【设置】，可进行内容修改。4.3.2设置如上图所示默认选中皮肤。4.3.3 配置名词解释配置默认关键词：你可以设定一个搜索词，设定后该词会搜索框里默认显示出来。配置热荐词：你可以设定3个推荐词，方便用户直接搜索而无须手动输入。价格筛选：开启后可以让用户按照N元只M元之间来搜索你的店内商品。4.3.4 皮肤操作同4.1.34.3.5 模版操作同4.1.4目前系统预置有2个模版，截图如下：4.3.6选项卡操作同4.1.54.4添加“店内搜索结果”模块4.4.1添加的操作

12、流程“店内搜索结果”模块默认预置在“店内搜索结果”页面里，如无特殊需求请勿删除。系统预置该模块的显示位置截图如下：点击【页面装修】显示如下：当用户点击【搜索】按钮后，用该模块显示搜索结果的，如果删除了该模块，将无法显示搜索结果，请慎重操作，在没有把握的前提下请勿删除和移动该模块。当然该模块也可以设置，如在上图中点击模块名称后面的【设置】。4.4.2设置默认显示如下：如上图，默认选中了“皮肤”。4.4.3皮肤操作同4.1.34.4.4模板操作同4.1.44.4.5选项卡操作同4.1.54.5添加“销售排行”模块4.5.1添加的操作流程选中将要添加销售排行模块的布局，比如：点击【添加模块】，在打开

13、的操作面板中找到“销售排行”模块，并点击【置入】，如下图：置入该模块后默认显示效果如下：点击设置可进行模块内容配置。4.5.2设置点击设置打开操作面板默认是“皮肤”。4.5.3皮肤操作同4.1.34.5.4模板操作同4.1.44.5.5选项卡操作同4.1.54.6添加“商品推荐”模块4.6.1添加的操作流程选中要添加该模块的布局，比如：然后点击【添加模块】，在弹出的操作面板中找到“商品推荐”模块并点击【置入】：置入该模块后默认显示效果如下：点击模块名称后面的【设置】可以补充内容。4.6.2设置点击【设置】后默认打开的是配置。4.6.3配置点击【设置】后会打开如下操作面板：名词解释ID录入：是指

14、通过录入一批商品的SKU，来实现推荐商品的操作。筛选录入：是指通过1、2、3级分类来批量录入商品SKU，实现推荐商品的操作。1）  ID录入：如何查看商品的SKU？请参考附件一：商品SKU的查看方式。2）  筛选录入商品：商品录入后点击【保存】，则商品推荐就操作完毕了。商品显示如下：这个时候我们可以点击，该模块名称后面的【设置】来更换皮肤哦。4.6.4皮肤依次点击模块名称后面的【设置】，在打开的操作面板中选择【皮肤】，即可进行皮肤设置。操作同4.1.34.6.5模板依次点击模块名称后面的【设置】，在打开的操作面板中选择【模版】，即可进行模版设置。操作同4.1.4该模块是装修

15、店铺时用到最多的模块之一，模版数量目前也比较多，截图如下：4.6.6选项卡依次点击模块名称后面的【设置】，在打开的操作面板中选择【选项卡】，即可进行皮肤设置。操作同4.1.54.7添加“导航”模块4.7.1添加的操作流程选中将要添加导航模块的布局，比如选择一个通栏来做导航模块：点击【添加模版】按钮，打开添加模块操作面板，找到“导航”模块并点击【置入】：置入完毕后默认显示如下图，可点击名称后面的【设置】来完善导航模块内容：4.7.2设置点击【设置】按钮后会弹出如下操作面板：默认打开【配置】操作。4.7.3配置名词解释导航名称：是指待超链接的文字链接地址：是指点击文字后打开的网址添加完毕后点击保存

16、即可看到效果。4.7.4皮肤操作同4.1.34.7.5模板操作同4.1.44.7.6选项卡操作同4.1.54.8添加“自定义内容区”模块4.8.1添加的操作流程选中将要用来添加该模块的布局，并点击该布局左下角的【添加模版】按钮，在打开的模块选择面板中找到“自定义内容区”并点击【置入】，如下图：置入完毕后显示如下，可点击【设置】来完善内容：4.8.2设置点击【设置】默认打开配置内容区域，通俗称呼为“HTML编辑器”。4.8.3配置自定义内容区功能简述，自定义内容支持使用：1）  HTML代码（仅支持body标签内的代码，不含body）2）  部分CSS代码：常用效果的CSS代

17、码也可以3）  Script代码：常见的javaccript代码4）  系统内置的js库js代码如果你写入了CSS代码，那么为了避免和系统css冲突请在你的CSS代码前面添加.user等标识，以避免和系统默认样式冲突。4.8.4皮肤操作同4.1.34.8.5模板操作同4.1.4因为轮播图模块可以用来做banner、导航、活动入口、重点推荐等诸多功能，所以该模块的模版按照用途去向分为几个小类，截图如下：你可根据具体的使用目的灵活组合使用。4.8.6选项卡操作同4.1.54.9添加“轮播图”模块4.9.1添加的操作流程选中要添加轮播图模版的布局，通常用轮播图来做banner、首

18、图等所以一般选择位于页面中上位置的布局：点击【添加模块】按钮，找到轮播图模块并点击【置入】：模块置入后默认显示效果如下图，可点击【设置】进行修改内容：4.9.2设置点击【设置】按钮，打开操作面板，默认会选中配置操作。4.9.3配置说明：1）  点击【选择图片】上传轮播显示图。2）  标题：输入每一张图片的标题。3）  链接：输入每一张图片的链接到的网址，注意必须是京东网址。操作完毕后点击保存，你最多可以设置8张轮播图哦。4.9.4皮肤操作同4.1.34.9.5模板操作同4.1.44.9.6选项卡操作同4.1.54.10添加“店铺简介”模块4.10.1添加的操作流程选中要添加店铺渐渐诶（改）模块的布局，然后点击左下角的【添加模块】按钮，该模块默认预置在“店铺简介页”里。如果没有特殊需要，请勿删除和移动。点击【设置】可对该模块进行管理和美化。4.10.2设置说明：该模块的简介内容在供应商后台-【我的店铺】-【店铺装修设置】-【品牌简介】：4.10.3皮肤操作同4.1.34.10.4模板操作同4.1.44.10.5选项卡操作同4.1.54.11添加“店铺公告”模块4.11.1添加的操作流程店铺公告模块默认预置在店铺首页左下角的位置，如无特殊需要请勿删除。4.11.2设置该模块的内容维护在“供应商后台”-【我的店铺】-【公告海报管理