Collection avec barre latérale

Pour Plain Jane et Plain Jane Interactive

Ce que vous apprendrez

  • Comment configurer la section Collection de la barre latérale

  • Comment ajuster les paramètres du panier, du menu, du produit et des étiquettes

  • Comment activer le comportement de tri, de recherche et de pagination

Comment personnaliser la Collection de la barre latérale

  1. Accédez à l'Éditeur de thème

    • Depuis votre administrateur Shopify, allez à Boutique en ligne > Thèmes

    • Cliquez sur Personnaliser les sur votre thème actif

    • Ouvrez le Modèle de collection et sélectionnez la Collection de la barre latérale section

  2. Menu de la barre latérale

    • Cliquez sur Sélectionnez pour attribuer un menu

    • Positionnez la barre latérale sur la Gauche ou Droite

    • Facultativement téléchargez une image de thème pour personnaliser l'arrière-plan

  3. Paramètres de la barre latérale

    • Ajuster Opacité de la barre latérale à l'aide du curseur (par ex. 1 px)

    • Définissez le Couleur d’arrière-plan (par ex. #202020)

    • Basculer Activer le menu fixe ou Activer l'ombre de la barre latérale si nécessaire

  4. Date & Heure (Facultatif)

    • Personnaliser les Couleurs Date/Heure pour le bureau et le mobile

    • Basculer Afficher la date/l'heure pour afficher des horodatages

  5. Liens de la barre latérale

    • Définir Alignement du texte (Gauche, Centré)

    • Ajustez l'espacement pour niveaux de lien et taille de la police

    • Personnalisez les couleurs :

      • Couleurs du menu & du lien du panier

      • Texte du panier, Quantité, et Arrière-plan couleurs

      • Couleurs mobiles inclus

  6. Titres & prix des produits

    • Personnaliser les taille de la police et couleur du texte pour les titres et les prix

    • Définir Couleur du prix comparé (par ex. rouge #FF0000)

    • Basculer les options d'affichage :

      • Afficher les titres des produits

      • Afficher les prix des produits

      • Afficher les prix comparés

  7. Étiquettes

    • Définissez la taille de la police et les couleurs de fond/texte pour :

      • Précommande

      • En promotion

      • Rupture de stock

    • Basculer la visibilité de chaque type d'étiquette

  8. Arrière-plan du produit

    • Définir rayon des coins et couleur d'arrière-plan

    • Rendre éventuellement l'arrière-plan transparent

  9. Icônes de recherche & tri

    • Définir la position de l'icône position et couleurs

    • Basculer la visibilité de icônes de recherche/tri et échanger les icônes

  10. Barre de recherche

    • Ajuster opacité de l'arrière-plan et couleurs pour :

      • Zone de recherche

      • Bouton Annuler

      • Résultats de recherche

      • Champ de saisie

    • Stylez éventuellement les coins et les ombres

  11. Menu de tri

    • Personnaliser :

      • Couleurs du texte et de l'arrière-plan pour les options par défaut et actives

      • Couleurs de la poignée du menu de tri

  12. Pagination & Chargement

    • Choisissez Type de pagination: Défilement infini ou Numéros de page

    • Définissez les couleurs pour :

      • Texte de la pagination

      • Page active et son texte

      • Flèches de pagination

💡 Astuce : Assurez-vous de prévisualiser à la fois sur les vues bureau et mobile pour confirmer l'espacement, la lisibilité et l'intégrité de la mise en page.

Une fois les comptes hérités activés, utilisez les pages de documentation de cette section pour styliser chaque partie de l'expérience client.

PrécédentCollection classiqueSuivantPage liste de collections

Mis à jour