淘宝页面装修教程

合集下载

淘宝店铺装修首页会员模块设置教程

淘宝店铺装修首页会员模块设置教程为提升消费者在店铺首页的会员体验，助力商家实现店铺访问流量的快速承接，淘宝在2019年8月正式上线店铺首页会员模块的全新版本。

新版本结合新版会员中心的升级，进一步实现用户访店后的会员关系沉淀及会员用户的快速激活。

操作教程1、登录旺铺装修后台，找到需要装修该模块的首页页面，点击装修页面进入页面装修后台进入左侧模块，选中营销互动类找到店铺会员模块，并将该模块拖至当前待装修页面内，并调整在页面的排布位置。

建议：为了更好的承接店铺的用户流量，提升新会员入会率及老会员的权益互动参与率，建议可将该模块置顶排序！营销互动模块中目前存在两种店铺首页会员模块，请选中如下新版模块选中页面模块设置展现模式，目前该模块支持两种设定模块：1）智能设定模式：文本内容：选择文本内容为智能文本，将针对满足入会门槛的用户展示商家配置新会员礼包内的相关权益并快速引导入会；针对会员用户默认展示当前用户的会员等级及积分信息，后续将增加互动内容及权益推荐内容；背景图片：可快速选择平台提供的标准图片素材自定义设定模式：文本内容：可编辑最多13个字的引导文案，该文案仅面向非会员引导入会展示，针对会员用户默认展示当前用户的会员等级及积分信息，后续将增加互动内容及权益推荐内容；自定义文案建议商家突出核心的入会权益引导，以增强入会转化率！背景图片：可选择自定义的背景图片，实现与店铺首页更好的视觉融合，图片尺寸为：702*110保存模块内容、保存并发布页面，即完成会员模块的装修。

注意：发布并选中该页面作为店铺首页页面后，用户访问时将进行实时判断，非会员满足入会门槛，且商家有配置入会权益（新会员礼包）时会进行展示。

如用户不满足入会门槛，或无可享受的新会员权益则不进行展示；会员将默认展示模块！。

淘宝导航装修css全解超赞超详细

一、首先我们进入到店铺的装修页面，将鼠标放在导航上面会出现“编辑”字样，单击，如图选择“显示设置”选项卡1.修改导航分类下面的背景色，代码如下：.skin-box-bd .link{background:#000000;}效果如下--------------------------------默认是黑色的，如果你要别的颜色，只要修改#000000就可以了，颜色对照表地址/other/rgb.htm--------------------------------------------------------------------------如果你想要更加个性，而不想只要简单的纯色块的话，可以自己做图片，然后连接上去，代码如下：.skin-box-bd .link{background:url(图片链接);}效果如下--------------------------------将“图片连接”换成你的图片的连接就可以了，一般都是自己做好然后上传到淘宝图片空间，然后链接就可以了！在图片空间点击对应图片下方的“链接”按钮可以直接复制图片链接，替换到代码里就可以了！2.修改整个导航的背景色【其实只修改了有分类之外的部分（前面我们已经修改好了分类背景），还有最右边那部分没改到，后面会有修改那里的代码，一步步跟着来就没错了！】代码如下：.skin-box-bd .menu-list{background:#000000;}效果如下--------------------------------修改颜色的方法同上--------------------------------------------------------------------------修改成图片的代码如下：.skin-box-bd .menu-list{background:url(图片链接);}3.修改最右边留下的一小块，2里提到的，代码如下：.skin-box-bd{background:#000000;}效果如下--------------------------------修改颜色的方法同上--------------------------------------------------------------------------修改成图片的代码如下：.skin-box-bd{background:url(图片链接);}这样做你的导航完成的差不多了，但是发布之后你会发现字体的背景色块有问题，只有文字下方才有色块，比如“首页”，只有“首页”两个字下面有颜色，其它有些四个字的就四个字有，这样很影响美观！所以我们还要加上两条代码4.字外：.skin-box-bd .menu-list .menu-selected .link{background:#000000;}5.字里：.skin-box-bd .menu-list .menu-selected .link .title{background:#00000 0;}字外+字里=全部！这样就完整了好了，以上就是我的淘宝店里的导航里用的所有代码，下面再给大家一些别的代码！！二、下面红色部分为可以修改的，颜色代码大家很熟悉了，字号就是字体的大小，在网页中，字体大小一般是14到20左右，根据自己的需要设定吧，直接填写数字就OK了！1.导航背景色代码（除去“所有分类”）如下：.menu-list .link{background:#000000;}2.导航栏文字（除去“所有分类”）如下：.menu-list .menu .title{color:#颜色代码;font-size:字号px;}3.“所有分类”的背景色代码如下：.all-cats .link{background:#000000;}4.“所有分类”的文字代码如下：.all-cats .link .title{color:#颜色代码;font-size:字号px;}最新代码，解决字体改大后导航右侧消失的情况！代码如下：.all-cats .link .title{font-size:字号px;}.all-cats .link {background:#3BAFFF;margin:0;padding:0px 3px;}字号最大为21，继续变大右侧导航将消失！该代码还不是很完善，我们会继续研究！5.二级分类文字代码如下：.popup-content .cats-tree .fst-cat .cat-name{font-size:字号px;color:#颜色代码;font-weight:bold/bolder/normal;}原来效果修改后效果6.二级分类背景代码如下：.popup-content{background:#000000;}7.三级分类文字代码（除去“所有宝贝”分类）如下.popup-content .cats-tree .snd-pop-inner{font-size:字号px;color:#颜色代码;font-weight:bold/bolder/normal;}原来效果修改后效果8.三级分类文字代码（包括“所有宝贝”分类字体大小）这样就无法改变字体颜色，我们会继续完善该代码！如下.popup-content .cats-tree .snd-pop-inner{font-size:字号px;color:#颜色;}9.三级分类背景代码：.popup-content .cats-tree .snd-pop-inner{background:#000000;}10.一级导航分类（除去“所有宝贝”分类）分隔线颜色代码如下：.menu-list .menu{border-color:#000000;}11.一级导航“所有宝贝”分类分隔线颜色代码如下：.all-cats .link{border-color:#000000;}12.一级导航分类的宽度修改代码如下：.menu-list .menu{background:#颜色;margin:0;padding:0px 增加的宽度px;}13.鼠标滑过一级分类导航文字变换背景色代码如下：.menu-list .menu-hover .link{background:#000000;}14.鼠标滑过一级分类导航文字变换颜色代码如下：.menu-list .menu-hover .link .title{color:#FFFFFF;}15.鼠标滑过二级分类导航文字变换背景色代码如下：.popup-content .cats-tree .cat-hd-hover{background:#000000;}16.鼠标滑过二级分类导航文字变换颜色代码如下：.skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-name{color: #ff0000;}17.鼠标滑过三级分类导航文字变换背景色代码如下：.popup-content .cats-tree .snd-cat-hd-hover{background:#000000;}18.二级分类上加空间代码如下：.popup-content .cats-tree{margin:0 0 50px 0;}19.修改“所有宝贝”右边小图标代码如下：.all-cats .link .popup-icon{background:url(图片连接);}20.修改二级分类右侧图标代码如下（有三级分类才会显示）：.popup-content .cats-tree .fst-cat-icon{background:url(图片连接);}22.在三级分类前加上小块白色代码如下：.popup-content .cats-tree .snd-cat-icon{display:block;height:3px;widt h:3px;}好了，我简单的导航修改技巧就到这里了，以上效果都是用白色或黑色做给大家看，是为了大家能更好的看清楚效果，如果上面有些看到是全白的，那是因为字体颜色和背景颜色一样才变成全白的，修改了背景大家再修改字体颜色就可以了！希望大家都可以做出自己喜欢的导航！三、关于店招和导航两侧的修改！这里修改好，跟导航和店招结合在一起会更加完美！修改方式如下：在店铺装修页面的左上方有个“装修”，将鼠标放在上面会出现下拉菜单，选择“样式菜单”单击左侧的“背景设置”这里有两个选项卡，分别是“页头设置”和“页面设置”。

淘宝店铺扶植版装修教程

扶持版装修教程①：点击旺旺上的淘，然后点击店铺管理出来这个页面点击自定义模板的编辑点击编辑之后出来一个框扶持版不支持一键安装，只能按照代码去安装啦。

命苦啊点击框框上的菜单源代码点击之后我们就需要找代码放进去了②：找代码下载这个之后，解压出来一个文件夹，我们点击浏览下自己需要模板几比如我看上了模板01打开之后我们找到代码这个文件夹然后直接点击打开这里的文档就是代码来的了。

我们刚才点击编辑装修的是右边的一个自定义，那么我们就要复制相应的代码进去。

扶持版的模板只能支持一个自定义，不可以超过20K。

所以我们装修的时候，复制的代码不能超过20K哦。

我们选择1-3个文档复制进去就可以了。

太多了就会超过20K不能保存哦！③：复制粘贴代码到自定义版块我们打开右边01，出来很多英文，这些就是代码来的哈我们全选，复制，然后粘贴到装修版块粘贴进去之后继续同样的操作，复制右边02打开，之前复制01进去了，现在直接在01的代码后面粘贴02. 我们现在假设只复制01,02就可以了。

全部复制粘贴完成之后。

看看编辑的框到了这里，我们要预览下装修的效果点击下源代码就可以看到编辑的效果了点击保存就可以看看店铺装修的第一步效果我们装修好右边的自定义，现在我们还可以装修左边的自定义，也就是分类这些模板的④：装修左边的分类自定义点击这个添加一个自定义模板然后变成这样点击编辑之定义内容区出来这个框框是不是很眼熟呢。

亲们看到的就是自定义编辑的版块了。

和我们刚才上面说到的方法是一样的咯点击编辑源代码然后复制粘贴左边的链接预览之后保存保存之后，我们看到的就是简单装修之后的店铺了⑤：店招点击编辑确定之后保存点击右上角的发布，我们的装修就完成了。

2013最新淘宝店铺装修教程第五课

4
‹#›
基础版装修全攻略教程
‹#›
店铺自定义招牌
‹#›
做好店铺招牌的几点步骤
• • • • • • • • • 1招牌尺寸页头高度为：150px（已包含导航）建议招牌尺寸：950*120 px（即加上导航高度，刚好是150px，可避免发布后导航被挤掉不显示的问题） 2店招模块误删后怎么找回来方法一：在页面管理-页面编辑-首页-“+添加模块”选择添加店铺招牌方法二：在页面管理-布局管理-首页-店铺页头 -“+”添加店铺招牌 3招牌中的收藏按钮制作收藏按钮需要自行设计制作。 4招牌代码来源招牌代码是html代码，可自行编写后直接复制到自定义招牌内容区。如果需要查看店铺招牌代码，在编辑框中选择“查看代码”按钮即可 5店招左侧的方块块（写着我们的店铺名的）能去掉吗？可以。用自定义招牌覆盖即可 6页头背景与店招的区别（基础版无背景功能）页头高150px，店铺招牌宽950 px。店铺招牌两次超出950px之外的部分为页头背景区域，页头背景需单独装修设置，页头背景设置路径：装修-样式编辑-背景-页头背景
‹#›
• • • • •
店招基本操作
• 登陆：卖家中心——店铺管理——店铺装修
‹#›
‹#›
‹#›
‹#›
店招基本操作完成
‹#›
旺铺导航教程
‹#›
‹#›
‹#›
‹#›
• CSS导航在线生成工具网址：/tool/dhcss/
‹#›
宝贝分类
‹#›
图片空间
卖家中心——店铺管理——图片空间
鼠标滑过图片可执行操作
宝贝推荐
‹#›
‹#›
‹#›
‹#›
‹#›

淘宝装修模板代码教程大全(完整版)

淘宝装修模板代码教程大全(完整版)1)公告栏的装修图片代码,帖到公告栏就行了. 不过还是有好多人来问我公告栏的位置-----点我的淘宝-----管理我的店铺------基本设置，下面写着公告的位置。

<img src="图片的所在的地址"><img border="0" src="图片地址" />2).公告悬浮装饰图片代码，COPY到公告的最下面就好了哦，<IMG style="right: 5px; BOTTOM: 0px; POSITION: relative" src="你图片的地址">3)加背景音乐的代码。

进“我的淘宝”点击“管理我的店铺”进入“基本设置” 先贴代码，再写你的公告文字<bgsound src="你的背景音乐地址" loop=-1>4)浮动的图片的代码：</td></tr></table>;<img height="150" src="图片地址"5)滚动字幕代码：这个用处可就多了，放到哪里那些字都是会动的，有很多朋友在好评里都会用到哦！<marquee>输入你想说的话</marquee>6)自定义颜色代码<font color=blue>输入你想要说的话</font>注意:等于号"="后就是颜色的英文：不喜欢这个颜色还可以换成其他颜色的，如：red(红)、blue(蓝)、green(绿)等；不过注意代码的总长度不要超过40哦。

7)增加链接链接内容<a href="链接地址">链接内容</a>8)店铺分类的代码<img src=" 图片的地址" /> 代码就放在：我的淘简单介绍一下我的操作方法：1、选好喜欢的宝贝分类模板，复制保存之后，填上适当的文字，然后上传到网上相册；2、复制代码<img src=" 图片的地址" /> 到宝贝分类中；3、打开网上相册，选中相应的模板，右击属性，复制属性中的图片地址；4、由于网上的图片地址过长，因此要在/上进行网址缩短工作：即把复制的图片地址到这个网站中进行缩短，然后会出现一个较短的图片地址5、再用短地址放入<img src=" 图片的地址" /> 的""中就ok了9)如何在店铺公告添加个性的鼠标指针：马上copy这个代码，它可以让您的店铺公告更有吸引力呀<table style="CURSOR: url('上传后的鼠标指针的网址')"><tr><td><table border="0" style="TABLE-LAYOUT: fixed">10)宝贝描述加上个性的鼠标指针自己喜欢的鼠标指针选好了吗？那就马上复制这个代码在宝贝描述里就可以了，当然还要先选“编辑源文件”<table width="100%" style="CURSOR: url('这里是已上传的鼠标指针网址')"><tr><td width="100%">另外，还要在源文件底部输入代码：</td></tr></table>宝贝描述中都带有“店铺收藏”字样，但是最新的淘宝收藏夹变化了，导致了以前的方法不灵了，如何解决这个问题呢？把以前的代码换成如下即可解决这个问题：/popup/add_collection.htm?id=62323209&itemid=62323209&itemtype=0&ownerid=115d86206eeba2e9d827ef69ac80a71c&scjjc=2（欢迎大家点击这个链接看看我说的方法灵不灵啊，点击确定之后，到您自己的收藏夹里面看一眼，是不是我的店铺已经被您收藏了？^-^^-^ 呵呵^-^）别忘了把62323209&itemid=62323209&itemtype=0&ownerid=115d86206eeba2e9d827ef69ac80a71c&scjjc=2这个数字修改成您自己的店铺ID哦（不修改的，我热烈的欢迎啊，哈哈）如何获得自己的店铺ID呢？进入“我的淘宝”/“查看我的店铺”，会看到浏览器的地址栏中有类似下面的字样：/shop/view_shop.htm?nekot=c21pbGVfNWNt1281414248539&user_number_id=321589306 user_id=后面的那串数字就是您自己店铺的ID了，把这个ID COPY下了，替换上面的那个代码就可以在宝贝描述模板里面添加收藏店铺了！！12)添加音乐代码：百度音乐/搜索你想要的歌曲，记得要选连接速度快的。

淘宝店铺装修教程——新旺铺教程之列表页装修

新旺铺教程之列表页装修
先来了解几个列表页的展示第一种是无法装修的--“店内搜索页”，也就是买家在店铺内搜索了宝贝出来的搜索结果页，暂时不支持装修，如下图所示：
第二种是“默认宝贝分类页”【点击某个宝贝分类会出现的页面】，这个页面可以自由装修，可添加通栏或者750宽度的模块，如下图示例通栏布局模块的添加：
该装修区域可重点放置本类目的促销商品信息，可根据自己店铺的需要添加所需的模块，有6个模块可供选择，如下图所示：
第三种就是新旺铺出现的个性列表页--可以完全对某一类目进行个性化的装修，形成子频道点击“+”可以添加新的个性列表页如下：
对于新添加的这个页面必须取名以及关联你想关联的类目，可以几个类目用一个子频道
也可以一个类目一个频道如下：
最后别忘记点击“保存”
保存完成之后就可以对新建的宝贝列表页进行装修了，具体装修操作和店铺首页相同注：个性列表页除了“宝贝列表”模块无法删除，其余所有默认模块均可删除，进行自由装修！
如果想删除的话先在左侧选择你想删除的个性列表页然后点击“页面编辑”的“删除页面”即可。

淘宝天猫网店美工教程项目10 无线店铺装修设计

5-淘宝旺铺装修教程

目录背景 (2)列表页 (4)店招 (7)店铺导航 (11)图片轮播 (14)悬浮旺旺 (18)宝贝分类 (20)特价模块 (27)宝贝推荐区 (30)友情链接 (32)宝贝描述模块 (36)布局管理 (39)备份与还原 (42)背景点击”装修“--”样式编辑“--”背景设置“ 便可设置店铺背景点击”背景设置“ --”页头设置“进店招位置的背景设置两种方式设置：选择调色器或者选择本地上传一张图片点击”选择要设置的页面“ -- 可以选择不同页面不同背景“页面设置”同”页头设置“列表页先来了解几个列表页的展示第一种是无法装修的--“默认搜索页”也就是买家在店铺内搜索了宝贝出来的搜索结果页。

第二种就是以前老旺铺的列表页--“默认宝贝分类页”【点击某个宝贝分类会出现的页面】这个页面可以在右侧750位置添加促销区点击“+”可以添加新的个性列表页如下：可以几个类目用一个子频道也可以一个类目一个频道如下：最后别忘记保存：如果想删除的话先在左侧选择你想删除的个性列表页然后点击“页面编辑”的“删除页面”即可具体的个性列表页同首页。

新旺铺的一大特色是：列表页可以删除掉所有默认模块自由装修啦！店招1.如何编辑店招？首先进入店铺后台点击店招“编辑”按钮2.可以使用默认的店铺招牌“店铺名称”虽然是默认店铺基本设置也可以修改3.可以选择图片空间选择图片进行默认店招背景5.如果不喜欢店招默认显示可以选择“自定义招牌”自由装修此处可以插入“banner maker”6.自定义招牌可以自由的输入代码如果店招自定义区内什么都没有是空白店招就会“消失不见”7.可以在右下方恢复历史记录8.最后进行保存即可拉！热门问题答疑：1招牌尺寸页头高度为：150px（已包含导航）建议招牌尺寸：950*120 px（即加上导航高度，刚好是150px，可避免发布后导航被挤掉不显示的问题）2店招模块误删后怎么找回来方法一：在页面管理-页面编辑-首页-“+添加模块”选择添加店铺招牌方法二：在页面管理-布局管理-首页-店铺页头-“+”添加店铺招牌3招牌中的收藏按钮制作收藏按钮需要自行设计制作。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

淘宝页面装修教程
淘宝页面装修教程不要标题
为了使淘宝页面更具个性化和吸引力，您可以使用以下装修技巧。

1. 使用图片和商品展示：在页面中添加高质量的产品图片，并确保它们清晰可见。

您还可以展示产品的不同颜色和规格。

2. 制作个性化的广告横幅：使用Photoshop或其他图像编辑软
件设计一个独特的广告横幅，用于突出您的品牌和特色产品。

3. 设计独特的商品分类：为了方便顾客查找所需的产品，您可以设计独特的商品分类。

使用图标和文字组合来突出不同的分类。

4. 添加店铺动态：对于有活动和促销的店铺，您可以通过添加店铺动态来吸引顾客的注意。

例如，在首页上展示最新的促销活动或限时折扣。

5. 突出店铺特色：如果您的店铺有某些特色产品或独特的卖点，确保在页面中突出展示。

使用图标或特殊的字体来增加突出效果。

6. 设计友好的购物车页面：确保购物车页面简洁明了，让顾客可以清楚地看到他们选择的商品和总金额。

添加清晰的结算按钮，方便顾客进行下一步操作。

7. 页面配色和背景：选择适合您店铺风格的配色方案，并确保背景不会干扰顾客浏览商品。

避免使用过于花哨或闪耀的背景。

8. 使用大字体和清晰的字形：确保页面上的文字清晰易读，使用大字体突出重要信息。

选择易于阅读的字形，例如Arial或
微软雅黑。

9. 良好的页面布局：确保页面布局整齐有序，不会让顾客感到混乱。

将不同区块分开，并留出足够的空白空间，让顾客能够轻松浏览页面。

10. 提供详细的商品描述和规格：在商品详情页提供清晰详细
的描述和规格，帮助顾客更好地了解商品。

确保描述内容准确、简洁并且易于理解。

希望以上信息对您有所帮助，祝您成功装修您的淘宝页面！。