Aperçu des Blocs
Guide complet de tous les blocs de thème disponibles et leurs options de personnalisation.
Blocs Disponibles
L'application fournit 3 blocs d'application et 1 intégration d'application pour votre thème Shopify. Utilisez l'intégration d'application une fois (recommandé), puis ajoutez les blocs aux modèles où vous souhaitez qu'ils apparaissent.
Bloc Breadcrumbs (Bloc d'application) — navigation par fil d'Ariane pour les pages de collection et de produit
Bloc Sous-catégories (Texte en dessous) (Bloc d'application) — grille/carrousel de sous-collections avec titre sous l'image
Bloc Sous-catégories (Texte superposé) (Bloc d'application) — grille/carrousel de sous-collections avec titre superposé sur l'image
Breadcrumbs & Categories (Intégration d'application) — charge les styles/scripts globaux (recommandé)
Bloc Breadcrumbs
Ajoutez ce bloc aux modèles produit et/ou collection pour afficher un fil d'Ariane cliquable. Il prend en charge l'affichage responsive et plusieurs styles de séparateurs.
Disposition et typographie
Largeur max du bloc (
page_width) — largeur maximale du conteneur en pxTaille de la police (
font_size) — taille du texte du fil d'ArianeTaille de l'icône séparée (
separated_icon_size) — taille de l'icône du séparateurEspacement du séparateur (
separated_size) — espacement autour du séparateurAlignement du texte (
text_align) — gauche/centre/droite
Marge intérieure
Haut et bas (
padding_block) — marge intérieure verticaleGauche et droite (
padding_inline) — marge intérieure horizontale
Options d'affichage
Mettre en gras l'élément actuel (
bold_current_item_on_breadcrumb) — mettre en évidence le dernier élément du fil d'ArianeEffet au survol (
hover_effect) — Aucun / Souligné / Agrandir / Lueur / Rebond / BalancementActiver le défilement horizontal sur mobile (
scroll_on_mobile) — défiler au lieu de passer à la ligne sur les petits écransMasquer le nom du produit dans les breadcrumbs (
hidden_product_name_on_breadcrumb) — masque le titre du produit sur les pages produit
Couleurs
Arrière-plan (
background_color) — couleur de fond du blocTexte (
text_color) — couleur du texte
Personnalisation avancée
Symbole du séparateur de fil d'Ariane (
trail_divider_style) — choisissez un séparateur : Chevron droit, Double flèche, Barre oblique, Pipe, Puce, Crochet, Tiret
Étiquette de l'élément
Configurez les étiquettes affichées dans le fil d'Ariane (utilisez la langue de votre boutique).
Type d'affichage Accueil (
home_display_type) — Texte / Icône Accueil (Classique) / Icône Accueil (Contour)Page d'accueil (
label_home) — étiquette pour l'élément accueilPage liste des collections (
label_list_collections) — étiquette pour la page liste des collectionsPage catalogue (
label_catalog) — étiquette pour l'élément catalogue (utilisez---pour masquer ; voir la note dans le paramètre)Lien catalogue personnalisé (
custom_catalog_link) — URL personnalisée optionnelle (par défaut/collections/all)
Bloc Sous-catégories (Texte en dessous)
Affichez les sous-collections sous forme de grille ou de carrousel. Cette disposition affiche le titre de la collection (et éventuellement le nombre de produits) sous l'image.
Général
Largeur max du bloc (
page_width) — largeur maximale du conteneur en pxActiver le carrousel sur ordinateur (
enable_desktop_slider) — active le comportement de slider sur ordinateurLecture automatique (
autoplay_mode) — modes de défilement automatique / diaporama automatique (voir ci-dessous)Activer la navigation (
slider_enable_navigation) — affiche les flèches/points de navigationEspacement vertical (
vertical_spacing) — espacement entre le titre et le slider/grilleTitre (
title) — texte du titre de la sectionRatio de l'image (
image_ratio) — Adapter à l'image / Carré / Portrait / Paysage / CercleType d'ajustement de l'image (
image_fit_type) — Couvrir / ContenirRayon de bordure de l'image (
image_border_radius) — non applicable lorsque le ratio de l'image est CercleNombre de colonnes sur ordinateur (
columns_desktop)Espacement des cartes (
card_spacing_desktop) — espace entre les cartes de catégorieDisposition du contenu (
content_layout) — Normal / Superposé / Texte en dessous / Bordure texte en dessousAlignement du texte (
text_alignment) — gauche/centre/droiteAfficher le nombre de produits (
show_product_count)Activer le texte en majuscules (
enable_uppercase_text)Tronquer les titres longs (
truncate_title) — limiter les titres à 5 motsDisposition inversée (Texte en haut, Image en dessous) (
reverse_image_position)
Lecture automatique (défilement automatique / diaporama automatique)
S'applique uniquement lorsque Activer le carrousel sur ordinateur est activé.
Désactivé (
none)Lent – 50px/s (
slow_scroll_50) — défilement automatique continuRapide – 100px/s (
slow_scroll_100) — défilement automatique continuToutes les 3 secondes (1 élément) (
slide_3s) — glisse d'un élément à la foisToutes les 3 secondes (Tous les éléments visibles) (
slide_3s_page) — glisse d'une page complète
Couleurs
Texte (
colors_text)Arrière-plan (
colors_background) — utilisé uniquement lorsque la disposition du contenu est Superposition
Disposition mobile
Nombre de colonnes sur tablette (
columns_tablet) — 2/3/4Nombre de colonnes sur mobile (
columns_mobile) — 1/2Activer le balayage sur tablette et mobile (
swipe_on_mobile)
Taille de la police du titre de la collection
La taille de la police du nombre de produits est automatiquement ajustée en fonction de la taille de la police du titre de la collection.
Bureau (
font_size_desktop)Tablette (
font_size_tablet)Mobile (
font_size_mobile)
Bloc de sous-catégories (Texte en superposition)
Affichez les sous-collections sous forme de grille ou de carrousel avec le titre (et éventuellement le nombre de produits) au-dessus de l’image.
Général
Largeur max du bloc (
page_width) — largeur maximale du conteneur en pxActiver le carrousel sur bureau (
enable_desktop_slider) — active le comportement du curseur sur bureauLecture automatique (
autoplay_mode) — modes de défilement / diaporama automatique (voir ci-dessous)Activer la navigation (
slider_enable_navigation) — affiche les flèches / points de navigationEspacement vertical (
vertical_spacing) — espacement entre le titre et le curseur / la grilleTitre (
title) — texte du titre de la sectionRatio de l’image (
image_ratio) — Adapter à l’image / Carré / Portrait / Paysage / CercleType d’ajustement de l’image (
image_fit_type) — Couvrir / ContenirRayon de bordure de l’image (
image_border_radius) — non applicable lorsque le ratio de l’image est CercleNombre de colonnes sur bureau (
columns_desktop)Position du contenu (
content_position) — Haut / Centre / BasAlignement du texte (
text_alignment) — Gauche / Centre / DroiteAfficher le nombre de produits (
show_product_count)Activer le texte en majuscules (
enable_uppercase_text)Direction de la disposition du contenu (
content_layout_direction) — Ligne unique (rangée) / Empilé (colonne)
Lecture automatique (défilement / diaporama automatique)
S’applique uniquement lorsque Activer le carrousel sur bureau est activé.
Désactivé (
none)Lent – 50px/s (
slow_scroll_50) — défilement automatique continuRapide – 100px/s (
slow_scroll_100) — défilement automatique continuToutes les 3 secondes (1 élément) (
slide_3s) — défile d’un élément à la foisToutes les 3 secondes (Tous les éléments) (
slide_3s_page) — défile d’une page entière
Disposition mobile
Nombre de colonnes sur tablette (
columns_tablet) — 2/3/4Nombre de colonnes sur mobile (
columns_mobile) — 1/2Activer le balayage sur tablette et mobile (
swipe_on_mobile)
Taille de la police du titre de la collection
La taille de la police du nombre de produits est automatiquement ajustée en fonction de la taille de la police du titre de la collection.
Bureau (
font_size_desktop)Tablette (
font_size_tablet)Mobile (
font_size_mobile)
Couleur du texte de l’en-tête
Couleur du texte (
colors_text)Couleur du texte en superposition (
colors_overlay) — couleur de superposition pour la lisibilité
Intégration d’application
L’intégration d’application est recommandée car elle charge le CSS/JS global utilisé par les blocs (par exemple : script de lecture automatique pour les sous-catégories, aides i18n optionnels, et CSS personnalisé configuré dans l’application).
Activez-le dans Éditeur de thème → Intégrations d’application
Gardez-le activé pour garantir le bon fonctionnement de tous les blocs
Ajout de blocs à votre thème
Accédez à votre administration Shopify
Naviguez vers Boutique en ligne › Thèmes
Cliquez sur « Personnaliser » sur votre thème actif
Ajoutez les blocs d’application où vous souhaitez qu’ils apparaissent
Personnalisez les paramètres et enregistrez
Paramètres du bloc
Tous les paramètres listés ci-dessus sont configurés dans le Theme editor de Shopify lorsque vous sélectionnez le bloc. La plupart des paramètres sont responsives (bureau/tablette/mobile).
Bonnes pratiques
Ajouter des Breadcrumbs & Categories aux modèles de produit et de collection
Utiliser des blocs de sous-catégories sur les pages de collection
Adapter le style du bloc à votre thème
Tester sur des appareils mobiles
Prévisualiser avant de publier