首页 > 家居生活 > 电子商务 >

如何设计淘宝旺铺店铺导航

来源:互联网 2023-02-21 16:16:02 479

淘宝店铺导航是买家访问店铺的快速通道可以方便地从一个页面跳转到另一个页面,查看店铺的各类商品及信息。因此,提供清晰的导航,能保证更多店铺页面被访问,使更多的商品,活动被发现。尤其买家从宝贝详情页到其他页面,若缺少导航条的指引,将极大影响转化率viR办公区 - 实用经验教程分享!

方法/步骤

  • 1

    如何编辑旺铺2012 的导航呢?进入店铺后台,选择导航处的”编辑“: viR办公区 - 实用经验教程分享!

    1.在打开的弹窗里面选择”添加“:viR办公区 - 实用经验教程分享!

    viR办公区 - 实用经验教程分享!

    如何设计淘宝旺铺店铺导航viR办公区 - 实用经验教程分享!

    如何设计淘宝旺铺店铺导航viR办公区 - 实用经验教程分享!

  • 2

    2.添加宝贝分类至导航操作如下:viR办公区 - 实用经验教程分享!

    viR办公区 - 实用经验教程分享!

    如何设计淘宝旺铺店铺导航viR办公区 - 实用经验教程分享!

  • 3

    3.添加页面至导航操作如下:viR办公区 - 实用经验教程分享!

    viR办公区 - 实用经验教程分享!

    如何设计淘宝旺铺店铺导航viR办公区 - 实用经验教程分享!

  • 4

    4.添加自定义链接至导航操作如下:viR办公区 - 实用经验教程分享!

    viR办公区 - 实用经验教程分享!

    如何设计淘宝旺铺店铺导航viR办公区 - 实用经验教程分享!

  • 5

    5.设置好的内容可以在此调整位置或删除:viR办公区 - 实用经验教程分享!

    viR办公区 - 实用经验教程分享!

    如何设计淘宝旺铺店铺导航viR办公区 - 实用经验教程分享!

  • 6

    viR办公区 - 实用经验教程分享!

    6.在前台展示如下:viR办公区 - 实用经验教程分享!

    viR办公区 - 实用经验教程分享!

    如何设计淘宝旺铺店铺导航viR办公区 - 实用经验教程分享!

  • 6相关内容非法爬取自百度经验
  • 7

    新旺铺导航是可以更换颜色和式样的哟 这里需要一些css的小技巧 。操作位置如下:viR办公区 - 实用经验教程分享!

    viR办公区 - 实用经验教程分享!

    如何设计淘宝旺铺店铺导航viR办公区 - 实用经验教程分享!

  • 8

    下面是自定义导航的示例. 首先要了解,什么是自定义cssviR办公区 - 实用经验教程分享!

    viR办公区 - 实用经验教程分享!

    CSS也叫层叠样式表单, 是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言viR办公区 - 实用经验教程分享!

    店铺导航开放css设定,就是说让卖家通过css来让导航展现的更加丰富自定义,交给卖家控制。viR办公区 - 实用经验教程分享!

    下面,举几个简单的例子来说明下这个功能的作用viR办公区 - 实用经验教程分享!

    上面 这个是店铺官方模板导航样式, 但是我觉得这个背景色我不喜欢,我想换一个背景颜色或者文字颜色, 在css里面,设置背景色使用background-color: #颜色值#, 文字颜色是 color: #颜色值#viR办公区 - 实用经验教程分享!

    【设置整个导航的背景】viR办公区 - 实用经验教程分享!

    .tshop-pbsm-shop-nav-ch{viR办公区 - 实用经验教程分享!

    background-color: #F37C06;viR办公区 - 实用经验教程分享!

    }viR办公区 - 实用经验教程分享!

    【设置导航中bd部分的背景】viR办公区 - 实用经验教程分享!

    .tshop-pbsm-shop-nav-ch .skin-box-bd{viR办公区 - 实用经验教程分享!

    background-color: #F37C06;viR办公区 - 实用经验教程分享!

    }viR办公区 - 实用经验教程分享!

    【设置导航文字的背景,因为系统中默认有很多地方有背景,所以这个地方需要覆盖完全】viR办公区 - 实用经验教程分享!

    .tshop-pbsm-shop-nav-ch .link{viR办公区 - 实用经验教程分享!

    background-color: #F37C06;viR办公区 - 实用经验教程分享!

    background-image: none;viR办公区 - 实用经验教程分享!

    }viR办公区 - 实用经验教程分享!

    【设置文字颜色】viR办公区 - 实用经验教程分享!

    .tshop-pbsm-shop-nav-ch .title{viR办公区 - 实用经验教程分享!

    color: white;viR办公区 - 实用经验教程分享!

    }viR办公区 - 实用经验教程分享!

    viR办公区 - 实用经验教程分享!

    viR办公区 - 实用经验教程分享!

    tshop-pbsm-shop-nav-ch 和 .title, .link…. 这些就是css的选择器,代表我想把哪个背景色或者文字颜色应用在哪个元素上面。看看效果: viR办公区 - 实用经验教程分享!

    viR办公区 - 实用经验教程分享!

    如何设计淘宝旺铺店铺导航viR办公区 - 实用经验教程分享!

  • 注意事项

    • 1:可以注意到, 每个样式最前面有个.tshop-pbsm-shop-nav-ch 前缀, 意思是这个样式只能作用在导航上面,而不会影响到其他模块样式.viR办公区 - 实用经验教程分享!

      如果卖家在写的时候不加上这个前缀,系统会默认帮助加上, 同样是为了这个样式只作用在导航上,不影响到其他模块viR办公区 - 实用经验教程分享!

      viR办公区 - 实用经验教程分享!

      viR办公区 - 实用经验教程分享!

      viR办公区 - 实用经验教程分享!

    • 2: css的样式值,同样有些样式是不能写的,比如 expression这个可执行js代码的属性,是不允许使用的.

      viR办公区 - 实用经验教程分享!

      viR办公区 - 实用经验教程分享!

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!viR办公区 - 实用经验教程分享!


    标签: 淘宝设计店铺导航

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码