Cr√©er un mode nuit / jour sur Shopify ūüĆď

0

Cr√©er un mode nuit / jour sur Shopify ūüĆď - Fuznet

Qu'est-ce que le mode nuit sur un site web ?

Le mode nuit, également appelé dark mode, est la version sombre de votre site web. Le fond habituellement blanc est changé en noir et les écritures habituellement noires passent en blanches.

Cela permet de reposer les yeux et de réduire la consommation électrique de l'écran.

Le code

Création du bouton

Nous allons créer un bouton flottant qui suivra la navigation du visiteur, en bas à droite de l'écran. En cliquant sur ce bouton, une fonction changera le style de votre boutique Shopify.

HTML, CSS et JAVASCRIPT

See the Pen Floating button by Ludovic (@Fuznet) on CodePen.

Placez le code HTML avant la balise de cl√īture body de votre th√®me dans theme.liquid et le CSS dans le fichier CSS de votre th√®me, souvent appel√©¬†theme.css. Quant au JavaScript, collez le dans le fichier¬†JS principal de votre th√®me, souvent appel√© theme.js. Vous pouvez √©galement le placer entre 2 balises <script> en dessous du code HTML du bouton, avant la balise de cl√īture body.

Retour au blog

Laisser un commentaire

Veuillez noter que les commentaires doivent être approuvés avant d'être publiés.