Nous allons voir dans ce tutoriel comment mettre une image de fond ou un background image sur le fond d’une boutique Shopify. On verra également comment mettre ce type d’image sur une section ou une zone de votre site.

Mettre votre image sur Shopify

Rendez-vous dans l’administration de votre boutique – Paramètres – Fichier et déposez votre image – Copiez maintenant l’url de l’image et stocker la dans un éditeur de texte. Nous en aurons besoin tout à l’heure 😉

Positionner votre background image

Rendez-vous dans Boutique en ligne – Actions – Modifier le code et ouvrez le dossier Assets – trouvez votre fichier xxx.scss.liquid ou xxx.css.liquid, souvent appelé theme, style ou timber.

Mettez-vous tout en bas du site et copiez/collez le code suivant en remplaçant la portion « url-image » par l’url copiée tout à l’heure.

Sur tout le site

body {  
  background-image: url("url-image"); 
  background-size: 100%;
  background-repeat:no-repeat;
  background-position:center center;
}

Sur une section de la page d’accueil

#shopify-section-identifiant {  
  background-image: url("url-image"); 
  background-size: 100%;
  background-repeat:no-repeat;
  background-position:center center;
}

Regardez la vidéo pour savoir comment trouver l’identifiant de la section

Plus d’options ?

Je vous invite à visionner la vidéo 🙂

Ce tutoriel existe aussi en vidéo

a vidéo arrive bientôt 😉

Bon tuto à toutes et tous

Inclus dans Speedfly
Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 1 votes]

Cet article a 4 commentaires

  1. Salut dev j’espere que vous allez bien est-ce que ça marche avec le thème Fastlane?

    1. Hello, théoriquement oui 🙂

  2. Bonjour,
    Sur le thème Brooklyn, est-il possible de mettre un fond de couleur mais que sur certaines parties ?
    Merci d’avance, impossible de trouver une réponse !

    1. Bonjour, oui c’est possible mais il faut s’y connaitre en CSS et jouer avec les ID

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine