天猫新版旺铺店铺背景设置技巧

所属分类: 电子商务 / 淘宝/天猫 阅读数: 2022
收藏 0 赞 0 分享

自2013年7月天猫新旺铺上线之后,就随后发布天猫新旺铺迁移公告,要求所有的天猫商家在2013年8月31日号之前,完成旧版天猫旺铺升级到新版天猫旺铺。8月15日后未升级的天猫商城,淘宝将强制升级店铺后台为新旺铺后台。意味着天猫店铺在8月15日后,要想变动编辑店铺,必须使用新版旺铺了。这也就意味着天猫新旺铺的时代到来了!

天猫新旺铺的店铺背景设置功能,在新旺铺上有了新的突破。相对于之前的旺铺拓展版的背景功能,它的设计更自由,除了首页能添加背景外,还能自定义设计列表页的背景哦。既然今天要跟大家分享天猫新旺铺背景设置的—些小技巧,那么首先让我们先来看看官方的基础教程吧!

天猫新旺铺支持不同页面不同背景(除detail页)

点击“装修”——“样式编辑”——“背景设置”便可设置店铺背景。

店铺背景

点击”背景设置”——“页头设置”进店招位置的背景设置。

两种方式设置:选择调色器或者选择本地上传一张图片。

背景设置

背景设置

背景设置

点击“选择要设置的页面”——可以选择不同页面不同背景。“页面设置”同“页头设置”。

选择要设置的页面

除了以上这种最基础的背景设置方式,还可以怎样装修我们的店铺背景呢?或许有人会说其他的背景效果不会是要花钱买模板实现的吧!其实不然,下面就—起来看看,如何巧妙设置背景让店铺不再单调!

在开始介绍背景设置之前,我先向大家介绍一个天猫新旺铺的功能:新旺铺导航是可以更换颜色和式样的哟!这里需要—些css的小技巧。这一功能和下面介绍的背景设置技巧密切相关哦!

进入店铺后台,选择导航处的“编辑”;

店铺后台

一、常规页面背景设置,让背景更清晰

一般情况下首页背景由于设计师在做页面时的设计需要,整体页面背景在存储时会比较大,所以在上传时设置时就会被背景图片200k的大小所限制,从而不得不降低背景图片的像素显示,直白的说就是背景会变模糊,图片质量变低。那么如何通过小技巧来解决这一问题呢?

常规页面背景设置

首先就是和最初上传背景时一样的操作步骤,只是在图片质量和图片大小上尽量保持高品质,图片大小最大可控制在3M以内即可,即图片可上传至店铺图片空间便可。接着就是利用css小代码来设定喽,代码如下:

body{background:url(http://img04.taobaocdn.com/123.jpg)no-repeat center top transparent;}

亲们只需要进入“店铺后台”选择导航处的“编辑”,然后将这段代码复制到“显示设置”,再将编辑上传的背景图片地址替换上述代码中的黄色区域(即代码中括号内部分)即可,最后确定保存发布。

利用这一方式上传的页面首屏的整体像素得以保证,对于首页设计风格较鲜明,色调较明艳的首屏来说,视觉效果可以得以更好的呈现表达。

二、长页面背景设置,让页面整体化

当遇到有专题活动或大型活动时,整体页面效果要求会更高,页面策划内容会增加很多,同时有些需要一些特殊全屏页面效果,这时候这小代码就要默默出现啦!

长页面背景设置

其操作步骤同上个页面设置,只需上传对应页面背景图片,替换图片链接即可。长背景设置代码如下:(代码同上个页面代码)

body{background:url(http://img04.taobaocdn.com/123.jpg)no-repeat center top transparent;}

利用这一方式上传的页面呈现效果更为整体,对于活动策划及呈现来说都是非常有利的,对于专题活动而言,更能烘托活动气氛,而不是原先那种简简单单的单一性的产品呈现方式,对于客户而言也会是以种新风格的体验。

三、固定背景设置,让页面更生动

固定背景应用要是情况而定,在日常运营中无特殊活动页面需求或是大型活动时,可建议采用固定背景来做页面呈现,—般常规活动时可通过固定背景来传播呈现品牌调性及风格等。

固定背景设置

固定背景设置代码如下:

body{background:url(http://img04.taobaocdn.com/123.jpg)fixed center repeaty;}

利用一方面这一方式上传的页面呈现效果更为生动,一方面视觉动态效果生动,会让消费者眼前一亮,区别于其他页面状态的固定样式,另一方面还可以利用固定样式传播店铺,通过各类二维码引导传播手机店铺、微淘、微博等其他终端媒体等。

最后还是再来个温馨提示:

1、固定背景图片大小控制在1230px*815px以上尺寸哦!

2、对于常规首屏背景或长背景的切片,我遇到过很多背景错位的现象,—般情况下该类背景在常规方式切片处理后,还需要在背景上增加店铺店招像素高度150px和天猫页面顶部的像素高度113px(新改版天猫页面样式),所以要记得页面背景切片完成后再增加263px的像素高度哦,切记!

背景切片注意点操作如下:定位选择“下对齐”,高度数字出加263像素。

背景切片

代码设置操作如下:进入店铺后台,选择导航处的“编辑”,点击“显示设置”将代码复制粘贴至框框内,用背景图片链接替换下图中选中区域的图片链接即可。

背景切片

更多精彩内容其他人还在看

2015双11天猫超市组合优惠是什么 双11天猫超市优惠活动介绍

虽然离双11还有一段时间,但为了回馈广大用户,天猫双11超市已经开启了一系列的优惠活动,信用满90就可以减50哦,如果你还不知道双11天猫超市组合优惠是什么
收藏 0 赞 0 分享

2015天猫双十一超级红包怎么免费领取?双11狂欢节超级红包活动说明

双11今年又有新发样,那就是双十一超级红包,天猫官方推出站外发放双11红包的途径,本站将于24日发送天猫双11全站通用的超级红包,欢迎各位前来领取,千万不要错过哦
收藏 0 赞 0 分享

2015天猫双11万店同庆以旧换新 先试后买活动参加地址与规则流程介绍

2015天猫双11即将到来,天猫也推出了万店同庆以旧换新、先试后买、上门安装等一系列优惠活动,不过有些朋友对天猫双11的万店同庆活动还不是很了解,2015天猫双11万店同庆以旧换新、先试后买活动在哪参加,规则流程等
收藏 0 赞 0 分享

2015天猫扫双11标志领取现金红包 双十一扫logo赢红包活动攻略

双十一活动,已经正式来开序幕后,那么很多互动性较强的红包活动也将会随之出炉。比如今天为大家推荐的扫logo免费抽取双十一红包的活动,大家打开自己的APP后,使用扫一扫功能,就能获取红包哦,喜欢的朋友们详情来看看了解一下
收藏 0 赞 0 分享

2015天猫双十一微博红包怎么抽奖?双11微博红包抽奖详情

2015天猫双11快到了,不过现在已经有很多天猫双11的预热活动了,其中抢红包是大家很关注的热点,那么2015天猫双11微博红包怎么抽奖呢?小编就为大家介绍2015天猫双11微博红包抽奖详细内容
收藏 0 赞 0 分享

天猫收货评价规则更改:发货速度被物流服务取代

天猫收货评价规则更改了,以后大家在确认付款之后,看不到发货速度这一栏,取而代替的是物流服务,并已于昨日(7月29日)正式生效
收藏 0 赞 0 分享

淘宝卖家怎么开通信用卡支付?

淘宝卖家怎么开通信用卡支付?在淘宝购物的时候,我们作为卖家也可以接受信用卡的付款啦。卖家信用卡服务功能开通是免费的,买家购买商品使用信用卡付款不需要支付任何费用,卖家需要支付交易金额(包括运费)的1%作为交易手续费,下面分享开通方法
收藏 0 赞 0 分享

天猫卖家怎么申请退出天猫?天猫关闭店铺的详细流程

天猫卖家怎么申请退出天猫?现在网店越来越难开,不光是淘宝,现在天猫邓毅也很不好,很多的淘宝天猫商户也不怎么赚钱,有的人就想退出天猫店铺。天猫线上化退出流程是怎么样的呢?下面我们一起来看看关闭天猫店铺的详细教程
收藏 0 赞 0 分享

在天猫购物的时候使用的分期怎么提前还款?

在天猫购物的时候使用的分期怎么提前还款?没发工资的时候,在天猫申请了分期付款,但是发工资了,想提前把钱还了,该怎么申请呢?下面分享天猫主动还款的详细教程,需要的朋友可以参考下
收藏 0 赞 0 分享

激活天猫会员要钱吗?快速激活天猫会员的教程

激活天猫会员要钱吗?天猫用户在天猫有过实物交易且完整填写个人信息后可激活成为天猫会员。天猫会员尊享会员生日特权、服务特权、品牌特权、行业特权等专属特权。下面分享快速激活天猫会员的教程
收藏 0 赞 0 分享
查看更多