释放双眼，带上耳机，听听看~！
1、修改Dawn主题设置文件“settings_schema.json”
//找到以下代码，在文件13行
{
"type": "image_picker",
"id": "logo",
"label": "t:settings_schema.logo.settings.logo_image.label"
},
//替换为以下代码，多加几种logo
{
"type": "image_picker",
"id": "logo",
"label": "t:settings_schema.logo.settings.logo_image.label"
},
{
"type": "text",
"id": "logo_svg",
"label": "Logo svg"
},
{
"type": "image_picker",
"id": "logo_transparent",
"label": "Logo for transparent"
},
{
"type": "text",
"id": "logo_transparent_svg",
"label": "Logo for transparent svg"
},
{
"type": "checkbox",
"id": "header_transparent",
"label": "Header transparent",
"info":"1.首页生效 2.开启此效果，请确保header-Sticky header选择不是none",
"default": false
},
{
"type": "checkbox",
"id": "header_transparent_collection",
"label": "Header transparent collection",
"info":"1.collection页生效 2.开启此效果，请确保header-Sticky header选择不是none",
"default": false
},
2、在Assets目录新建一个自定义css文件”custom.css”，输入以下代码
//头部透明，滑动纯色
.header_transparent .header-wrapper {
position: absolute;
top: 0;
width: 100%;
background: transparent;
border: none;
}
.logo_default {
display:block;
}
.logo_transparent {
display:none;
}
.header_transparent .logo_default {
display:none;
}
.header_transparent .logo_transparent {
display:block;
}
.header_transparent .scrolled-past-header .logo_default {
display:block;
}
.header_transparent .scrolled-past-header .logo_transparent {
display:none;
}
.header_transparent .scrolled-past-header .header-wrapper {
background: #fff;
-webkit-transition: all .3s ease-in-out;
-khtml-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.header_transparent .shopify-section-header-hidden {
display: none;
top: calc(-1 * var(--header-height));
-webkit-transition: all .3s ease-in-out;
-khtml-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
3、打开 “theme.liquid”文件
//221行找到下面的代码
{{ 'base.css' | asset_url | stylesheet_tag }}
//替换成下面的代码
{{ 'base.css' | asset_url | stylesheet_tag }} {{ 'custom.css' | asset_url | stylesheet_tag }}
//241行找到下面的代码
<body class="gradient">
//替换成下面的代码
{%- assign use_transparent_header = false -%}
{%- if template == 'index' and settings.header_transparent -%}
{%- assign use_transparent_header = true -%}
{%- endif -%}
{%- if template.name == 'collection' and settings.header_transparent_collection and collection.image and collection.all_products_count > 0 -%}
{%- assign use_transparent_header = true -%}
{%- endif -%}
<body class="gradient {%- if use_transparent_header -%}header_transparent{%- endif -%}" >
4、打开“header.liquid”文件
//找到如下代码，此代码在文件内多处都有，都需要替换
<a href="{{ routes.root_url }}" class="header__heading-link link link--text focus-inset">
{%- if settings.logo != blank -%}
{%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%}
{%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
{{ settings.logo | image_url: width: 500 | image_tag:
class: 'header__heading-logo motion-reduce',
widths: '50, 100, 150, 200, 250, 300, 400, 500',
height: logo_height,
width: settings.logo_width,
alt: logo_alt
}}
{%- else -%}
<span class="h2">{{ shop.name }}</span>
{%- endif -%}
</a>
//替换成下面的代码
{% comment %} 默认logo {% endcomment %}
<a href="{{ routes.root_url }}" class="header__heading-link link link--text focus-inset {% if settings.logo_transparent %}logo_default{% endif %}">
{%- if settings.logo != blank -%}
{%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%}
{%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
{{ settings.logo | image_url: width: 500 | image_tag:
class: 'header__heading-logo motion-reduce',
widths: '50, 100, 150, 200, 250, 300, 400, 500',
height: logo_height,
width: settings.logo_width,
alt: logo_alt
}}
{%- else -%}
<span class="h2">{{ shop.name }}</span>
{%- endif -%}
</a>
{% comment %} 默认logo {% endcomment %}
{% comment %} 透明logo {% endcomment %}
{%- if request.page_type == 'index' and settings.logo_transparent != blank -%}
<a href="{{ routes.root_url }}" class="header__heading-link link link--text focus-inset logo_transparent">
{%- if settings.logo_transparent != blank -%}
{%- assign logo_transparent_alt = settings.logo_transparent.alt | default: shop.name | escape -%}
{%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
{{ settings.logo_transparent | image_url: width: 500 | image_tag:
class: 'header__heading-logo motion-reduce',
widths: '50, 100, 150, 200, 250, 300, 400, 500',
height: logo_height,
width: settings.logo_width,
alt: logo_transparent_alt
}}
{%- else -%}
<span class="h2">{{ shop.name }}</span>
{%- endif -%}
</a>
{%- endif -%}
{% comment %} 透明logo {% endcomment %}
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
