Séparateur

Design Shopify® : Comment ajouter un séparateur entre deux sections

Aussi appelé “Divider”, le séparateur est un trait que vous pouvez ajouter et personnaliser très facilement avec le thème SHOPIWEB. Plus épais, plus fin et de la couleur correspondante à votre charte graphique, le thème français SHOPIWEB vous permet d'ajouter et de personnaliser en quelques clics un séparateur pour désigner efficacement votre boutique e-commerce Shopify®.

PRÉ-REQUIS : Ce tutoriel est réalisé avec le thème SHOPIWEB. Pour suivre chacune des étapes, vous devez au préalable installer une licence active sur votre boutique Shopify®. Si ce n’est pas encore fait, commandez la vôtre depuis cette page.

Rendez-vous dans la personnalisation du thème SHOPIWEB

  • Depuis votre tableau de bord Shopify®, cliquez sur BOUTIQUE EN LIGNE > THÈMES > PERSONNALISER

Capture d'écran du tableau de bord shopify pour personnaliser le thème SHOPIWEB
ÉTAPE 1 : Depuis le tableau de bord Shopify®, cliquez sur BOUTIQUE EN LIGNE > THÈMES > PERSONNALISER
  • Une fois la nouvelle fenêtre chargée, sélectionnez la page sur laquelle vous souhaitez travailler, à l’aide du menu déroulant situé en haut au centre de l’écran

Capture d'écran de la fenêtre de personnalisation du thème SHOPIWEB pour sélectionner une page à modifier depuis le menu déroulant situé en haut au centre de l'écran
ÉTAPE 2 : Cliquez sur le menu déroulant en haut au centre de l'écran, puis sélectionnez la page de votre choix

Ajouter un bloc “Séparateur”

Le bloc “Séparateur” s’ajoute uniquement dans les sections INFORMATIONS PRODUITS et CONTENU PERSONNALISÉ.

  • Choisissez la section dans laquelle ajouter un “Séparateur”, puis cliquez sur AJOUTER UN BLOC > SÉPARATEUR

Capture d'écran de l'interface de personnalisation du thème SHOPIWEB pour ajouter le bloc SÉPARATEUR dans la section INFORMATIONS PRODUIT
ÉTAPE 3 : Pour ajouter le séparateur dans la section INFORMATIONS PRODUIT, cliquez sur AJOUTER UN BLOC > SÉPARATEUR
  • Une fois le bloc ajouté, une fenêtre de personnalisation apparaîtra dans la colonne à gauche de votre écran

Personnaliser le “Séparateur”

  • Réglez L’ÉPAISSEUR DE LA BARRE selon votre convenance (de 0 à 10)

Capture d'écran de la fenêtre de personnalisation du bloc SÉPARATEUR situé dans la colonne à gauche de l'écran de la personnalisation du thème SHOPIWEB
ÉTAPE 4 : La fenêtre de personnalisation du bloc SÉPARATEUR apparaît dans la colonne à gauche de l'écran. Réglez facilement l'épaisseur et la taille du SÉPARATEUR
  • Personnalisez la COULEUR DE LA BARRE (nous vous recommandons de sélectionner la couleur principale ou secondaire de votre charte graphique)

Capture d'écran de la fenêtre de personnalisation de la couleur du séparateur du thème SHOPIWEB
ÉTAPE 5 : Personnalisez la couleur du SÉPARATEUR en cliquant sur la pastille colorée
  • Ensuite, les 2 curseurs suivants vous permettront d’ajuster très facilement la MARGE DU HAUT et la MARGE DU BAS

Capture d'écran de la fenêtre de personnalisation des marges situées en haut et en bas du séparateur du thème Shopify français SHOPIWEB
ÉTAPE 6 : Réglez les 2 curseurs suivants afin de personnaliser les marges situées en haut et en bas du SÉPARATEUR
  • Les 2 derniers réglages vous permettent d’ajuster la largeur du “Séparateur” à l’aide d’un menu déroulant dans lequel vous trouverez des pré-réglages dans le but de vous simplifier la vie et de rendre harmonieux vos designs. Ces réglages se font pour ORDINATEUR et MOBILE. Une case CACHER LE BLOC peut être cochée si vous souhaitez cacher le “Séparateur” sur mobile ou ordinateur

Capture d'écran de la fenêtre de personnalisation du séparateur afin de l'afficher ou non sur mobile et ordinateur
ÉTAPE 7 : Terminez la personnalisation du SÉPARATEUR en cochant ou non les cases qui permettent d'afficher ou non le SÉPARATEUR sur ordinateur et mobile

Enregistrez et c’est terminé !

Félicitations ! Vous avez à présent amélioré le design de votre boutique Shopify® grâce aux séparateurs de sections et de contenus proposés par le thème SHOPIWEB.

Besoin d’un coup de main ?

Profitez d’un coaching personnalisé avec Xavier LOPES, le créateur du thème SHOPIWEB. Durant cet entretien privilégié, il vous apprend à devenir autonome en création de boutique e-commerce avec Shopify®. Infos et réservations disponibles sur cette page.

Mis à jour

Ce contenu vous a-t-il été utile ?