i want a banner on top of my header but i dont get where to put it in the code... (im new to coding)
Hello all,
i need help in implementing a banner on top of my header...
can someone help? im new to coding and it doesnt work...
where do i have to put it in my shop?
can someone help , please?
shop link: mein-grinder.com -->
fd305a-75.myshopify.com
my code liquid:
<!doctype html>
<html class="no-js" lang="{{ request.locale.iso_code }}" dir="{% render 'direction' %}">
<head>
<!-- Basic page needs -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,height=device-height,minimum-scale=1.0,maximum-scale=2.0">
<meta name="theme-color" content="{{ settings.page_button_background }}">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="author" content="Debutify">
<link rel="canonical" href="{{ canonical_url }}">
<!-- Preconnect external resources -->
<link rel="preconnect" href="https://cdn.shopify.com">
<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
<link rel="preconnect" href="https://monorail-edge.shopifysvc.com">
<link rel="dns-prefetch" href="https://productreviews.shopifycdn.com">
<link rel="preconnect" href="https://debutify.com">
<!-- Preload assets -->
{%- unless settings.heading_font.system? -%}
<link rel="preload" href="{{ settings.heading_font | font_url }}" as="font" type="font/woff2" crossorigin>
{%- endunless -%}
{%- unless settings.text_font.system? -%}
<link rel="preload" href="{{ settings.text_font | font_url }}" as="font" type="font/woff2" crossorigin>
{%- endunless -%}
{%- unless settings.accent_font.system? -%}
<link rel="preload" href="{{ settings.accent_font | font_url }}" as="font" type="font/woff2" crossorigin>
{%- endunless -%}
<link rel="preload" href="{{ settings.icon | append: '.woff2' | asset_url }}" as="font" type="font/woff2" crossorigin>
<link rel="modulepreload" href="{{ 'theme.min.js' | asset_url }}" as="script">
<!-- Favicon -->
{%- liquid
assign favicon_url = settings.favicon | image_url: width: 96, crop: 'center'
assign apple_favicon_url = settings.favicon | image_url: width: 180, crop: 'center'
if settings.favicon == blank
assign favicon_url = 'data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII='
assign apple_favicon_url = 'data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII='
endif
-%}
<link rel="shortcut icon" href="{{ favicon_url }}" class="favicon">
<link rel="apple-touch-icon" href="{{ apple_favicon_url }}" class="favicon">
<!-- Title and description -->
<title>
{{ page_title }}{% if current_tags %}{%- assign meta_tags = current_tags | join: ", " -%} – {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} – {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} – {{ shop.name }}{% endunless %}
</title>
{%- if page_description -%}
<meta name="description" content="{{ page_description | escape }}">
{%- endif -%}
<!-- Social meta -->
{%- render 'social-meta-tags' -%}
<!-- Microdata -->
{%- render 'microdata-schema' -%}
<!-- Variables -->
{%- render 'css-variables' -%}
{%- render 'js-variables' -%}
<!-- CSS -->
{{- 'theme.css' | asset_url | stylesheet_tag: preload: true -}}
<!-- JS -->
<script type="module" src="{{ 'theme.min.js' | asset_url }}" defer></script>
{%- if request.page_type contains 'customers/' -%}
<script src="{{ 'shopify_common.js' | asset_url }}" defer></script>
{%- endif -%}
<!-- Header hook for plugins -->
{{ content_for_header }}
</head>
<body class="{% render 'body-classes' %}">
{%- if request.page_type != 'password' -%}
{%- sections 'general-group' -%}
{%- sections 'addons-group' -%}
{%- sections 'header-group' -%}
{%- endif -%}
{%- liquid
if settings.cart_type == 'drawer'
render 'drawer-cart'
elsif settings.cart_type == 'modal'
render 'modal-cart'
endif
render 'theme-addons'
-%}
<main role="main" id="main" class="main-content fadeIn">
{{ content_for_layout }}
{%- if request.page_type != 'password' -%}
<div class="footer-group">
{%- sections 'footer-group' -%}
</div>
{%- endif -%}
</main>
<!-- Google Tag Manager -->
{%- render 'integrations-gtm' -%}
<!-- Klaviyo app -->
{%- render 'integrations-klaviyo' -%}
<!-- Custom code -->
{%- render 'custom-code' -%}
</body>
<style>
.header.header--center {
position: fixed !important;
top: 0 !important;
width: 100% !important;
z-index: 1000 !important;
transition: background-color 0.3s, color 0.3s; /* Übergangseffekt */
}
.header.header--center.scrolled {
background-color: white !important; /* Weißer Hintergrund bei Scroll */
color: black !important; /* Schwarzer Text bei Scroll */
}
.header.header--center a {
transition: color 0.3s; /* Übergangseffekt für Links */
}
.header.header--center.scrolled a {
color: black !important; /* Schwarzer Linktext bei Scroll */
}
</style>
<script>
var sticky = document.querySelector('.header.header--center');
window.onscroll = function() {
if (window.scrollY > 150) {
sticky.classList.add('scrolled');
} else {
sticky.classList.remove('scrolled');
}
}
</script>
</html>
Theme: Debutify 6.2.1
Community Blog Articles
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024
We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024