Le thème Dawn de Shopify est l'un des thèmes gratuits les plus populaires grâce à sa simplicité et son adaptabilité. Toutefois, il n'offre pas de solution intégrée pour un header transparent, une fonctionnalité souvent demandée pour un look plus moderne et épuré. Dans cet article, nous vous expliquerons étape par étape comment créer un header transparent sur le thème Dawn (version 13.0.1).
1. Pourquoi Opter pour un Header Transparent ?
Un header transparent permet à votre contenu d'occuper toute la largeur de l'écran, ce qui donne une apparence plus moderne et immersive à votre boutique en ligne. Il est particulièrement utile pour les pages d’accueil avec une grande image ou un diaporama en arrière-plan.
2. Pré-requis Avant de Commencer
3. Étapes pour Créer un Header Transparent sur Shopify Dawn
Étape 1 : Accéder à l’Éditeur de Code
Étape 2 : Ajouter le code de schéma
Ajoutez le code de schéma suivant dans le fichier header.liquid sous « settings » : [
{ "type": "checkbox", "id": "enable_transparent-header", "label": "Enable Transparent Header", "default": false }, { "type": "text", "id": "color-transparent", "label": "Transparent Color" }, { "type": "checkbox", "id": "only-homepage", "default": true, "label": "Enable only on Homepage" },
Étape 3 : Ajouter le code CSS
Ajoutez le code CSS suivant sous {%- style -%}
{% unless settings.logo %}.header__heading-link .h2{ display: block !important;} .header__heading-link .header__heading-logo-wrapper{ display: none; } {% endunless %} {% if section.settings.enable_transparent-header and section.settings.color-transparent %}.header-wrapper{ background: transparent; position: absolute; width: 100%; top: 0px; } .scrolled-past-header sticky-header{background: var(--gradient-background) !important; /* color: rgba(var(--color-foreground), 0.75); */} /* .scrolled-past-header sticky-header .header__icon.link,.scrolled-past-header sticky-header .header__active-menu-item,.scrolled-past-header sticky-header .disclosure__button,.header__heading-link .h2{ color: rgba(var(--color-foreground), 0.75) !important; } */ .scrolled-past-header sticky-header .header__heading-link{ display: block !important; } .scrolled-past-header sticky-header .logo-transparent{ display: none !Important; } .header__heading-link{ display: none; } .logo-transparent{ display: block; } @media only screen and (min-width: 600px) { .list-menu__item, details[open]>.header__submenu { color: {{section.settings.color-transparent}} !important; background: transparent; } .header__icon.link,.header__active-menu-item,.disclosure__button,.header__heading-link .h2{ color: {{section.settings.color-transparent}} !important; } .scrolled-past-header sticky-header .list-menu__item, details[open]>.header__submenu { color: rgba(var(--color-foreground), 0.75) !important; } .scrolled-past-header sticky-header .header__icon.link,.scrolled-past-header sticky-header .header__active-menu-item,.scrolled-past-header sticky-header .disclosure__button,.header__heading-link .h2{ color: rgba(var(--color-foreground), 0.75) !important; }{% endif %} {% if section.settings.enable_transparent-header and section.settings.only-homepage and template != 'index' %} .header-wrapper{ position: relative; background: var(--gradient-background); } .header__icon.link,.header__active-menu-item,.disclosure__button,.header__heading-link .h2{ color: rgba(var(--color-foreground), 0.75); } {% endif %} {% if section.settings.color-transparent and section.settings.only-homepage and section.settings.enable_transparent-header and template != 'index' %}@media only screen and (min-width: 600px) { .list-menu__item, details[open]>.header__submenu { color: rgba(var(--color-foreground), 0.75) !important; background: transparent; }} .header__icon.link,.header__active-menu-item,.disclosure__button,.header__heading-link .h2{ color: rgba(var(--color-foreground), 0.75) !important; } .header__heading-link{ display: block; } .logo-transparent{ display: none; } {% endif %}
Étape 3 : Ajouter le code HTML
En dessous du code suivant :
<span class="h2">{{ shop.name }}</span> {%- endif -%} </a>
Ajouter le code suivant :
{% if section.settings.enable_transparent-header %} <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_alt = settings.logo-transparent.alt | default: shop.name | escape -%} {%- assign logo_height = settings.logo_width | divided_by: settings.logo-transparent.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 %}
Étape 4 : Modifier le schéma dans settings_schema
En dessous de ce code :
"label": "t:settings_schema.logo.settings.logo_image.label"},
Ajouter le code suivant :
{ "type": "image_picker", "id": "logo-transparent", "label": "Logo Transparent" },
Une fois toutes ces étapes réalisées votre header sera transparent. SI vous avez des questions au sujet de la personnalisation, vous pouvez nous contacter à l'adresse email suivante : [email protected]