首页 速卖通正文

10.2 店铺装修——页面管理

kumb 速卖通 2020-07-03 17:27:24 308 0 速卖通网站设计

首先,卖家需要进入速卖通的卖家管理后台,在卖家后台的导航栏中,可找到“店铺—店铺管理—店铺装修及管理”菜单,进入后如图10.2所示,单击“进入装修”按钮,即可登录卖家后台装修页面。如果你是出口通会员身份,则显示为“网站设计”页面,同样单击“进入装修”按钮,也可登录卖家后台装修页面。

figure_0213_0276

图10.2 店铺—店铺管理—店铺装修及管理

单击图10.2中“进入装修”界面,进入旺铺装修平台,如图10.3所示。单击“装修”菜单,即可看到下拉菜单,包含“页面管理”“样式编辑”“模板管理”3个子版块,以下逐一进行介绍。

figure_0214_0277

图10.3 旺铺装修平台首页

进入旺铺装修平台后,你首先看到的就是如图10.3中所示的“页面管理”子版块。实际上在页面管理中只能编辑“基础页面——商铺首页”,即只能对你店铺的首页进行修改管理。它又包含“页面编辑”和“布局管理”两个子界面。

1.“页面编辑”界面

在“页面编辑”界面中你看到的店铺的效果就是买家在你的店铺前台的看到的实际展示效果。本界面主要由各个模块组成,本界面主要提供各个模块的编辑功能。我们在对页面进行管理时,首先要了解各个模块都具有什么样的功能,怎么进行编辑,什么样的效果较好;其次再将各个模块进行布局,按照自己的设想在页面上进行排版设计,从而达到你所想要的效果。

如图10.4所示,移动鼠标到各模块之上,就会出现“编辑”、“删除”及“添加模块”等相关按钮。单击“编辑”按钮,就可以打开模块的编辑界面对于相应的模块的内容进行设置;单击“删除”按钮,就可以完成模板的删除;单击“添加模块”按钮,即可弹出添加模块编辑对话框,同时显示出所要添加模块的类型。单击模块中“上下箭头”可以进行的模块位置的上下移动,也可以将鼠标放置到上下箭头上,等鼠标变为“十”字形状时,单击鼠标左键进行拖动调整位置(注意,有些模块的位置是固定不能移动的)。

figure_0214_0278

图10.4 页面编辑界面—模块编辑(图片轮播模块)

下面我们就常用的一些模块进行简单介绍,如果你的界面没有显示这些模块,请自行添加。

(1)店招模块

店招模块相当于店铺的招牌,放到店铺首页的最上面位置,不可移动,如图10.5所示。店招是店铺品牌或者产品展示的一个窗口,也是买家进入店铺后看到的一个重要元素,设计精良的店招会给买家带来记忆深刻的第一印象。商铺招牌最好明确简洁,一目了然。相反,粗制滥造的店招会使得买家瞬间失去兴致。

figure_0215_0279

图10.5 店招模块

将鼠标移动至店招模块,单击“编辑”,即可出现店招编辑对话框,速卖通店招大小宽度为1200px(像素),高度设置在100~150px(像素)之间,如图10.6所示,图片的大小为2MB以下,格式为.jpg或者.jpeg,店铺的店招只能有一个。

figure_0215_0280

图10.6 店招的设置

店招的形式默认为图片形式,速卖通的店招主要是文字和图片两部分构成,选择合适的字体,搭配合适的背景,就可以更好的展示店铺特色或者活动,吸引卖家眼球,提升购买兴趣,店招文字和背景色要对比鲜明,店铺名称、文字描述都用粗体字、粗体字给人以安全、厚重、可靠性的心里感觉。产品信息传达要明确,使得买家能即刻明白店铺的主营产品和经营特色。

店招的设计一定要和店铺的风格大体一致,并且有明确的产品定位配以适当的文字说明。基本原则如下:①选择背景比较干净的图片放入店招中,背景复杂或者需要修理的照片一定要经过PS或者其他修图软件修理后再放入;②在店招中放入图片时,选择能够代表店铺或者店铺特色产品的图片,不宜放入太多,否则会使买家产生视觉疲劳;③图片和文字要分离,不宜一起处理,图是图,字是字,按照黄金分割点进行分割1:0.618,黄金分割位置最宜吸引买家眼球;④图片和文字颜色要协调,颜色趋于一致或者近似,背景颜色不宜强烈刺眼,否则将影响图文展现效果。(2)图片轮播模块

图片轮播模块是一个非常重要的产品展示模块,此模块将多张广告图片以滚动轮播的方式进行动态展示,可调整轮播显示高度(100~600px之间)。图片轮播模块(见图10.7)可以使我们放置最多5张图片。“图片轮播”模块的编辑界面如图10.7所示,你会发现其设置和店招模块类似,但是多了一个切换效果的选择。

figure_0216_0281

图10.7 图片轮播设置

建议你添加3~5张图片,设置好相应的图片链接,链接到具体产品、产品单元或者促销页面。如果图片为产品展示图片,那么就可将图片链接到对应的详情页面;如果图片为促销页面,那么就可将图片链接到商铺的START页面;如果图片为分组内容,那么就可将图片链接到对应分组的URL链接上。单击上下箭头来调节图片展示轮播的顺序,单击“X”可以进行删除。

系统允许总共可以设置5个图片轮播模块,也就是总共可以有25张大图片可以展示,有效利用这些模块将大大提升店铺的视觉效果和促销能力。

注意,在同一图片轮播模块里图片大小应该是相同的,在不同的图片轮播模块中,我们可以灵活设置不同的图片高度,这样排列可以使界面更加的活泼,也能更好的展示不同的商品。

(3)商品推荐模块

通过商品推荐模块,我们可以将我们认为重要的产品放置在店铺首页,即着力“推荐”这些产品。比如,你可以做“最新商品”“最畅销商品”的模块,或是做一个限时推荐模块,把同一类型的产品上传在一起,同时对产品推荐模块命名为“Best selling,Limited Time Promotion Sale”以吸引买家注意力。系统允许总共可以设置5个商品推荐模块,如图10.8所示。

figure_0217_0282

图10.8 商品推荐模块示例

商品推荐模块设置界面如图10.9所示,你可以自定义模块的标题,选择产品展示方式(一行4个还是一行5个产品),展示商品信息的方式(直接展示产品全部信息,或是默认展示价格,鼠标划过时展示全部信息),以及推荐方式(系统自动推荐还是手动推荐:如果是选择自动推荐,则需要设置排序方式、产品分组等信息;如果选择手动推荐,则需选择推荐的商品)。

figure_0217_0283

图10.9 商品推荐模块

除了在页面主体部分使用商品推荐模块外,还可以在左侧边栏使用商品推荐模块,此时添加的界面如图10.10所示。自行观察会发现它与图10.9在商品展示方式和商品信息展示方式上是不一样的,因为它是显示在网页左侧边的,所以是按列来展示的。

在排序方式上,可以选择“最新发布在前”“最新发布在后”“按价格升序排列”“按价格降序排列”以及“按销量降序排列”。实际上,“最新发布在前”的排序就相当于“Newest Products”,而“按销量降序排序”就相当于“Top Selling”模块。因此,灵活使用产品推荐模块可以实现许多特殊的效果。

figure_0218_0284

图10.10 侧边产品推荐模块

商品推荐模块会直接使用商品的主图,所以为了保持首页视觉的一致性,所选择推荐的商品主图风格应尽可能类似,而且一定要整洁大方,尽量和店铺装修风格统一。

平台自带的商品推荐模块使用起来较为便捷高效,但是所呈现的店铺形象结构单一,视觉冲击力不强,初步入门的卖家可以直接套用商品推荐模板,不过高手们更倾向于使用下面要介绍的“自定义内容区模块”。

(4)自定义内容区模块

在自定义内容区,你可以通过在编辑器输入文字/图片/html代码的形式自定义编辑内容。自定义模块的标题可进行自行命题,自定义区的图片和字体(字体的粗细、直斜及字体的加线)、字号、格式都可以进行设置和修改。

自定义内容区块最大的优势是可以借助HTML语言来自行设计模块。HTML(英语全称:Hyper Text Markup Language)是超文本标记语言的一种,它是“网页创建及其它可在网页浏览器中看到的信息”设计的一种标记语言,“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。超文本标记语言被用来结构化信息,例如标题、段落和列表等,也可用来在一定程度上描述文档的外观和语义。结构包括“头”部分(英语:Head)和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。再者,HTML简易性、可扩展性、平台无关性以及通用性,使得超级文本标记语言应用广泛。

自定义模块内容可以放置产品信息,也可以添加产品分组,也可以放置广告链接,所以有效使用这个模块会使得店铺表现力和视觉张力更加丰富和强劲,但是这需要一定的网页编辑技术的能力,最好懂Photoshop和Dreamweaver的知识。

自定义内容区的编辑界面如图10.11所示,这里我们自己定义了一个“Limited Time Promotion Sale”的模块,你会发现类似于产品发布的界面,可以插入文字、图片、链接,并对这些元素的位置、性质等进行修改。表面上看并不是很难,但是如果做出很好的效果来,则需要一定的经验才行。建议你首先要熟悉编辑窗口的各个按钮,然后按照编辑文档的方式进行排版。如果想深入研究的话,建议你找几本网页排版的书学习一下,不需要太过高深的,简单的类似于Dreamweaver的即可。

figure_0219_0285

图10.11 自定义内容区模块编辑界面

图10.11编辑完后的效果如图10.12所示,是不是比较有感觉!

我们单击图10.13中的“</>”,可以查看源代码,如图10.14所示。

figure_0220_0286

图10.12 自定义内容区效果

figure_0220_0287

图10.13 源代码功能

figure_0220_0288

图10.14 源代码

2.“布局管理”界面

在“布局管理”界面中,如图10.15所示,卖家可看到整个店铺的模块之间的布局结构,并可从整体布局和风格上对商铺内容作出调整或者设置,同时可以进行模块的添加、顺序的移动及删除操作。需要注意的是,在这个页面中,不能进行模块具体内容的编辑操作,对具体内容的编辑操作是在“页面编辑”界面中。

店铺布局中分为“可编辑”和“不可编辑”两种模块,“可编辑”模块为淡蓝色,将鼠标放置上去以后,会出现上下箭头(上下移动)、“+”号(添加模块)和“×”号(删除模块),你可以根据自己的需求进行操作。“不可编辑”模块为灰白色,不可以移动,因此不必管理。

figure_0221_0289

图10.15 布局管理

在对各模块熟悉之后,你就可以整合商品推荐、图片轮播以及自定义模块的所有单元的优势,使得店铺布局更加的合理,设计更加的精美,对买家的吸引力也会更加的明显。


我们致力于为三农(农业、农村、农民)提供专业物联网解决方案,同时也提供应用软件、微信小程序、手机App、企业网站的开发和跨境电商建站、网络营销等服务,站长微信号(mywit_net),添加后备注“黎辉物联网”,如有相关需求也可通过电子邮件(12tc@sina.cn)与我们取得联系

本站内容均来自互联网,如有涉及到侵权行为,请你及时与站长联系删除!

本文链接:https://www.kumb.cn/2165.html

发表评论

评论列表(0人评论 , 308人围观)
☹还没有评论,来说两句吧...