Categories
Shopify主题开发

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
      },

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行找到下面的代码

//替换成下面的代码

4、打开“header.liquid”文件

//找到如下代码,此代码在文件内多处都有,都需要替换
          
            {%- 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 -%}
              {{ shop.name }}
            {%- endif -%}
          
//替换成下面的代码
          {% comment %} 默认logo {% endcomment %}
          
            {%- 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 -%}
              {{ shop.name }}
            {%- endif -%}
          
          {% comment %} 默认logo {% endcomment %}
          {% comment %} 透明logo {% endcomment %}
          {%- if request.page_type == 'index' and settings.logo_transparent != blank -%}
          
            {%- 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 -%}
              {{ shop.name }}
            {%- endif -%}
          
          {%- endif -%} 
          {% comment %} 透明logo {% endcomment %}

 

 

 

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

分类