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

• Avoir un thème Dawn (v13.0.1) installé sur votre boutique Shopify.
• Une connaissance basique de la personnalisation du code sur Shopify.
• Effectuer une sauvegarde de votre thème avant toute modification.

3. Étapes pour Créer un Header Transparent sur Shopify Dawn

Étape 1 : Accéder à l’Éditeur de Code

1. Connectez-vous à votre tableau de bord Shopify.
2. Allez dans "Boutique en ligne" > "Thèmes".
3. Cliquez sur "Actions" à côté de votre thème Dawn, puis sur "Modifier le 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 : contact@optify.agency