美文网首页
prestige主题移动端头部添加搜索框

prestige主题移动端头部添加搜索框

作者: iqing2012 | 来源:发表于2019-11-26 13:52 被阅读0次

1。在header.liquid搜索/cart
然后添加下面的代码

 <img class="chicv-mobile-search" src="https://cdn.shopify.com/s/files/1/1998/7053/files/07ba29b4372524f89bd3b060ad8b129f.png?589" style="width:20px;height:20px;vertical-align:middle;    position: absolute;
    vertical-align: middle;
    right: 46px;">
image.png

同样在header.liquid搜索 /search,然后再末尾加上id="chicv-search",如下图所示

image.png

然后在schema前加上

<script src="https://cdn.bootcss.com/jquery/1.12.2/jquery.js"></script>
<script>

  $(document).ready(function(){
     
     $(document).on('click', '.chicv-mobile-search', function(){  $("#chcv-search-id .Text--subdued")[0].click();    }) 

    
  
  })

</script>
image.png

2.在theme.scss.liquid末尾空白处添加

@media screen and (min-width: 750px) {
       .chicv-mobile-search{display:none!important}
    }

相关文章

网友评论

      本文标题:prestige主题移动端头部添加搜索框

      本文链接:https://www.haomeiwen.com/subject/dslewctx.html