shopify导航标题增加图标
- 从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://www.xxxxxx.com/image.chic-fusion.com/menu/icongif.gif">
</span>
</span>
{%- else -%}
{{- link.title | escape -}}
{%- endif -%}
目标位置:
替换后效果:
2. 复制粘贴CSS样式在theme.scss.liquid
/* 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%);
}