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
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025
Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025
Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025