请选择 进入手机版 | 继续访问电脑版
查看: 10510|回复: 0

[店铺装修] 如何装修商城主页(详细操作步骤)

[复制链接]

56

主题

58

帖子

259

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
259
发表于 2018-3-13 11:21:33 | 显示全部楼层 |阅读模式
客户进入商城,首先面对的就是主页。主页也就是商城的第一张脸。因此,主页建议简洁、大方、要有吸引力,切忌太乱。您可以根据商城的定位合理安排主页的布局。如导航、分类导航、主打产品、促销广告、相关资讯、客服体系等。主页力求能吸引客户眼球,留住客户就成功了一半了。

一、产品概述
苍鸟系统的商城装修主要是对商城主页的装修,需要自定义编辑商城主页,通过苍鸟后台系统提供的不同组件模块插入到商城主页,即可使用。一个好的主页可以吸引粉丝浏览的兴趣,让粉丝快速的找到自己想要买的商品,给粉丝带来良好的购物体验,最终实现高的转化率。


二、产品功能
通过对苍鸟系统提供的“可选模块”组件进行商城装修,从设计、排版及布局上您都可对商城主页进行个性化装修。您只需把对应功能模块移动到商城主页里,然后替换或编辑模块内容,保存发布后即成。这是一个很强大的功能,使用这个功能可以有效提高微商城建设效率及降低维护成本。



三、产品操作与技巧


1、  功能路径
苍鸟后台>>>>商城管理>>>>商城装修


2、  操作说明与范例
商城装修系统都有一套默认模版供您选用,模版内容可根据需要进行任意编辑(除固定组件不能进行编辑外),可添加或删除,点选模版左侧的“可用模块”任一组件,即可编辑,编辑框在最右侧展示。

a1.jpg
a2.jpg

实例示范:手把手一步一步地教您怎么装修商城,工具的使用及运用技巧,让你装修更随心所欲。实例连接: http://shop251.cangniaowl.com/

未标题-2.jpg


上述为已装修好的商城,作为范例,详解装修操作步骤,让小白也能马上上手,装修自己的“高大上”商城。范例中的每个装修模块我都进行了划分,请根据需要查看模块的操作步骤。



在装修前,我们准备好装修素材,就是装修商城时需要用到的图片、连接、宣传文案等。

a3.jpg

然后,登录苍鸟管理后台,点击商城管理——商城装修,开始装修。

a4.jpg



图一

顶部轮播图,点击默认模版的轮播图进行图片更换、添加、删除、排序。

a5.jpg

上传图片:最少上传三张尺寸为750x300像素的图片,图片格式可为:jpg、png、gif三种格式。

a6.jpg

a7.jpg

PS: 设置的连接地址必须带有:http://开头,如http://www.cangniaowl.com 为正确,“www.cangniaowl.com”这种填法为错误。


添加图片:系统默认顶部轮播图为三张,要添加图片,只需点击”+轮播图”即可添加完成,轮播图数量限制是六张。

a8.jpg

删除图片:在轮播图数量超三张以上,可对轮播图进行删除操作,只需点击每张轮播图最右侧按钮删除即可。

a9.jpg

轮播图排序:点击最右侧的上下箭头,对轮播图进行任意排序。

a10.jpg

对轮播图设置好后,就可以对商城内容进行编辑了。



图二

插入富文本编辑,从左侧的“可选模块”选择 “富文本编辑”进行拖拉添加至商城模板中,并编辑。
a11.jpg

a12.jpg

a13.jpg

a14.jpg

富文本编辑:这个组件功能非常强大,你可以任意编辑你想要的效果。只需把已写好的样式粘贴复制到编辑器里即可。如果不懂样式编写,可以直接套用苍鸟提供的现成组件(具体请查看:富文本编辑可用的现成组件模版),也可以借助一些微信排版在线网站,如秀米、135i排版、微小宝等进行排版编辑,把编辑好的样式粘贴复制过来即可,然后保存。

a15.jpg

如果套用苍鸟提供的现成组件,只需要把组件代码粘贴复制过来,然后点击”</>”源代码返回,即可查看到代码的实际效果。

a16.jpg

如果是从其他排版网站平台复制粘贴过来,就不需要在源代码那里粘贴复制,直接在所见即所得页面粘贴即可。

如果从秀米平台复制过来的样式,图片会获取不了,你只需对图片路径进行替换即可。具体操作请查看:如何替换富文本编辑里的图片?



图三

插入商品组件,从左侧的“可选模块”选择“商品”进行拖拉添加至商城模板中,并编辑。

a17.jpg (图三)

a18.jpg

商品组件是对本商城商品展示效果进行设置,可以一行一个,一行两个或一行三个、四个。

a19.jpg

a20.jpg

图三效果是六个产品的展示效果,只需插入两个商品组,每个商品组一行三个,第二个商品组的标题删除,保留第一组商品组的标题即可以做成图三效果。

a21.jpg



图四

图片模版+富文本编辑组合效果,从左侧“可选模块”中点击“图片模板”与“富文本编辑”拖拉至商城模板中,并进行编辑。

a22.jpg

a23.jpg
插入图片模板

a24.jpg
图片相应的编辑框

a25.jpg
点击“添加图片”上传图片

a26.jpg
按保存,商城模板即显示你所选的图片


a27.jpg

a28.jpg

a29.jpg

a30.jpg 、、

点击编辑框中“</>”源代码,清空所有文字,然后把已准备好的富文本编辑可用的现成组件模版代码复制粘贴进去即可。若要编辑内容,请查看详细教程>>>富文本快速编辑小技巧

a31.jpg

代码复制粘贴后,需要再点击一个“</>”,返回所见即所得的页面,可以看到代码展示的效果。然后再按“保存”即可。



图五

插入商品模块,只需点击商品模块拖拉至商城模板中,选择一行一个展示即可。

a32.jpg

a33.jpg

填写标题,选取展示的商品,然后在展现方式选择为一行一个,保存即可。



图六

只需点击商品模块拖拉至商城模板中,选择一行四个展示,不填写标题,即可。

a34.jpg

a35.jpg



图七

效果制作。是两张可以带连接或不带连接的图片并列效果。插入富文本编辑,只需点击“可选模块”中的“富文本编辑”拖拉至商城模块中,并编辑。

a36.jpg

a37.jpg

a38.jpg

清空编辑框里的所有内容,然后点击“</>”源代码,粘贴已准备好的样式代码,然后点击“</>”源代码返回所见即所得页面,按保存即可。

a39.jpg



图八

商城logo上传或替换。打开商城管理——商城信息,即可以进入编辑。

a40.jpg

a41.jpg

a42.jpg

a43.jpg

实例的商城装修已完成,具体效果, 请查看实例连接: http://shop251.cangniaowl.com/


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表