文章
文章用户商铺文档快讯圈子网址导航问答

shopify Dawn10-11主题头部菜单修改成半透明

释放双眼，带上耳机，听听看~！

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": "image_picker",
        "id": "logo_transparent",
        "label": "Logo for transparent"
      },
      {
        "type": "checkbox",
        "id": "header_transparent",
        "label": "Header transparent",
        "info":"1.Homepage enable 2.To enable this effect, please ensure that the /Header-Sticky header/ option is not none",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "header_transparent_collection",
        "label": "Header transparent collection",
        "info":"1.Collection enable 2.To enable this effect, please ensure that the /Header-Sticky header/ option is not none",
        "default": false
      },

2、在Assets目录新建一个自定义css文件”custom.css”，输入以下代码

//头部透明，滑动纯色
.header_transparent .header-wrapper {
position: absolute;
top: 0;
width: 100%;
background: transparent;
border: none;
}
.header_transparent .localization-selector.link {
color: #fff;
}
.header_transparent .scrolled-past-header .localization-selector.link {
color: rgb(var(--color-foreground));
}
.header_transparent .header__menu-item {
color: #fff;
}
.header_transparent .header__submenu .header__menu-item {
color: #000;
}
.header_transparent .header__active-menu-item {
color: #fff;
}
.header_transparent .header__icon {
color: #fff;
}
.header_transparent .scrolled-past-header .header__menu-item {
color: rgb(var(--color-foreground));
}
.header_transparent .scrolled-past-header .header__active-menu-item {
color: rgb(var(--color-foreground));
}
.header_transparent .scrolled-past-header .header__icon {
color: rgb(var(--color-foreground));
}
.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{% if settings.animations_hover_elements != 'none' %} animate--hover-{{ settings.animations_hover_elements }}{% endif %}">
//替换成下面的代码 
{%- 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.all_products_count > 0 -%}
  {%- assign use_transparent_header = true -%}
{%- endif -%}
<body class="gradient{% if settings.animations_hover_elements != 'none' %} animate--hover-{{ settings.animations_hover_elements }}{% endif %} {%- 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 -%}
<div class="header__heading-logo-wrapper">
{%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%}
{%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
{% capture sizes %}(max-width: {{ settings.logo_width | times: 2 }}px) 50vw, {{ settings.logo_width }}px{% endcapture %}
{% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %}
{{ settings.logo | image_url: width: 600 | image_tag:
class: 'header__heading-logo motion-reduce',
widths: widths,
height: logo_height,
width: settings.logo_width,
alt: logo_alt,
sizes: sizes,
preload: true
}}
</div>
{%- 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 -%}
<div class="header__heading-logo-wrapper">
{%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%}
{%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
{% capture sizes %}(max-width: {{ settings.logo_width | times: 2 }}px) 50vw, {{ settings.logo_width }}px{% endcapture %}
{% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %}
{{ settings.logo | image_url: width: 600 | image_tag:
class: 'header__heading-logo motion-reduce',
widths: widths,
height: logo_height,
width: settings.logo_width,
alt: logo_alt,
sizes: sizes,
preload: true
}}
</div>
{%- else -%}
<span class="h2">{{ shop.name }}</span>
{%- endif -%}
</a>
{% comment %} 默认logo {% endcomment %}
{% comment %} 透明logo {% endcomment %}
{%- if settings.header_transparent or settings.header_transparent_collection -%}
{%- if template == 'index' or template.name == 'collection' -%}
<a href="{{ routes.root_url }}" class="header__heading-link link link--text focus-inset logo_transparent">
{%- if settings.logo_transparent != blank -%}
<div class="header__heading-logo-wrapper">
{%- assign logo_transparent_alt = settings.logo_transparent.alt | default: shop.name | escape -%}
{%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
{% capture sizes %}(max-width: {{ settings.logo_width | times: 2 }}px) 50vw, {{ settings.logo_width }}px{% endcapture %}
{% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %}
{{ settings.logo_transparent | image_url: width: 600 | image_tag:
class: 'header__heading-logo motion-reduce',
widths: widths,
height: logo_height,
width: settings.logo_width,
alt: logo_alt,
sizes: sizes,
preload: true
}}
</div>
{%- else -%}
<span class="h2">{{ shop.name }}</span>
{%- endif -%}
</a>
{%- endif -%}
{%- endif -%} 
{% comment %} 透明logo {% endcomment %}
打赏微海报分享
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
Shopify主题开发

Shopify检查购物车中是否存在指定商品，符合条件输出内容

2023-7-23 22:52:33

Shopify主题开发Shopify功能开发

Shopify主题菜单内显示图片

2023-7-26 13:54:32

0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯

解锁会员权限

开通会员

解锁海量优质VIP资源

立刻开通
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
客服

  • 扫码打开当前页

  • 微信

返回顶部