【Shopify】导航标题增加hot图标

(注:由于简书平台9.28号前暂停发布文章,该功能之前整理至word文档传阅,现统一整理到简书账号)

效果如下:


hot图标显示
目标代码( 代码1 + 代码2 ):

目标代码1:
(从header.liquid文件中查找)
!注:代码中第一行link.title 后的标题需替换成各平台想要在其上方增加图标的标题名称,此处只是以 NEW IN FALL为例。

{%- if link.title == 'NEW IN FALL' -%}
    <span style="position:relative;">
    {{- link.title | escape -}}
    <span class="__icon">
        <img src="https://s3-us-west-2.amazonaws.com/image.chic-fusion.com/menu/icongif.gif">
      </span>
    </span>
{%- else -%}
    {{- link.title | escape -}}
{%- endif -%}

目标位置1:


目标位置

替换后效果

代码2:

/* shopify好像不支持这个语法 只要切换手机未看见hot icon 就可以不用加这一段
@include av-mq('phone') {
  .__icon{
    display:none !important;
  }
}
 */
.__icon{
    display: inline-block;
    position: absolute;
    top: -32px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -os-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

将代码2复制粘贴在theme.scss.liquid最下方即可。

操作中遇到困难请联系技术部同事。
有任何意见建议请联系技术部同事。
😊

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容