淘宝装修网欢迎您,我们是专门的网店装修网站,为您提供完全免费的淘宝装修教程、素材、模板、代码等。       注册会员 | 会员登录 | 使用QQ登陆| 存到桌面 | RSS

如何在店招里面加搜索框

时间:2013-08-23 15:35作者:网店装修网 点击:
随着淘宝新旺铺的上线,淘宝店招可以使用自定义代码进行装修,让很多店铺可以随意设置自己的店招, 其中就包括使用店招里面使用搜索框,这种装修方便了买主搜索店铺内的宝贝,

随着淘宝新旺铺的上线,淘宝店招可以使用自定义代码进行装修,让很多店铺可以随意设置自己的店招

其中就包括使用店招里面使用搜索框,这种装修方便了买主搜索店铺内的宝贝,提高了店铺转化率,

从而提高了店铺销量,深受卖家的好评。但是由于技术要求高,并不是每个人都会使用,

所以有很多人向网店装修网咨询店招里面如何加搜索框。

下面就给大家详细的教下,希望大家能够仔细看哦。

最终店招加搜索框效果展示:

第一步:选择本站提供的淘宝店招素材

我们网店装修网提供了上百套的淘宝店招素材,素材地址:http://www.tbzxiu.com/a/jingpintupian/zhuangxiusucai/

相信一定有一款是适合您的店铺的,相中店招素材后,直接点击素材,即可在浏览器地址栏里获取素材的链接了。

第二步:使用Dreamweaver制作店招自定义代码

Dreamweaver(简称DW)是制作自定义代码的利器,也是制作装修模板必备工具。如果您的电脑里没有此款软件,请点击此处下载安装。

安装好以后,双击打开DW,选择新建一个HTML页面(文件--新建),

在代码视图下

删除所有的代码,然后把下面的代码复制进去:

  1. <table background="店招素材链接" 
  2. width="950" height="120" border="0" cellpadding="0" cellspacing="0"> 
  3.   <tr> 
  4.     <td>&nbsp;</td> 
  5.     <td>&nbsp;</td> 
  6.     <td>&nbsp;</td> 
  7.   </tr> 
  8. </table> 
注意带中划线的代码是图片的链接,将第一步中复制的店招链接粘贴替换掉就可以变成您自己的店招代码。

第三步:调整安装店招自定义并加店名等内容

在DW里将您的店招链接替换店招素材链接以后,点击设计视图,通过鼠标滑动表格里的两个虚框将表格中间的一列调整至空白处。
 
然后在代码模式下,选择复制全部代码,将代码复制进店标自定义里,如图:
在中间列里可以输入您的店名,主营项目等文字内容,并选中输入的文字,在上面的属性窗口里设置文字大小,颜色和字体等。
 

第四步:在店招自定义里添加搜索框

在第三步输入店名等文字后,再按一下ENTER回车键,再直接转到代码模式下。

复制下面的搜索源码:

  1. <form action="您的店铺链接/search.htm?&amp;&amp;&amp;scene=taobao_shop"  
  2. method="post" 
  3. style="padding-bottom:0px;margin:0px;padding-left:0px;
  4. padding-right:0px;padding-top:0px;"  
  5. target="_blank"> 
  6.         <input name="baobei_type" type="hidden" />  
  7.         <span style="padding-bottom:0px;margin:0px;padding-left:0px;
  8. padding-right:0px;color:#000;font-weight:bold;padding-top:0px;"> 
  9.         店内搜索:</span>
  10. <input name="keyword" style="line-height:16px;width:100px;font-size:12px;" />  
  11.         <span style="padding-bottom:0px;margin:0px;padding-left:0px;
  12. padding-right:0px;color:#000;padding-top:0px;">价格: 
  13.         </span><input name="lowPrice" 
  14. style="line-height:16px;width:50px;font-size:12px;" /> 
  15.          <span style="padding-bottom:0px;margin:0px;padding-left:0px;
  16. padding-right:0px;padding-top:0px;">-</span>  
  17.          <input name="highPrice" style="line-height:16px;width:50px;font-size:12px;" />  
  18.          <input style="border-bottom:medium none;border-left:medium none;
  19. padding-bottom:1px;background-color:#FF0000;margin:0px; 
  20.          padding-left:10px;padding-right:5px;color:#FFF;font-size:12px;
  21. border-top:medium none;border-right:medium none; 
  22.          padding-top:3px;" type="submit" value="搜索" />&nbsp;</form> 
将上面的中划线文字您的店铺链接替换成你的店铺地址(注意以http://*****.taobao.com为准),将复制的代码粘贴进去。
大功告成!!!
您学会了?看完了的话何不操作一下试试呢?
如果您想做通栏自定义模块里的店内搜索请查看淘宝店内搜索模块在线生成工具
Tags:
数据统计中!!
------分隔线----------------------------
发表评论
您所发布的评论都将被审核后显示,请自觉遵守互联网相关的政策法规。
评价:
表情:
用户名: 验证码:点击我更换图片
自助广告